Progress

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -8,6 +8,7 @@ import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import Button from '../button'
 import Divider from '../divider'
+import Dummy from '../dummy'
 import Icon from '../icon'
 import Text from '../text'
 import RelativeTimestamp from '../relative_timestamp'
@@ -19,7 +20,6 @@ const messages = defineMessages({
 
 const mapDispatchToProps = (dispatch) => ({
   onOpenGroupMembersModal(groupId) {
-    console.log("onOpenGroupMembersModal:", groupId)
     dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
   },
 })
@@ -33,6 +33,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
     group: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
     onOpenGroupMembersModal: PropTypes.func.isRequired,
+    noPanel: PropTypes.bool,
   }
 
   handleOnOpenGroupMembersModal = () => {
@@ -40,10 +41,12 @@ class GroupInfoPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, group } = this.props
+    const { intl, group, noPanel } = this.props
+
+    const Wrapper = noPanel ? Dummy : PanelLayout
 
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <Wrapper title={intl.formatMessage(messages.title)}>
         {
           !!group &&
           <Fragment>
@@ -102,7 +105,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
             </Text>
           </Fragment>
         }
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }

app/javascript/gabsocial/components/panel/lists_panel.js

@@ -38,20 +38,8 @@ class ListsPanel extends ImmutablePureComponent {
     'lists',
   ]
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
-      return {
-        fetched: true,
-      }
-    }
-
-    return null
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (!prevState.fetched && this.state.fetched) {
-      this.props.onFetchLists()
-    }
+  componentDidMount(prevProps, prevState, snapshot) {
+    this.props.onFetchLists()
   }
 
   render() {

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -81,4 +81,4 @@ class MediaGalleryPanel extends ImmutablePureComponent {
       </PanelLayout>
     )
   }
-}
+}

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -9,6 +9,7 @@ import PanelLayout from './panel_layout'
 import Divider from '../divider'
 import Icon from '../icon'
 import Text from '../text'
+import Dummy from '../dummy'
 
 const messages = defineMessages({
   title: { id: 'about', defaultMessage: 'About' },
@@ -39,6 +40,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   static propTypes = {
     identityProofs: ImmutablePropTypes.list,
     account: ImmutablePropTypes.map,
+    noPanel: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   }
 
@@ -47,7 +49,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, account, identityProofs } = this.props
+    const {
+      intl,
+      account,
+      identityProofs,
+      noPanel
+    } = this.props
 
     if (!account) return null
 
@@ -60,8 +67,10 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const isInvestor = account.get('is_investor')
     const hasBadges = isPro || isDonor || isInvestor
 
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
     return (
-      <PanelLayout title={intl.formatMessage(messages.title)}>
+      <Wrapper title={intl.formatMessage(messages.title)}>
         <div className={[_s.default].join(' ')}>
           {
             hasNote &&
@@ -166,7 +175,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
           )}
 
         </div>
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }

app/javascript/gabsocial/components/panel/profile_stats_panel.js

@@ -5,6 +5,8 @@ import { me, favouritesCount } from '../../initial_state'
 import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
 import UserStat from '../user_stat'
+import Dummy from '../dummy'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
 
 const messages = defineMessages({
   gabs: { id: 'account.gabs', defaultMessage: 'Gabs' },
@@ -20,32 +22,45 @@ class ProfileStatsPanel extends ImmutablePureComponent {
   static propTypes = {
     account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
+    noPanel: PropTypes.bool,
   }
 
   render() {
-    const { intl, account } = this.props
+    const {
+      intl,
+      account,
+      noPanel
+    } = this.props
 
     if (!account) return null
 
+    const Wrapper = noPanel ? Dummy : PanelLayout
+
     return (
-      <PanelLayout>
+      <Wrapper>
         {
           !!account &&
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexRow].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
+          >
             <UserStat
               title={intl.formatMessage(messages.gabs)}
               value={shortNumberFormat(account.get('statuses_count'))}
               to={`/${account.get('acct')}`}
+              isCentered={noPanel}
             />
             <UserStat
               title={intl.formatMessage(messages.follows)}
               value={shortNumberFormat(account.get('following_count'))}
               to={`/${account.get('acct')}/following`}
+              isCentered={noPanel}
             />
             <UserStat
               title={intl.formatMessage(messages.followers)}
               value={shortNumberFormat(account.get('followers_count'))}
               to={`/${account.get('acct')}/followers`}
+              isCentered={noPanel}
             />
             {
               account.get('id') === me &&
@@ -53,11 +68,12 @@ class ProfileStatsPanel extends ImmutablePureComponent {
                 title={intl.formatMessage(messages.likes)}
                 value={shortNumberFormat(favouritesCount)}
                 to={`/${account.get('acct')}/likes`}
+                isCentered={noPanel}
               />
             }
-          </div>
+          </ResponsiveClassesComponent>
         }
-      </PanelLayout>
+      </Wrapper>
     )
   }
 }