tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move status components inside individual containers. We still need to select

Browse Source 
all statuses/accounts to assemble, but at least lists don't have to be
re-rendered all the time now. Also add "mention" dropdown option
This commit is contained in:
Eugen Rochko
2016-10-24 17:11:02 +02:00
parent 61db14bcbe
commit f8f40f15da
13 changed files with 179 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/assets/javascripts/components/features/status/index.jsx
View File

@ -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);