Custom Emoji: Fix possible error on set load (#2218)

src/global/actions/api/symbols.ts

@@ -14,6 +14,7 @@ import {
   updateStickersForEmoji,
   rebuildStickersForEmoji,
   updateCustomEmojiForEmoji,
+  updateCustomEmojiSets,
 } from '../../reducers';
 import searchWords from '../../../util/searchWords';
 import { selectIsCurrentUserPremium, selectStickerSet } from '../../selectors';
@@ -27,9 +28,32 @@ const ADDED_SETS_THROTTLE_CHUNK = 10;
 
 const searchThrottled = throttle((cb) => cb(), 500, false);
 
-addActionHandler('loadStickerSets', (global, actions) => {
+addActionHandler('loadStickerSets', async (global, actions) => {
-  void loadStickerSets(global.stickers.added.hash);
+  const [addedStickers, addedCustomEmojis] = await Promise.all([
-  void loadCustomEmojiSets(global.customEmojis.added.hash);
+    callApi('fetchStickerSets', { hash: global.stickers.added.hash }),
+    callApi('fetchCustomEmojiSets', { hash: global.customEmojis.added.hash }),
+  ]);
+  if (!addedCustomEmojis || !addedStickers) {
+    return;
+  }
+
+  global = getGlobal();
+
+  global = updateStickerSets(
+    global,
+    'added',
+    addedStickers.hash,
+    addedStickers.sets,
+  );
+
+  global = updateCustomEmojiSets(
+    global,
+    addedCustomEmojis.hash,
+    addedCustomEmojis.sets,
+  );
+
+  setGlobal(global);
+
   actions.loadCustomEmojis({
     ids: global.recentCustomEmojis,
   });
@@ -347,34 +371,6 @@ addActionHandler('loadEmojiKeywords', async (global, actions, payload: { languag
   });
 });
 
-async function loadCustomEmojiSets(hash?: string) {
-  const addedCustomEmojis = await callApi('fetchCustomEmojiSets', { hash });
-  if (!addedCustomEmojis) {
-    return;
-  }
-
-  setGlobal(updateStickerSets(
-    getGlobal(),
-    'added',
-    addedCustomEmojis.hash,
-    addedCustomEmojis.sets,
-  ));
-}
-
-async function loadStickerSets(hash?: string) {
-  const addedStickers = await callApi('fetchStickerSets', { hash });
-  if (!addedStickers) {
-    return;
-  }
-
-  setGlobal(updateStickerSets(
-    getGlobal(),
-    'added',
-    addedStickers.hash,
-    addedStickers.sets,
-  ));
-}
-
 async function loadRecentStickers(hash?: string) {
   const recentStickers = await callApi('fetchRecentStickers', { hash });
   if (!recentStickers) {

src/global/reducers/symbols.ts

@@ -22,12 +22,7 @@ export function updateStickerSets(
     };
   });
 
-  const regularSetIds = sets.filter((set) => !set.isEmoji).map((set) => set.id);
+  const regularSetIds = sets.map((set) => set.id);
-  const addedEmojiSetIds = category === 'added' ? sets.filter((set) => set.isEmoji).map((set) => set.id) : [];
-  const customEmojis = sets.filter((set) => set.isEmoji)
-    .map((set) => set.stickers)
-    .flat()
-    .filter(Boolean);
 
   return {
     ...global,
@@ -52,6 +47,38 @@ export function updateStickerSets(
         ),
       },
     },
+  };
+}
+
+export function updateCustomEmojiSets(
+  global: GlobalState,
+  hash: string,
+  sets: ApiStickerSet[],
+): GlobalState {
+  const updatedSets = sets.map((stickerSet) => {
+    const existing = global.stickers.setsById[stickerSet.id];
+    if (!existing) {
+      return stickerSet;
+    }
+
+    return {
+      ...existing,
+      ...stickerSet,
+    };
+  });
+
+  const customEmojis = sets.map((set) => set.stickers).flat().filter(Boolean);
+  const addedSetIds = sets.map((set) => set.id);
+
+  return {
+    ...global,
+    stickers: {
+      ...global.stickers,
+      setsById: {
+        ...global.stickers.setsById,
+        ...buildCollectionByKey(updatedSets, 'id'),
+      },
+    },
     customEmojis: {
       ...global.customEmojis,
       added: {
@@ -59,7 +86,7 @@ export function updateStickerSets(
         hash,
         setIds: [
           ...(global.customEmojis.added.setIds || []),
-          ...addedEmojiSetIds,
+          ...addedSetIds,
         ],
       },
       byId: {