From cb17350b8affb9e93293f4da31ddc16ba1f23a3b Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Fri, 25 Oct 2024 23:32:53 +0300
Subject: [PATCH] Returns the fileIds in the order in which the files were
 added

---
 CHANGELOG.md                        |  3 +++
 src/components/uploader/uploader.js | 32 +++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2be8885a..b7658aab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.136.0] - Not released
+### Fixed
+- The post attachments now appear in the same order as they were added by user.
+  Previously, attachments were sorted by the upload order.
 
 ## [1.135.3] - 2024-10-22
 ### Fixed
diff --git a/src/components/uploader/uploader.js b/src/components/uploader/uploader.js
index 9dd2424b..bf2807a2 100644
--- a/src/components/uploader/uploader.js
+++ b/src/components/uploader/uploader.js
@@ -12,7 +12,7 @@ let nextId = 1;
 export function useUploader({
   // Upload success (takes attachment object and upload ID)
   onSuccess = null,
-  fileIds: initialFileIds = [],
+  fileIds: givenFileIds = [],
   maxCount = Infinity,
   draftKey,
 } = {}) {
@@ -27,7 +27,10 @@ export function useUploader({
   const [, forceUpdate] = useBool();
 
   // Attachments management
-  const [fileIds, setFileIds] = useState(() => getDraft(draftKey)?.fileIds ?? initialFileIds);
+  const [initialFileIds, setInitialFileIds] = useState(
+    () => getDraft(draftKey)?.fileIds ?? givenFileIds,
+  );
+  const [fileIds, setFileIds] = useState(() => initialFileIds);
   const updatedLocally = useRef(false);
   const setFileIdsLocally = useCallback((arg) => {
     setFileIds(arg);
@@ -49,6 +52,7 @@ export function useUploader({
     }
     return subscribeToDrafts(() => {
       const fileIds = getDraft(draftKey)?.fileIds ?? initialFileIds;
+      setInitialFileIds(fileIds);
       setFileIds(fileIds);
     });
   }, [draftKey, initialFileIds]);
@@ -114,15 +118,35 @@ export function useUploader({
   });
 
   useEffect(() => {
+    // All successful uploads in the right order
+    const allFileIds = [
+      ...initialFileIds,
+      ...[...uploadIds]
+        .filter((id) => statuses[id]?.success)
+        .map((id) => allUploads[id].attachment.id),
+    ];
+
     // Detect successful uploads
     for (const id of uploadIds) {
       if (statuses[id]?.success && unfinishedFiles.has(id)) {
         unfinishedFiles.delete(id);
-        setFileIdsLocally((ids) => [...ids, allUploads[id].attachment.id]);
+        setFileIdsLocally((ids) => {
+          const newFileIds = new Set([...ids, allUploads[id].attachment.id]);
+          // Return updated ids in same order as allFileIds
+          return allFileIds.filter((id) => newFileIds.has(id));
+        });
         onSuccess?.(allUploads[id].attachment, id);
       }
     }
-  }, [allUploads, onSuccess, setFileIdsLocally, statuses, unfinishedFiles, uploadIds]);
+  }, [
+    allUploads,
+    initialFileIds,
+    onSuccess,
+    setFileIdsLocally,
+    statuses,
+    unfinishedFiles,
+    uploadIds,
+  ]);
 
   const uploadProgressProps = useMemo(
     () => ({ uploadIds, statuses, unfinishedFiles }),