Skip to content

Commit

Permalink
Merge branch 'order-of-attachments' into stable
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmz committed Nov 8, 2024
2 parents 70aacd5 + cb17350 commit 35b218d
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 4 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 28 additions & 4 deletions src/components/uploader/uploader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
} = {}) {
Expand All @@ -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);
Expand All @@ -49,6 +52,7 @@ export function useUploader({
}
return subscribeToDrafts(() => {
const fileIds = getDraft(draftKey)?.fileIds ?? initialFileIds;
setInitialFileIds(fileIds);
setFileIds(fileIds);
});
}, [draftKey, initialFileIds]);
Expand Down Expand Up @@ -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 }),
Expand Down

0 comments on commit 35b218d

Please sign in to comment.