pl-fe: simplify emoji sort code

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/status-action-bar.tsx

@@ -21,7 +21,7 @@ import StatusActionButton from 'pl-fe/components/status-action-button';
 import StatusReactionWrapper from 'pl-fe/components/status-reaction-wrapper';
 import { HStack } from 'pl-fe/components/ui';
 import { languages } from 'pl-fe/features/preferences';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount, useSettings, usePlFeConfig } from 'pl-fe/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount, useSettings } from 'pl-fe/hooks';
 import { useChats } from 'pl-fe/queries/chats';
 import toast from 'pl-fe/toast';
 import copy from 'pl-fe/utils/copy';
@@ -138,7 +138,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const features = useFeatures();
   const instance = useInstance();
   const { autoTranslate, boostModal, deleteModal, knownLanguages } = useSettings();
-  const plFeConfig = usePlFeConfig();
 
   const { translationLanguages } = useTranslationLanguages();
 
@@ -154,8 +153,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     return autoTranslate && features.translations && renderTranslate && supportsLanguages;
   }, [me, status, autoTranslate]);
 
-  const { allowedEmoji } = plFeConfig;
-
   const { account } = useOwnAccount();
   const isStaff = account ? account.is_admin || account.is_moderator : false;
   const isAdmin = account ? account.is_admin : false;
@@ -632,10 +629,9 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     status.emoji_reactions,
     favouriteCount,
     status.favourited,
-    allowedEmoji,
   ).reduce((acc, cur) => acc + (cur.count || 0), 0) : undefined;
 
-  const meEmojiReact = getReactForStatus(status, allowedEmoji);
+  const meEmojiReact = getReactForStatus(status);
   const meEmojiName = meEmojiReact?.name as keyof typeof reactMessages | undefined;
 
   const reactMessages = {

packages/pl-fe/src/components/status-reaction-wrapper.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { simpleEmojiReact } from 'pl-fe/actions/emoji-reacts';
 import { openModal } from 'pl-fe/actions/modals';
 import { EmojiSelector, Portal } from 'pl-fe/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, usePlFeConfig } from 'pl-fe/hooks';
+import { useAppDispatch, useAppSelector, useOwnAccount } from 'pl-fe/hooks';
 import { userTouching } from 'pl-fe/is-mobile';
 import { getReactForStatus } from 'pl-fe/utils/emoji-reacts';
 
@@ -17,7 +17,6 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
   const dispatch = useAppDispatch();
   const { account: ownAccount } = useOwnAccount();
   const status = useAppSelector(state => state.statuses.get(statusId));
-  const plFeConfig = usePlFeConfig();
 
   const timeout = useRef<NodeJS.Timeout>();
   const [visible, setVisible] = useState(false);
@@ -69,7 +68,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
   };
 
   const handleClick: React.EventHandler<React.MouseEvent> = e => {
-    const meEmojiReact = getReactForStatus(status, plFeConfig.allowedEmoji)?.name || '👍';
+    const meEmojiReact = getReactForStatus(status)?.name || '👍';
 
     if (userTouching.matches) {
       if (ownAccount) {

packages/pl-fe/src/features/status/components/status-interaction-bar.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'pl-fe/actions/modals';
 import AnimatedNumber from 'pl-fe/components/animated-number';
 import { HStack, Text, Emoji } from 'pl-fe/components/ui';
-import { useAppSelector, usePlFeConfig, useFeatures, useAppDispatch } from 'pl-fe/hooks';
+import { useAppSelector, useFeatures, useAppDispatch } from 'pl-fe/hooks';
 import { reduceEmoji } from 'pl-fe/utils/emoji-reacts';
 
 import type { Status } from 'pl-fe/normalizers';
@@ -16,7 +16,6 @@ interface IStatusInteractionBar {
 
 const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.Element | null => {
   const me = useAppSelector(({ me }) => me);
-  const { allowedEmoji } = usePlFeConfig();
   const dispatch = useAppDispatch();
   const features = useFeatures();
   const { account } = status;
@@ -47,7 +46,6 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     status.emoji_reactions,
     status.favourites_count,
     status.favourited,
-    allowedEmoji,
   );
 
   const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (e) => {

packages/pl-fe/src/utils/emoji-reacts.ts

@@ -14,11 +14,8 @@ const ALLOWED_EMOJI = ImmutableList([
   '😩',
 ]);
 
-const sortEmoji = (emojiReacts: Array<EmojiReaction>, allowedEmoji: ImmutableList<string>): Array<EmojiReaction> => (
-  emojiReacts
-    .toSorted(emojiReact =>
-      -((emojiReact.count || 0) + Number(allowedEmoji.includes(emojiReact.name))))
-);
+const sortEmoji = (emojiReacts: Array<EmojiReaction>): Array<EmojiReaction> =>
+  emojiReacts.toSorted(emojiReact => -(emojiReact.count || 0));
 
 const mergeEmojiFavourites = (emojiReacts: Array<EmojiReaction> | null, favouritesCount: number, favourited: boolean) => {
   if (!emojiReacts) return [emojiReactionSchema.parse({ count: favouritesCount, me: favourited, name: '👍' })];
@@ -37,16 +34,11 @@ const mergeEmojiFavourites = (emojiReacts: Array<EmojiReaction> | null, favourit
   }
 };
 
-const reduceEmoji = (emojiReacts: Array<EmojiReaction> | null, favouritesCount: number, favourited: boolean, allowedEmoji = ALLOWED_EMOJI): Array<EmojiReaction> => (
-  sortEmoji(
-    mergeEmojiFavourites(emojiReacts, favouritesCount, favourited),
-    allowedEmoji,
-  )
-);
+const reduceEmoji = (emojiReacts: Array<EmojiReaction> | null, favouritesCount: number, favourited: boolean): Array<EmojiReaction> => (
+  sortEmoji(mergeEmojiFavourites(emojiReacts, favouritesCount, favourited)));
 
 const getReactForStatus = (
   status: Pick<Status, 'emoji_reactions' | 'favourited' | 'favourites_count'>,
-  allowedEmoji = ALLOWED_EMOJI,
 ): EmojiReaction | undefined => {
   if (!status.emoji_reactions) return;
 
@@ -54,7 +46,6 @@ const getReactForStatus = (
     status.emoji_reactions,
     status.favourites_count || 0,
     status.favourited,
-    allowedEmoji,
   ).filter(e => e.me === true)[0];
 
   return typeof result?.name === 'string' ? result : undefined;