Adding following/followers lists to the UI

2 files changed, 42 insertions, 15 deletions

diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx
index 195b143af..e0532dca1 100644
--- a/app/assets/javascripts/components/features/account/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx
@@ -1,6 +1,27 @@
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenu       from '../../../components/dropdown_menu';
+import { Link }           from 'react-router';
+
+const outerStyle = {
+  borderTop: '1px solid #363c4b',
+  borderBottom: '1px solid #363c4b',
+  lineHeight: '36px',
+  overflow: 'hidden',
+  flex: '0 0 auto',
+  display: 'flex'
+};
+
+const outerDropdownStyle = {
+  padding: '10px',
+  flex: '1 1 auto'
+};
+
+const outerLinksStyle = {
+  flex: '1 1 auto',
+  display: 'flex',
+  lineHeight: '18px'
+};
 
 const ActionBar = React.createClass({
 
@@ -34,26 +55,26 @@ const ActionBar = React.createClass({
     }
 
     return (
-      <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto', display: 'flex' }}>
-        <div style={{ padding: '10px', flex: '1 1 auto' }}>
+      <div style={outerStyle}>
+        <div style={outerDropdownStyle}>
           <DropdownMenu items={menu} icon='bars' size={24} />
         </div>
 
-        <div style={{ flex: '1 1 auto', display: 'flex', lineHeight: '18px' }}>
-          <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}>
+        <div style={outerLinksStyle}>
+          <Link to={`/accounts/${account.get('id')}`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Posts</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('statuses_count')}</span>
-          </div>
+          </Link>
 
-          <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px 5px' }}>
+          <Link to={`/accounts/${account.get('id')}/following`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px 5px' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Follows</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('following_count')}</span>
-          </div>
+          </Link>
 
-          <div style={{ overflow: 'hidden', width: '80px', padding: '10px 5px', borderLeft: '1px solid #363c4b' }}>
+          <Link to={`/accounts/${account.get('id')}/followers`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', padding: '10px 5px', borderLeft: '1px solid #363c4b' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Followers</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('followers_count')}</span>
-          </div>
+          </Link>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx
index 76d69f751..548f7fc1f 100644
--- a/app/assets/javascripts/components/features/account/index.jsx
+++ b/app/assets/javascripts/components/features/account/index.jsx
@@ -14,17 +14,23 @@ import { mentionCompose }    from '../../actions/compose';
 import Header                from './components/header';
 import {
   getAccountTimeline,
-  getAccount
+  makeGetAccount
 }                            from '../../selectors';
 import LoadingIndicator      from '../../components/loading_indicator';
 import ActionBar             from './components/action_bar';
 import Column                from '../ui/components/column';
 import ColumnBackButton      from '../../components/column_back_button';
 
-const mapStateToProps = (state, props) => ({
-  account: getAccount(state, Number(props.params.accountId)),
-  me: state.getIn(['timelines', 'me'])
-});
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, props) => ({
+    account: getAccount(state, Number(props.params.accountId)),
+    me: state.getIn(['timelines', 'me'])
+  });
+
+  return mapStateToProps;
+};
 
 const Account = React.createClass({
 
@@ -92,4 +98,4 @@ const Account = React.createClass({
 
 });
 
-export default connect(mapStateToProps)(Account);
+export default connect(makeMapStateToProps)(Account);