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

diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
index 9722c79549fb45105c5e027b3c789675054e084d..c3787691783b8fa5b96f1ee0102a1a4581792aea 100644 (file)
--- 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 5a69df18f685847269a51814070f86251664d347..f81b75ec9b5c0e8673eb964955ebfe744f18a556 100644 (file)
--- 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}