From 67e1082cf57944221fa60bd3c65ef8e3de80ebf9 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 14 Aug 2020 12:44:58 -0500
Subject: [PATCH] Updated placeholder component structures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- placeholder component structures
---
 .../placeholder/account_placeholder.js        | 18 +++---
 .../placeholder/comment_placeholder.js        |  4 --
 .../group_list_item_placeholder.js            | 14 +++--
 .../placeholder/list_item_placeholder.js      | 16 ++---
 .../placeholder/media_gallery_placeholder.js  |  6 --
 .../placeholder/notification_placeholder.js   | 58 ++++++++++---------
 .../placeholder/placeholder_layout.js         | 37 ++++++------
 .../profile_info_panel_placeholder.js         |  2 +-
 8 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/app/javascript/gabsocial/components/placeholder/account_placeholder.js b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
index cf8d789e..3f548186 100644
--- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
@@ -2,12 +2,7 @@ import { CX } from '../../constants'
 import { getRandomInt } from '../../utils/numbers'
 import PlaceholderLayout from './placeholder_layout'
 
-export default class AccountPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    isLast: PropTypes.bool,
-    isSmall: PropTypes.bool,
-  }
+class AccountPlaceholder extends PureComponent {
 
   render() {
     const { isLast, isSmall } = this.props
@@ -38,11 +33,18 @@ export default class AccountPlaceholder extends PureComponent {
       <div className={classes}>
         <PlaceholderLayout viewBox='0 0 400 32'>
           <rect x="38" y="4" rx="3" ry="3" width="268" height="6" /> 
-          <circle cx="14" cy="14" r="14" /> 
+          <circle cx="14" cy="14" r="14" />
           <rect x="36" y="18" rx="3" ry="3" width="208" height="6" />
         </PlaceholderLayout>
       </div>
     )
   }
 
-}
\ No newline at end of file
+}
+
+AccountPlaceholder.propTypes = {
+  isLast: PropTypes.bool,
+  isSmall: PropTypes.bool,
+}
+
+export default AccountPlaceholder
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
index 73d69259..7d7d382f 100644
--- a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
@@ -4,10 +4,6 @@ import PlaceholderLayout from './placeholder_layout'
 
 export default class CommentPlaceholder extends PureComponent {
   
-  static propTypes = {
-    isLast: PropTypes.bool,
-  }
-
   render() {
     const classes = CX({
       default: 1,
diff --git a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
index 10ff3b3f..f223f283 100644
--- a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
@@ -2,12 +2,8 @@ import { CX } from '../../constants'
 import { getRandomInt } from '../../utils/numbers'
 import PlaceholderLayout from './placeholder_layout'
 
-export default class GroupListItemPlaceholder extends PureComponent {
+class GroupListItemPlaceholder extends PureComponent {
   
-  static propTypes = {
-    isLast: PropTypes.bool,
-  }
-
   render() {
     const { isLast } = this.props
 
@@ -32,4 +28,10 @@ export default class GroupListItemPlaceholder extends PureComponent {
     )
   }
 
-}
\ No newline at end of file
+}
+
+GroupListItemPlaceholder.propTypes = {
+  isLast: PropTypes.bool,
+}
+
+export default GroupListItemPlaceholder
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
index f10cd55c..0aef0b4e 100644
--- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
@@ -3,11 +3,7 @@ import { getRandomInt } from '../../utils/numbers'
 import PlaceholderLayout from './placeholder_layout'
 import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
-export default class ListItemPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    isLast: PropTypes.bool,
-  }
+class ListItemPlaceholder extends PureComponent {
 
   render() {
     const { isLast } = this.props
@@ -36,11 +32,17 @@ export default class ListItemPlaceholder extends PureComponent {
         classNamesXS={classesXS}
       >
         <PlaceholderLayout viewBox='0 0 400 30'>
-          <circle cx='10' cy='17' r='10' /> 
+          <circle cx='10' cy='17' r='10' />
           <rect x='30' y='12' rx='5' ry='5' width={width} height='12' />
         </PlaceholderLayout>
       </ResponsiveClassesComponent>
     )
   }
 
-}
\ No newline at end of file
+}
+
+ListItemPlaceholder.propTypes = {
+  isLast: PropTypes.bool,
+}
+
+export default ListItemPlaceholder
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
index fbfdf88b..cc93bc48 100644
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
@@ -1,14 +1,8 @@
 import PlaceholderLayout from './placeholder_layout'
 
 export default class MediaGalleryPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    type: PropTypes.string,
-  }
 
   render() {
-    const { type } = this.props
-
     return (
       <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
         <PlaceholderLayout viewBox='0 0 400 196'>
diff --git a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
index 05dc38e3..43d84409 100644
--- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
@@ -7,11 +7,7 @@ import { getRandomInt } from '../../utils/numbers'
 import ResponsiveComponent from '../../features/ui/util/responsive_component'
 import PlaceholderLayout from './placeholder_layout'
 
-export default class NotificationPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    isLast: PropTypes.bool,
-  }
+class NotificationPlaceholder extends PureComponent {
 
   render() {
     const { isLast } = this.props
@@ -42,21 +38,21 @@ export default class NotificationPlaceholder extends PureComponent {
           <div className={classes}>
             <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 400 170'>
-                <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' /> 
-                <rect x={left} y='34' rx='4' ry='4' width='12' height='8' /> 
-                <circle cx='8' cy='10' r='8' /> 
+                <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
+                <rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
+                <circle cx='8' cy='10' r='8' />
                 <circle cx='36' cy='12' r='12' />
-                <rect x='24' y='55' rx='0' ry='0' width='375' height='1' /> 
-                <rect x='24' y='166' rx='0' ry='0' width='475' height='1' /> 
-                <rect x='24' y='55' rx='0' ry='0' width='1' height='112' /> 
+                <rect x='24' y='55' rx='0' ry='0' width='375' height='1' />
+                <rect x='24' y='166' rx='0' ry='0' width='475' height='1' />
+                <rect x='24' y='55' rx='0' ry='0' width='1' height='112' />
                 <rect x='399' y='55' rx='0' ry='0' width='1' height='112' />
-                <rect x='32' y='64' rx='4' ry='4' width={width1} height='8' /> 
-                <rect x='32' y='80' rx='4' ry='4' width='23' height='8' /> 
-                <rect x='32' y='102' rx='4' ry='4' width='337' height='8' /> 
-                <rect x='32' y='118' rx='4' ry='4' width='290' height='8' /> 
+                <rect x='32' y='64' rx='4' ry='4' width={width1} height='8' />
+                <rect x='32' y='80' rx='4' ry='4' width='23' height='8' />
+                <rect x='32' y='102' rx='4' ry='4' width='337' height='8' />
+                <rect x='32' y='118' rx='4' ry='4' width='290' height='8' />
                 <rect x='32' y='134' rx='4' ry='4' width='216' height='8' />
-                <rect x='32' y='152' rx='4' ry='4' width='23' height='8' /> 
-                <rect x='62' y='152' rx='4' ry='4' width='60' height='8' /> 
+                <rect x='32' y='152' rx='4' ry='4' width='23' height='8' />
+                <rect x='62' y='152' rx='4' ry='4' width='60' height='8' />
                 <rect x='130' y='152' rx='4' ry='4' width='26' height='8' />
               </PlaceholderLayout>
             </div>
@@ -66,16 +62,16 @@ export default class NotificationPlaceholder extends PureComponent {
           <div className={classesXS}>
             <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 380 200'>
-                <circle cx='20' cy='20' r='20' /> 
-                <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' /> 
-                <rect x='0' y='76' rx='0' ry='0' width='1' height='120' /> 
-                <rect x='379' y='76' rx='0' ry='0' width='1' height='120' /> 
-                <rect x='0' y='76' rx='0' ry='0' width='380' height='1' /> 
-                <rect x='0' y='195' rx='0' ry='0' width='380' height='1' /> 
-                <rect x='12' y='90' rx='5' ry='5' width='280' height='10' /> 
-                <rect x='12' y='108' rx='5' ry='5' width='80' height='10' /> 
-                <rect x='12' y='136' rx='5' ry='5' width='320' height='10' /> 
-                <rect x='12' y='154' rx='5' ry='5' width='210' height='10' /> 
+                <circle cx='20' cy='20' r='20' />
+                <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
+                <rect x='0' y='76' rx='0' ry='0' width='1' height='120' />
+                <rect x='379' y='76' rx='0' ry='0' width='1' height='120' />
+                <rect x='0' y='76' rx='0' ry='0' width='380' height='1' />
+                <rect x='0' y='195' rx='0' ry='0' width='380' height='1' />
+                <rect x='12' y='90' rx='5' ry='5' width='280' height='10' />
+                <rect x='12' y='108' rx='5' ry='5' width='80' height='10' />
+                <rect x='12' y='136' rx='5' ry='5' width='320' height='10' />
+                <rect x='12' y='154' rx='5' ry='5' width='210' height='10' />
                 <rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
               </PlaceholderLayout>
             </div>
@@ -85,4 +81,10 @@ export default class NotificationPlaceholder extends PureComponent {
     )
   }
 
-}
\ No newline at end of file
+}
+
+NotificationPlaceholder.propTypes = {
+  isLast: PropTypes.bool,
+}
+
+export default NotificationPlaceholder
diff --git a/app/javascript/gabsocial/components/placeholder/placeholder_layout.js b/app/javascript/gabsocial/components/placeholder/placeholder_layout.js
index 9eb71bff..8139e4dc 100644
--- a/app/javascript/gabsocial/components/placeholder/placeholder_layout.js
+++ b/app/javascript/gabsocial/components/placeholder/placeholder_layout.js
@@ -2,26 +2,8 @@ import { defineMessages, injectIntl } from 'react-intl'
 import ContentLoader from 'react-content-loader'
 import { DEFAULT_THEME } from '../../constants'
 
-const messages = defineMessages({
-  loading: { id: 'loading_indicator.label', defaultMessage: 'Loading..' },
-})
-
-const mapStateToProps = (state) => ({
-  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
-})
-
-export default
-@injectIntl
-@connect(mapStateToProps)
 class PlaceholderLayout extends PureComponent {
   
-  static propTypes = {
-    children: PropTypes.node,
-    intl: PropTypes.object.isRequired,
-    theme: PropTypes.string.isRequired,
-    viewBox: PropTypes.object.isRequired,
-  }
-
   render() {
     const {
       intl,
@@ -46,4 +28,21 @@ class PlaceholderLayout extends PureComponent {
     )
   }
 
-}
\ No newline at end of file
+}
+
+const messages = defineMessages({
+  loading: { id: 'loading_indicator.label', defaultMessage: 'Loading...' },
+})
+
+const mapStateToProps = (state) => ({
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
+})
+
+PlaceholderLayout.propTypes = {
+  children: PropTypes.node,
+  intl: PropTypes.object.isRequired,
+  theme: PropTypes.string.isRequired,
+  viewBox: PropTypes.object.isRequired,
+}
+
+export default injectIntl(connect(mapStateToProps)(PlaceholderLayout))
diff --git a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
index bc02de51..4cecca84 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
@@ -4,7 +4,7 @@ export default class ProfileInfoPanelPlaceholder extends PureComponent {
   
   render() {
     return (
-      <div className={[_s.default]}>
+      <div className={_s.default}>
         <PlaceholderLayout viewBox='0 0 340 108'>
           <rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> 
           <rect x='0' y='18' rx='4' ry='4' width='314' height='8' />