From b8d9c4bdd6e62b0ff3688bd38497ac1371831088 Mon Sep 17 00:00:00 2001
From: Marek Vospel <73162071+marekvospel@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:41:02 +0100
Subject: [PATCH] Emoji ordering in emoji board (#2057)

* feat: sort emojis inside emoji picker

* feat: sort autocomplete emojis

Fixes #1632

* fix: sort function after concat

* fix: sort result instead of searchList
---
 .../editor/autocomplete/EmoticonAutocomplete.tsx     | 12 +++++++-----
 src/app/components/emoji-board/EmojiBoard.tsx        |  6 +++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
index 9722c795..c3787691 100644
--- a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
@@ -57,14 +57,16 @@ export function EmoticonAutocomplete({
 
   const searchList = useMemo(() => {
     const list: Array<EmoticonSearchItem> = [];
-    return list.concat(
-      imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
-      emojis
-    );
+    return list
+      .concat(
+        imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
+        emojis
+      )
   }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
-  const autoCompleteEmoticon = result ? result.items : recentEmoji;
+  const autoCompleteEmoticon = (result ? result.items : recentEmoji)
+      .sort((a, b) => a.shortcode.localeCompare(b.shortcode));
 
   useEffect(() => {
     if (query.text) search(query.text);
diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx
index 5a69df18..f81b75ec 100644
--- a/src/app/components/emoji-board/EmojiBoard.tsx
+++ b/src/app/components/emoji-board/EmojiBoard.tsx
@@ -468,7 +468,7 @@ export function SearchEmojiGroup({
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
-        ? searchResult.map((emoji) =>
+        ? searchResult.sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((emoji) =>
           'unicode' in emoji ? (
             <EmojiItem
               key={emoji.unicode}
@@ -523,7 +523,7 @@ export const CustomEmojiGroups = memo(
     <>
       {groups.map((pack) => (
         <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
-          {pack.getEmojis().map((image) => (
+          {pack.getEmojis().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
             <EmojiItem
               key={image.shortcode}
               label={image.body || image.shortcode}
@@ -566,7 +566,7 @@ export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: Matr
     )}
     {groups.map((pack) => (
       <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
-        {pack.getStickers().map((image) => (
+        {pack.getStickers().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
           <StickerItem
             key={image.shortcode}
             label={image.body || image.shortcode}