diff --git a/app/components/reactions/index.js b/app/components/reactions/index.js index edfae7cca..b9c6b0494 100644 --- a/app/components/reactions/index.js +++ b/app/components/reactions/index.js @@ -4,6 +4,8 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; +import {addReaction} from '@actions/views/emoji'; +import {MAX_ALLOWED_REACTIONS} from '@constants/emoji'; import {removeReaction} from '@mm-redux/actions/posts'; import {makeGetReactionsForPost, getPost} from '@mm-redux/selectors/entities/posts'; import {haveIChannelPermission} from '@mm-redux/selectors/entities/roles'; @@ -12,9 +14,7 @@ import Permissions from '@mm-redux/constants/permissions'; import {getCurrentUserId} from '@mm-redux/selectors/entities/users'; import {getTheme} from '@mm-redux/selectors/entities/preferences'; import {getChannel, isChannelReadOnlyById} from '@mm-redux/selectors/entities/channels'; - -import {addReaction} from 'app/actions/views/emoji'; -import {MAX_ALLOWED_REACTIONS} from 'app/constants/emoji'; +import {selectEmojisCountFromReactions} from '@selectors/emojis'; import Reactions from './reactions'; @@ -46,10 +46,7 @@ function makeMapStateToProps() { default: true, }); - if (reactions) { - // On servers without metadata reactions at this point can be undefined - canAddMoreReactions = Object.values(reactions).length < MAX_ALLOWED_REACTIONS; - } + canAddMoreReactions = selectEmojisCountFromReactions(reactions) < MAX_ALLOWED_REACTIONS; canRemoveReaction = haveIChannelPermission(state, { team: teamId, diff --git a/app/screens/post_options/index.js b/app/screens/post_options/index.js index 5cb0a0cbd..8f5be5409 100644 --- a/app/screens/post_options/index.js +++ b/app/screens/post_options/index.js @@ -4,6 +4,9 @@ import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; +import {addReaction} from '@actions/views/emoji'; +import {MAX_ALLOWED_REACTIONS} from '@constants/emoji'; +import {THREAD} from '@constants/screen'; import { deletePost, flagPost, @@ -23,11 +26,8 @@ import {haveIChannelPermission} from '@mm-redux/selectors/entities/roles'; import {getCurrentTeamId, getCurrentTeamUrl} from '@mm-redux/selectors/entities/teams'; import {canEditPost} from '@mm-redux/utils/post_utils'; import {isMinimumServerVersion} from '@mm-redux/utils/helpers'; - -import {MAX_ALLOWED_REACTIONS} from 'app/constants/emoji'; -import {THREAD} from 'app/constants/screen'; -import {addReaction} from 'app/actions/views/emoji'; -import {getDimensions} from 'app/selectors/device'; +import {getDimensions} from '@selectors/device'; +import {selectEmojisCountFromReactions} from '@selectors/emojis'; import PostOptions from './post_options'; @@ -121,17 +121,13 @@ export function makeMapStateToProps() { canCopyText = true; } - if (reactions && Object.values(reactions).length >= MAX_ALLOWED_REACTIONS) { - canAddReaction = false; - } - if (!isMinimumServerVersion(serverVersion, 5, 18) || channelIsArchived) { canMarkAsUnread = false; } return { ...getDimensions(state), - canAddReaction, + canAddReaction: canAddReaction && selectEmojisCountFromReactions(reactions) < MAX_ALLOWED_REACTIONS, canReply, canCopyPermalink, canCopyText, diff --git a/app/selectors/emojis.js b/app/selectors/emojis.js index fd000bd17..bfca81f0a 100644 --- a/app/selectors/emojis.js +++ b/app/selectors/emojis.js @@ -129,3 +129,16 @@ export const selectEmojisBySection = createSelector( return emoticons; }, ); + +export const selectEmojisCountFromReactions = createSelector( + (reactions) => reactions, + (reactions) => { + if (reactions) { + const names = Object.values(reactions).map((r) => r.emoji_name); + const diff = new Set(names); + return diff.size; + } + + return 0; + }, +);