Sticker Sets: Reorder sets after sending (#2223)

src/api/gramjs/methods/messages.ts

@@ -217,6 +217,7 @@ export function sendMessage(
     noWebPage,
     sendAs,
     serverTimeOffset,
+    shouldUpdateStickerSetsOrder,
   }: {
     chat: ApiChat;
     text?: string;
@@ -234,6 +235,7 @@ export function sendMessage(
     noWebPage?: boolean;
     sendAs?: ApiUser | ApiChat;
     serverTimeOffset?: number;
+    shouldUpdateStickerSetsOrder?: boolean;
   },
   onProgress?: ApiOnProgress,
 ) {
@@ -329,6 +331,7 @@ export function sendMessage(
       ...(media && { media }),
       ...(noWebPage && { noWebpage: noWebPage }),
       ...(sendAs && { sendAs: buildInputPeer(sendAs.id, sendAs.accessHash) }),
+      ...(shouldUpdateStickerSetsOrder && { updateStickersetsOrder: shouldUpdateStickerSetsOrder }),
     }), true);
   })();
 

src/api/gramjs/updater.ts

@@ -915,14 +915,24 @@ export function updater(update: Update, originRequest?: GramJs.AnyRequest) {
     onUpdate({ '@type': 'updateFavoriteStickers' });
   } else if (update instanceof GramJs.UpdateRecentStickers) {
     onUpdate({ '@type': 'updateRecentStickers' });
+  } else if (update instanceof GramJs.UpdateMoveStickerSetToTop) {
+    if (!update.masks) {
+      onUpdate({
+        '@type': 'updateMoveStickerSetToTop',
+        isCustomEmoji: update.emojis,
+        id: update.stickerset.toString(),
+      });
+    }
   } else if (update instanceof GramJs.UpdateStickerSets) {
     onUpdate({ '@type': 'updateStickerSets' });
   } else if (update instanceof GramJs.UpdateStickerSetsOrder) {
-    onUpdate({
+    if (!update.masks) {
-      '@type': 'updateStickerSetsOrder',
+      onUpdate({
-      order: update.order.map((n) => n.toString()),
+        '@type': 'updateStickerSetsOrder',
-      isCustomEmoji: update.emojis,
+        order: update.order.map((n) => n.toString()),
-    });
+        isCustomEmoji: update.emojis,
+      });
+    }
   } else if (update instanceof GramJs.UpdateNewStickerSet) {
     if (update.stickerset instanceof GramJs.messages.StickerSet) {
       const stickerSet = buildStickerSet(update.stickerset.set);

src/api/types/updates.ts

@@ -391,6 +391,12 @@ export type ApiUpdateRecentStickers = {
   '@type': 'updateRecentStickers';
 };
 
+export type ApiUpdateMoveStickerSetToTop = {
+  '@type': 'updateMoveStickerSetToTop';
+  isCustomEmoji?: boolean;
+  id: string;
+};
+
 export type ApiUpdateStickerSets = {
   '@type': 'updateStickerSets';
 };
@@ -570,7 +576,7 @@ export type ApiUpdate = (
   ApiUpdateAvatar | ApiUpdateMessageImage | ApiUpdateDraftMessage |
   ApiUpdateError | ApiUpdateResetContacts | ApiUpdateStartEmojiInteraction |
   ApiUpdateFavoriteStickers | ApiUpdateStickerSet | ApiUpdateStickerSets | ApiUpdateStickerSetsOrder |
-  ApiUpdateRecentStickers | ApiUpdateSavedGifs | ApiUpdateNewScheduledMessage |
+  ApiUpdateRecentStickers | ApiUpdateSavedGifs | ApiUpdateNewScheduledMessage | ApiUpdateMoveStickerSetToTop |
   ApiUpdateScheduledMessageSendSucceeded | ApiUpdateScheduledMessage |
   ApiUpdateDeleteScheduledMessages | ApiUpdateResetMessages |
   ApiUpdateTwoFaError | ApiUpdateTwoFaStateWaitCode | ApiUpdateWebViewResultSent |

src/components/common/StickerSetModal.tsx

@@ -79,8 +79,9 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
   const prevStickerSet = usePrevious(stickerSet);
   const renderingStickerSet = stickerSet || prevStickerSet;
 
+  const isAdded = renderingStickerSet?.installedDate;
   const isEmoji = renderingStickerSet?.isEmoji;
-  const isButtonLocked = !renderingStickerSet?.installedDate && isSetPremium && !isCurrentUserPremium;
+  const isButtonLocked = !isAdded && isSetPremium && !isCurrentUserPremium;
 
   const [requestCalendar, calendar] = useSchedule(canScheduleUntilOnline);
 
@@ -104,14 +105,16 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
 
     if (shouldSchedule || isScheduleRequested) {
       requestCalendar((scheduledAt) => {
-        sendMessage({ sticker, isSilent, scheduledAt });
+        sendMessage({
+          sticker, isSilent, scheduledAt,
+        });
         onClose();
       });
     } else {
-      sendMessage({ sticker, isSilent });
+      sendMessage({ sticker, isSilent, shouldUpdateStickerSetsOrder: isAdded });
       onClose();
     }
-  }, [onClose, requestCalendar, sendMessage, shouldSchedule]);
+  }, [onClose, requestCalendar, sendMessage, shouldSchedule, isAdded]);
 
   const handleButtonClick = useCallback(() => {
     if (renderingStickerSet) {
@@ -133,7 +136,7 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
     const suffix = isEmoji ? 'Emoji' : 'Sticker';
 
     return lang(
-      renderingStickerSet.installedDate ? `StickerPack.Remove${suffix}Count` : `StickerPack.Add${suffix}Count`,
+      isAdded ? `StickerPack.Remove${suffix}Count` : `StickerPack.Add${suffix}Count`,
       renderingStickerSet.count,
       'i',
     );
@@ -171,7 +174,7 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
             <Button
               size="smaller"
               fluid
-              color={renderingStickerSet.installedDate ? 'danger' : 'primary'}
+              color={isAdded ? 'danger' : 'primary'}
               isShiny={isButtonLocked}
               withPremiumGradient={isButtonLocked}
               onClick={handleButtonClick}

src/components/middle/composer/Composer.tsx

@@ -712,6 +712,7 @@ const Composer: FC<OwnProps & StateProps> = ({
         attachments: currentAttachments,
         scheduledAt,
         isSilent,
+        shouldUpdateStickerSetsOrder: true,
       });
     }
 
@@ -820,7 +821,11 @@ const Composer: FC<OwnProps & StateProps> = ({
   }, [insertCustomEmojiAndUpdateCursor, isChatWithSelf, isCurrentUserPremium, showCustomEmojiPremiumNotification]);
 
   const handleStickerSelect = useCallback((
-    sticker: ApiSticker, isSilent?: boolean, isScheduleRequested?: boolean, shouldPreserveInput = false,
+    sticker: ApiSticker,
+    isSilent?: boolean,
+    isScheduleRequested?: boolean,
+    shouldPreserveInput = false,
+    shouldUpdateStickerSetsOrder?: boolean,
   ) => {
     sticker = {
       ...sticker,
@@ -837,7 +842,7 @@ const Composer: FC<OwnProps & StateProps> = ({
         });
       });
     } else {
-      sendMessage({ sticker, isSilent });
+      sendMessage({ sticker, isSilent, shouldUpdateStickerSetsOrder });
       requestAnimationFrame(() => {
         resetComposer(shouldPreserveInput);
       });

src/components/middle/composer/StickerPicker.tsx

@@ -45,7 +45,9 @@ type OwnProps = {
   className: string;
   loadAndPlay: boolean;
   canSendStickers: boolean;
-  onStickerSelect: (sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean) => void;
+  onStickerSelect: (
+    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, shouldUpdateStickerSetsOrder?: boolean,
+  ) => void;
 };
 
 type StateProps = {
@@ -233,7 +235,7 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
   }, []);
 
   const handleStickerSelect = useCallback((sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean) => {
-    onStickerSelect(sticker, isSilent, shouldSchedule);
+    onStickerSelect(sticker, isSilent, shouldSchedule, true);
     addRecentSticker({ sticker });
   }, [addRecentSticker, onStickerSelect]);
 

src/components/middle/composer/SymbolMenu.tsx

@@ -41,7 +41,11 @@ export type OwnProps = {
   onEmojiSelect: (emoji: string) => void;
   onCustomEmojiSelect: (emoji: ApiSticker) => void;
   onStickerSelect: (
-    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, shouldPreserveInput?: boolean
+    sticker: ApiSticker,
+    isSilent?: boolean,
+    shouldSchedule?: boolean,
+    shouldPreserveInput?: boolean,
+    shouldUpdateStickerSetsOrder?: boolean
   ) => void;
   onGifSelect: (gif: ApiVideo, isSilent?: boolean, shouldSchedule?: boolean) => void;
   onRemoveSymbol: () => void;
@@ -171,8 +175,10 @@ const SymbolMenu: FC<OwnProps & StateProps> = ({
     onSearchOpen(type);
   }, [onClose, onSearchOpen]);
 
-  const handleStickerSelect = useCallback((sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean) => {
+  const handleStickerSelect = useCallback((
-    onStickerSelect(sticker, isSilent, shouldSchedule, true);
+    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, shouldUpdateStickerSetsOrder?: boolean,
+  ) => {
+    onStickerSelect(sticker, isSilent, shouldSchedule, true, shouldUpdateStickerSetsOrder);
   }, [onStickerSelect]);
 
   const lang = useLang();

src/global/actions/apiUpdaters/misc.ts

@@ -36,6 +36,14 @@ addActionHandler('apiUpdate', (global, actions, update) => {
       actions.loadRecentStickers();
       break;
 
+    case 'updateMoveStickerSetToTop': {
+      const oldOrder = update.isCustomEmoji ? global.customEmojis.added.setIds : global.stickers.added.setIds;
+      if (!oldOrder) return global;
+      const newOrder = [update.id, ...oldOrder.filter((id) => id !== update.id)];
+      actions.reorderStickerSets({ order: newOrder, isCustomEmoji: update.isCustomEmoji });
+      break;
+    }
+
     case 'updateStickerSets':
       actions.loadStickerSets();
       break;

src/global/actions/ui/misc.ts

@@ -227,8 +227,14 @@ addActionHandler('reorderStickerSets', (global, action, payload) => {
     ...global,
     stickers: {
       ...global.stickers,
-      [isCustomEmoji ? 'customEmoji' : 'added']: {
+      added: {
-        setIds: order,
+        setIds: (!isCustomEmoji ? order : global.stickers.added.setIds),
+      },
+    },
+    customEmojis: {
+      ...global.customEmojis,
+      added: {
+        setIds: (isCustomEmoji ? order : global.customEmojis.added.setIds),
       },
     },
   };