diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-02-27 11:10:02 -0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-02-27 11:10:02 -0500 |
commit | b5ffdf5c5490ad1ac97ecb2725af878cda61810b (patch) | |
tree | cb598b0896fc31fba668a5d8b778ac08a4c3d525 /webapp | |
parent | 71d010b7af3601b0690407af328ec2865e3a0efd (diff) | |
download | chat-b5ffdf5c5490ad1ac97ecb2725af878cda61810b.tar.gz chat-b5ffdf5c5490ad1ac97ecb2725af878cda61810b.tar.bz2 chat-b5ffdf5c5490ad1ac97ecb2725af878cda61810b.zip |
Made reactions re-render when custom emojis change (#5545)
Diffstat (limited to 'webapp')
3 files changed, 24 insertions, 5 deletions
diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx index 79a8b70df..92ec675b6 100644 --- a/webapp/components/post_view/components/reaction.jsx +++ b/webapp/components/post_view/components/reaction.jsx @@ -15,7 +15,8 @@ export default class Reaction extends React.Component { post: React.PropTypes.object.isRequired, currentUserId: React.PropTypes.string.isRequired, emojiName: React.PropTypes.string.isRequired, - reactions: React.PropTypes.arrayOf(React.PropTypes.object) + reactions: React.PropTypes.arrayOf(React.PropTypes.object), + emojis: React.PropTypes.object.isRequired } constructor(props) { @@ -36,7 +37,7 @@ export default class Reaction extends React.Component { } render() { - if (!EmojiStore.has(this.props.emojiName)) { + if (!this.props.emojis.has(this.props.emojiName)) { return null; } @@ -190,7 +191,7 @@ export default class Reaction extends React.Component { > <span className='post-reaction__emoji emoticon' - style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName)) + ')'}} + style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(this.props.emojis.get(this.props.emojiName)) + ')'}} /> <span className='post-reaction__count'> {this.props.reactions.length} diff --git a/webapp/components/post_view/components/reaction_list_container.jsx b/webapp/components/post_view/components/reaction_list_container.jsx index 0ac4fa35a..e21bfa24b 100644 --- a/webapp/components/post_view/components/reaction_list_container.jsx +++ b/webapp/components/post_view/components/reaction_list_container.jsx @@ -4,6 +4,7 @@ import React from 'react'; import * as AsyncClient from 'utils/async_client.jsx'; +import EmojiStore from 'stores/emoji_store.jsx'; import ReactionStore from 'stores/reaction_store.jsx'; import ReactionListView from './reaction_list_view.jsx'; @@ -18,14 +19,17 @@ export default class ReactionListContainer extends React.Component { super(props); this.handleReactionsChanged = this.handleReactionsChanged.bind(this); + this.handleEmojisChanged = this.handleEmojisChanged.bind(this); this.state = { - reactions: ReactionStore.getReactions(this.props.post.id) + reactions: ReactionStore.getReactions(this.props.post.id), + emojis: EmojiStore.getEmojis() }; } componentDidMount() { ReactionStore.addChangeListener(this.props.post.id, this.handleReactionsChanged); + EmojiStore.addChangeListener(this.handleEmojisChanged); if (this.props.post.has_reactions) { AsyncClient.listReactions(this.props.post.channel_id, this.props.post.id); @@ -53,11 +57,16 @@ export default class ReactionListContainer extends React.Component { return true; } + if (nextState.emojis !== this.state.emojis) { + return true; + } + return false; } componentWillUnmount() { ReactionStore.removeChangeListener(this.props.post.id, this.handleReactionsChanged); + EmojiStore.removeChangeListener(this.handleEmojisChanged); } handleReactionsChanged() { @@ -66,6 +75,12 @@ export default class ReactionListContainer extends React.Component { }); } + handleEmojisChanged() { + this.setState({ + emojis: EmojiStore.getEmojis() + }); + } + render() { if (!this.props.post.has_reactions) { return null; @@ -76,6 +91,7 @@ export default class ReactionListContainer extends React.Component { post={this.props.post} currentUserId={this.props.currentUserId} reactions={this.state.reactions} + emojis={this.state.emojis} /> ); } diff --git a/webapp/components/post_view/components/reaction_list_view.jsx b/webapp/components/post_view/components/reaction_list_view.jsx index 345b7a24c..aaa896c9a 100644 --- a/webapp/components/post_view/components/reaction_list_view.jsx +++ b/webapp/components/post_view/components/reaction_list_view.jsx @@ -9,7 +9,8 @@ export default class ReactionListView extends React.Component { static propTypes = { post: React.PropTypes.object.isRequired, currentUserId: React.PropTypes.string.isRequired, - reactions: React.PropTypes.arrayOf(React.PropTypes.object) + reactions: React.PropTypes.arrayOf(React.PropTypes.object), + emojis: React.PropTypes.object.isRequired } render() { @@ -35,6 +36,7 @@ export default class ReactionListView extends React.Component { currentUserId={this.props.currentUserId} emojiName={emojiName} reactions={reactionsByName.get(emojiName)} + emojis={this.props.emojis} /> ); }); |