MM-31990 fix limit reacting to a post to 40 different emojis (#5121) (#5129)

* MM-31990 fix limit reacting to a post to 40 different emojis

* Fix selector

(cherry picked from commit 5381062bfa)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

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,

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,

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;
+    },
+);