Progress

app/javascript/gabsocial/pages/profile_page.js

@@ -1,7 +1,10 @@
 import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { fetchAccountByUsername } from '../actions/accounts'
+import { makeGetAccount } from '../selectors'
 import LinkFooter from '../components/link_footer'
+import ProfileStatsPanel from '../components/panel/profile_stats_panel'
 import ProfileInfoPanel from '../components/panel/profile_info_panel'
 import MediaGalleryPanel from '../components/panel/media_gallery_panel'
 import ProfileLayout from '../layouts/profile_layout'
@@ -10,24 +13,15 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
   const accounts = state.getIn(['accounts'])
   const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() == username.toLowerCase())
 
-  let accountId = -1
   let account = null
-  let accountUsername = username
-  if (accountFetchError) {
-    accountId = null
-  }
-  else {
+  if (!accountFetchError) {
     account = accounts.find(acct => username.toLowerCase() == acct.getIn(['acct'], '').toLowerCase())
-    accountId = account ? account.getIn(['id'], null) : -1
-    accountUsername = account ? account.getIn(['acct'], '') : ''
   }
 
-  //Children components fetch information
+  const getAccount = makeGetAccount()
 
   return {
-    account,
-    accountId,
-    accountUsername,
+    account: account ? getAccount(state, account.get('id')) : null,
   }
 }
 
@@ -35,30 +29,33 @@ export default
 @connect(mapStateToProps)
 class ProfilePage extends ImmutablePureComponent {
   static propTypes = {
+    params: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map,
-    accountUsername: PropTypes.string.isRequired,
-    accountId: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]).isRequired,
+    dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
   }
 
+  componentWillMount() {
+    const { dispatch, params: { username } } = this.props
+    dispatch(fetchAccountByUsername(username))
+  }
+
   render() {
-    const { accountId, account, accountUsername } = this.props
+    const { account } = this.props
 
     return (
       <ProfileLayout
         account={account}
         layout={(
           <Fragment>
-            <ProfileInfoPanel />
-            <MediaGalleryPanel />
+            <ProfileStatsPanel account={account} />
+            <ProfileInfoPanel account={account} />
+            <MediaGalleryPanel account={account} />
             <LinkFooter />
           </Fragment>
         )}
       >
-        { /* this.props.children */ }
+        { this.props.children }
       </ProfileLayout>
     )
   }