Making AccountTimeline into a sub-route

app/assets/javascripts/components/containers/mastodon.jsx

@@ -20,6 +20,7 @@ import Status             from '../features/status';
 import GettingStarted     from '../features/getting_started';
 import PublicTimeline     from '../features/public_timeline';
 import UI                 from '../features/ui';
+import AccountTimeline    from '../features/account_timeline';
 
 const store = configureStore();
 
@@ -78,7 +79,9 @@ const Mastodon = React.createClass({
             <IndexRoute component={GettingStarted} />
             <Route path='/statuses/all' component={PublicTimeline} />
             <Route path='/statuses/:statusId' component={Status} />
-            <Route path='/accounts/:accountId' component={Account} />
+            <Route path='/accounts/:accountId' component={Account}>
+              <IndexRoute component={AccountTimeline} />
+            </Route>
           </Route>
         </Router>
       </Provider>

app/assets/javascripts/components/features/account/index.jsx

@@ -10,28 +10,17 @@ import {
   fetchAccountTimeline,
   expandAccountTimeline
 }                            from '../../actions/accounts';
-import { deleteStatus }      from '../../actions/statuses';
-import { replyCompose }      from '../../actions/compose';
-import {
-  favourite,
-  reblog,
-  unreblog,
-  unfavourite
-}                            from '../../actions/interactions';
 import Header                from './components/header';
 import {
   getAccountTimeline,
   getAccount
 }                            from '../../selectors';
-import StatusList            from '../../components/status_list';
 import LoadingIndicator      from '../../components/loading_indicator';
-import Immutable             from 'immutable';
 import ActionBar             from './components/action_bar';
 import Column                from '../ui/components/column';
 
 const mapStateToProps = (state, props) => ({
   account: getAccount(state, Number(props.params.accountId)),
-  statuses: getAccountTimeline(state, Number(props.params.accountId)),
   me: state.getIn(['timelines', 'me'])
 });
 
@@ -41,20 +30,18 @@ const Account = React.createClass({
     params: React.PropTypes.object.isRequired,
     dispatch: React.PropTypes.func.isRequired,
     account: ImmutablePropTypes.map,
-    statuses: ImmutablePropTypes.list
+    me: React.PropTypes.number.isRequired
   },
 
   mixins: [PureRenderMixin],
 
   componentWillMount () {
     this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
-    this.props.dispatch(fetchAccountTimeline(Number(this.props.params.accountId)));
   },
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
       this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
-      this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId)));
     }
   },
 
@@ -74,36 +61,8 @@ const Account = React.createClass({
     }
   },
 
-  handleReply (status) {
-    this.props.dispatch(replyCompose(status));
-  },
-
-  handleReblog (status) {
-    if (status.get('reblogged')) {
-      this.props.dispatch(unreblog(status));
-    } else {
-      this.props.dispatch(reblog(status));
-    }
-  },
-
-  handleFavourite (status) {
-    if (status.get('favourited')) {
-      this.props.dispatch(unfavourite(status));
-    } else {
-      this.props.dispatch(favourite(status));
-    }
-  },
-
-  handleDelete (status) {
-    this.props.dispatch(deleteStatus(status.get('id')));
-  },
-
-  handleScrollToBottom () {
-    this.props.dispatch(expandAccountTimeline(this.props.account.get('id')));
-  },
-
   render () {
-    const { account, statuses, me } = this.props;
+    const { account, me } = this.props;
 
     if (account === null) {
       return (
@@ -117,8 +76,10 @@ const Account = React.createClass({
       <Column>
         <div style={{ display: 'flex', flexDirection: 'column', 'flex': '0 0 auto', height: '100%' }}>
           <Header account={account} />
+
           <ActionBar account={account} me={me} onFollow={this.handleFollow} onBlock={this.handleBlock} />
-          <StatusList statuses={statuses} me={me} onScrollToBottom={this.handleScrollToBottom} onReply={this.handleReply} onReblog={this.handleReblog} onFavourite={this.handleFavourite} onDelete={this.handleDelete} />
+
+          {this.props.children}
         </div>
       </Column>
     );

app/assets/javascripts/components/features/account_timeline/index.jsx

+import { connect }            from 'react-redux';
+import PureRenderMixin        from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes     from 'react-immutable-proptypes';
+import { getAccountTimeline } from '../../selectors';
+import {
+  fetchAccountTimeline,
+  expandAccountTimeline
+}                             from '../../actions/accounts';
+import { deleteStatus }       from '../../actions/statuses';
+import { replyCompose }       from '../../actions/compose';
+import {
+  favourite,
+  reblog,
+  unreblog,
+  unfavourite
+}                             from '../../actions/interactions';
+import StatusList             from '../../components/status_list';
+
+const mapStateToProps = (state, props) => ({
+  statuses: getAccountTimeline(state, Number(props.params.accountId)),
+  me: state.getIn(['timelines', 'me'])
+});
+
+const AccountTimeline = React.createClass({
+
+  propTypes: {
+    params: React.PropTypes.object.isRequired,
+    dispatch: React.PropTypes.func.isRequired,
+    statuses: ImmutablePropTypes.list
+  },
+
+  mixins: [PureRenderMixin],
+
+  componentWillMount () {
+    this.props.dispatch(fetchAccountTimeline(Number(this.props.params.accountId)));
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
+      this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId)));
+    }
+  },
+
+  handleReply (status) {
+    this.props.dispatch(replyCompose(status));
+  },
+
+  handleReblog (status) {
+    if (status.get('reblogged')) {
+      this.props.dispatch(unreblog(status));
+    } else {
+      this.props.dispatch(reblog(status));
+    }
+  },
+
+  handleFavourite (status) {
+    if (status.get('favourited')) {
+      this.props.dispatch(unfavourite(status));
+    } else {
+      this.props.dispatch(favourite(status));
+    }
+  },
+
+  handleDelete (status) {
+    this.props.dispatch(deleteStatus(status.get('id')));
+  },
+
+  handleScrollToBottom () {
+    this.props.dispatch(expandAccountTimeline(this.props.account.get('id')));
+  },
+
+  render () {
+    const { statuses, me } = this.props;
+
+    return <StatusList statuses={statuses} me={me} onScrollToBottom={this.handleScrollToBottom} onReply={this.handleReply} onReblog={this.handleReblog} onFavourite={this.handleFavourite} onDelete={this.handleDelete} />
+  }
+
+});
+
+export default connect(mapStateToProps)(AccountTimeline);