diff options
Diffstat (limited to 'app/assets/javascripts/components/features/status')
-rw-r--r-- | app/assets/javascripts/components/features/status/components/action_bar.jsx | 3 | ||||
-rw-r--r-- | app/assets/javascripts/components/features/status/index.jsx | 55 |
2 files changed, 42 insertions, 16 deletions
diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index 6d6aa87fc..d0cae4557 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -11,6 +11,7 @@ const ActionBar = React.createClass({ onReblog: React.PropTypes.func.isRequired, onFavourite: React.PropTypes.func.isRequired, onDelete: React.PropTypes.func.isRequired, + onMention: React.PropTypes.func.isRequired, me: React.PropTypes.number.isRequired }, @@ -23,6 +24,8 @@ const ActionBar = React.createClass({ if (me === status.getIn(['account', 'id'])) { menu.push({ text: 'Delete', action: () => this.props.onDelete(status) }); + } else { + menu.push({ text: 'Mention', action: () => this.props.onMention(status.get('account')) }); } return ( 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); |