Display all emoji reactions

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - ServiceWorker: switch to a network-first strategy. The "An update is available!" prompt goes away.
 - Posts: increased font size of focused status in threads.
 - Posts: let "mute conversation" be clicked from any feed, not just noficiations.
+- Posts: display all emoji reactions.
 
 ### Fixed
 - Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.

app/soapbox/utils/__tests__/emoji-reacts.test.ts

@@ -5,7 +5,6 @@ import { normalizeStatus } from 'soapbox/normalizers';
 import {
   sortEmoji,
   mergeEmojiFavourites,
-  filterEmoji,
   oneEmojiPerAccount,
   reduceEmoji,
   getReactForStatus,
@@ -22,29 +21,10 @@ const ALLOWED_EMOJI = ImmutableList([
   '😡',
 ]);
 
-describe('filterEmoji', () => {
-  describe('with a mix of allowed and disallowed emoji', () => {
-    const emojiReacts = fromJS([
-      { 'count': 1, 'me': true, 'name': '🌵' },
-      { 'count': 1, 'me': true, 'name': '😂' },
-      { 'count': 1, 'me': true, 'name': '👀' },
-      { 'count': 1, 'me': true, 'name': '🍩' },
-      { 'count': 1, 'me': true, 'name': '😡' },
-      { 'count': 1, 'me': true, 'name': '🔪' },
-      { 'count': 1, 'me': true, 'name': '😠' },
-    ]) as ImmutableList<ImmutableMap<string, any>>;
-    it('filters only allowed emoji', () => {
-      expect(filterEmoji(emojiReacts, ALLOWED_EMOJI)).toEqual(fromJS([
-        { 'count': 1, 'me': true, 'name': '😂' },
-        { 'count': 1, 'me': true, 'name': '😡' },
-      ]));
-    });
-  });
-});
-
 describe('sortEmoji', () => {
   describe('with an unsorted list of emoji', () => {
     const emojiReacts = fromJS([
+      { 'count': 7,  'me': true, 'name': '😃' },
       { 'count': 7,  'me': true, 'name': '😯' },
       { 'count': 3,  'me': true, 'name': '😢' },
       { 'count': 1,  'me': true, 'name': '😡' },
@@ -53,11 +33,12 @@ describe('sortEmoji', () => {
       { 'count': 15, 'me': true, 'name': '❤' },
     ]) as ImmutableList<ImmutableMap<string, any>>;
     it('sorts the emoji by count', () => {
-      expect(sortEmoji(emojiReacts)).toEqual(fromJS([
+      expect(sortEmoji(emojiReacts, ALLOWED_EMOJI)).toEqual(fromJS([
         { 'count': 20, 'me': true, 'name': '👍' },
         { 'count': 15, 'me': true, 'name': '❤' },
         { 'count': 7,  'me': true, 'name': '😯' },
         { 'count': 7,  'me': true, 'name': '😂' },
+        { 'count': 7,  'me': true, 'name': '😃' },
         { 'count': 3,  'me': true, 'name': '😢' },
         { 'count': 1,  'me': true, 'name': '😡' },
       ]));
@@ -127,6 +108,10 @@ describe('reduceEmoji', () => {
         { 'count': 7,  'me': false, 'name': '😂' },
         { 'count': 3,  'me': false, 'name': '😢' },
         { 'count': 1,  'me': false, 'name': '😡' },
+        { 'count': 1,  'me': true,  'name': '🔪' },
+        { 'count': 1,  'me': true,  'name': '🌵' },
+        { 'count': 1,  'me': false, 'name': '👀' },
+        { 'count': 1,  'me': false, 'name': '🍩' },
       ]));
     });
   });

app/soapbox/utils/emoji-reacts.ts

@@ -19,12 +19,10 @@ export const ALLOWED_EMOJI = ImmutableList([
 type Account = ImmutableMap<string, any>;
 type EmojiReact = ImmutableMap<string, any>;
 
-export const sortEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
+export const sortEmoji = (emojiReacts: ImmutableList<EmojiReact>, allowedEmoji: ImmutableList<string>): ImmutableList<EmojiReact> => (
-  emojiReacts.sortBy(emojiReact => -emojiReact.get('count'))
+  emojiReacts
-);
+    .sortBy(emojiReact =>
-
+      -(emojiReact.get('count') + Number(allowedEmoji.includes(emojiReact.get('name')))))
-export const mergeEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
-  emojiReacts // TODO: Merge similar emoji
 );
 
 export const mergeEmojiFavourites = (emojiReacts = ImmutableList<EmojiReact>(), favouritesCount: number, favourited: boolean) => {
@@ -70,15 +68,11 @@ export const oneEmojiPerAccount = (emojiReacts: ImmutableList<EmojiReact>, me: M
     .reverse();
 };
 
-export const filterEmoji = (emojiReacts: ImmutableList<EmojiReact>, allowedEmoji = ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
-  emojiReacts.filter(emojiReact => (
-    allowedEmoji.includes(emojiReact.get('name'))
-  )));
-
 export const reduceEmoji = (emojiReacts: ImmutableList<EmojiReact>, favouritesCount: number, favourited: boolean, allowedEmoji = ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
-  filterEmoji(sortEmoji(mergeEmoji(mergeEmojiFavourites(
+  sortEmoji(
-    emojiReacts, favouritesCount, favourited,
+    mergeEmojiFavourites(emojiReacts, favouritesCount, favourited),
-  ))), allowedEmoji));
+    allowedEmoji,
+  ));
 
 export const getReactForStatus = (status: any, allowedEmoji = ALLOWED_EMOJI): string | undefined => {
   const result = reduceEmoji(