1 files changed, 39 insertions, 16 deletions

diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index c51fb5d31..f4ca8ff92 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -9,22 +9,32 @@ import DetailedStatus        from './components/detailed_status';
 import ActionBar             from './components/action_bar';
 import Column                from '../ui/components/column';
 import { favourite, reblog } from '../../actions/interactions';
-import { replyCompose }      from '../../actions/compose';
+import {
+  replyCompose,
+  mentionCompose
+}                            from '../../actions/compose';
 import { deleteStatus }      from '../../actions/statuses';
 import {
-  getStatus,
+  makeGetStatus,
   getStatusAncestors,
   getStatusDescendants
 }                            from '../../selectors';
 import { ScrollContainer }   from 'react-router-scroll';
 import ColumnBackButton      from '../../components/column_back_button';
+import StatusContainer       from '../../containers/status_container';
 
-const mapStateToProps = (state, props) => ({
-  status: getStatus(state, Number(props.params.statusId)),
-  ancestors: getStatusAncestors(state, Number(props.params.statusId)),
-  descendants: getStatusDescendants(state, Number(props.params.statusId)),
-  me: state.getIn(['timelines', 'me'])
-});
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, props) => ({
+    status: getStatus(state, Number(props.params.statusId)),
+    ancestorsIds: state.getIn(['timelines', 'ancestors', Number(props.params.statusId)]),
+    descendantsIds: state.getIn(['timelines', 'descendants', Number(props.params.statusId)]),
+    me: state.getIn(['timelines', 'me'])
+  });
+
+  return mapStateToProps;
+};
 
 const Status = React.createClass({
 
@@ -32,8 +42,8 @@ const Status = React.createClass({
     params: React.PropTypes.object.isRequired,
     dispatch: React.PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
-    ancestors: ImmutablePropTypes.orderedSet.isRequired,
-    descendants: ImmutablePropTypes.orderedSet.isRequired
+    ancestorsIds: ImmutablePropTypes.orderedSet,
+    descendantsIds: ImmutablePropTypes.orderedSet
   },
 
   mixins: [PureRenderMixin],
@@ -64,12 +74,17 @@ const Status = React.createClass({
     this.props.dispatch(deleteStatus(status.get('id')));
   },
 
+  handleMentionClick (account) {
+    this.props.dispatch(mentionCompose(account));
+  },
+
   renderChildren (list) {
-    return list.map(s => <EmbeddedStatus status={s} me={this.props.me} key={s.get('id')} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} />);
+    return list.map(id => <StatusContainer key={id} id={id} />);
   },
 
   render () {
-    const { status, ancestors, descendants, me } = this.props;
+    let ancestors, descendants;
+    const { status, ancestorsIds, descendantsIds, me } = this.props;
 
     if (status === null) {
       return (
@@ -81,18 +96,26 @@ const Status = React.createClass({
 
     const account = status.get('account');
 
+    if (ancestorsIds) {
+      ancestors = <div>{this.renderChildren(ancestorsIds)}</div>;
+    }
+
+    if (descendantsIds) {
+      descendants = <div>{this.renderChildren(descendantsIds)}</div>;
+    }
+
     return (
       <Column>
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='thread'>
           <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
-            <div>{this.renderChildren(ancestors)}</div>
+            {ancestors}
 
             <DetailedStatus status={status} me={me} />
-            <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} />
+            <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} />
 
-            <div>{this.renderChildren(descendants)}</div>
+            {descendants}
           </div>
         </ScrollContainer>
       </Column>
@@ -101,4 +124,4 @@ const Status = React.createClass({
 
 });
 
-export default connect(mapStateToProps)(Status);
+export default connect(makeMapStateToProps)(Status);