diff --git a/react/features/reactions/actions.js b/react/features/reactions/actions.js index 03fb427dc..da74c5447 100644 --- a/react/features/reactions/actions.js +++ b/react/features/reactions/actions.js @@ -1,5 +1,7 @@ // @flow +import uuid from 'uuid'; + import { ADD_RECEIVED_REACTION } from './actionTypes'; /** @@ -18,7 +20,8 @@ export function addReceivedReaction(reaction: string, participant: Object) { return { type: ADD_RECEIVED_REACTION, participant, - reaction + reaction, + uuid: uuid.v4() }; } diff --git a/react/features/reactions/components/ReactionsCanvas.web.js b/react/features/reactions/components/ReactionsCanvas.web.js index 1e28f1f62..363097b57 100644 --- a/react/features/reactions/components/ReactionsCanvas.web.js +++ b/react/features/reactions/components/ReactionsCanvas.web.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux'; import EmojiIcon from './EmojiIcon'; type Props = { - _reaction: string + _reactions: Array }; /** @@ -24,9 +24,9 @@ class ReactionsCanvas extends Component { * @returns {ReactElement} */ render() { - const reaction = this.props._reaction; + const reactions = this.props._reactions; - if (!reaction) { + if (!reactions || !reactions.length) { return null; } @@ -37,9 +37,17 @@ class ReactionsCanvas extends Component { return (
- + { + /* eslint-disable react/jsx-wrap-multilines */ + + reactions.map( + ({ reaction, uuid }) => + ) + + /* eslint-enable react/jsx-wrap-multilines */ + }
); } @@ -51,7 +59,7 @@ class ReactionsCanvas extends Component { * @param {Object} state - The redux state. * @private * @returns {{ - * _reaction: string + * _reactions: Array * }} */ function _mapStateToProps(state) { // eslint-disable-line no-unused-vars @@ -59,15 +67,8 @@ function _mapStateToProps(state) { // eslint-disable-line no-unused-vars const receivedReactions = stateFeatureReactions && stateFeatureReactions.receivedReactions; - // TODO Eventually and wherever appropriate (which is definitely not here), - // pop reactions which have been rendered. - const reaction - = receivedReactions && receivedReactions.length - ? receivedReactions[0] - : undefined; - return { - _reaction: reaction + _reactions: receivedReactions || [] }; } diff --git a/react/features/reactions/reducer.js b/react/features/reactions/reducer.js index 9083d3863..cc2490ac8 100644 --- a/react/features/reactions/reducer.js +++ b/react/features/reactions/reducer.js @@ -15,11 +15,11 @@ ReducerRegistry.register( return { ...state, receivedReactions: [ - - // FIXME Push the latest reaction at the top because I'm - // currently rendering only the first reaction. - action.reaction, - ...state.receivedReactions + ...state.receivedReactions, + { + reaction: action.reaction, + uuid: action.uuid + } ] }; }