wip checkpoint

web/apps/photos/src/pages/gallery.tsx

@@ -843,10 +843,20 @@ export default function Gallery() {
                 collections,
                 hiddenCollections,
             });
-            await syncFiles("normal", collections, (files) =>
-                dispatch({ type: "fetchFiles", files }),
+            await syncFiles(
+                "normal",
+                collections,
+                (files) => dispatch({ type: "resetFiles", files }),
+                (files) => dispatch({ type: "fetchFiles", files }),
+            );
+            await syncFiles(
+                "hidden",
+                hiddenCollections,
+                (hiddenFiles) =>
+                    dispatch({ type: "resetHiddenFiles", hiddenFiles }),
+                (hiddenFiles) =>
+                    dispatch({ type: "fetchHiddenFiles", hiddenFiles }),
             );
-            await syncFiles("hidden", hiddenCollections, setHiddenFiles);
             await syncTrash(allCollections, setTrashedFiles);
             // syncWithRemote is called with the force flag set to true before
             // doing an upload. So it is possible, say when resuming a pending

web/apps/photos/src/services/fileService.ts

@@ -8,7 +8,6 @@ import {
     EnteFile,
     FileWithUpdatedMagicMetadata,
     FileWithUpdatedPublicMagicMetadata,
-    mergeMetadata,
     TrashRequest,
 } from "@/media/file";
 import { getLatestVersionFiles } from "@/new/photos/services/file";
@@ -16,7 +15,6 @@ import {
     clearCachedThumbnailsIfChanged,
     getLocalFiles,
     setLocalFiles,
-    sortFiles,
 } from "@/new/photos/services/files";
 import { batch } from "@/utils/array";
 import HTTPService from "@ente/shared/network/HTTPService";
@@ -33,6 +31,11 @@ import {
  * Fetch all files of the given {@link type}, belonging to the given
  * {@link collections}, from remote and update our local database.
  *
+ * If this is the initial read, or if the count of files we have differs from
+ * the state of the local database (these two are expected to be the same case),
+ * then the {@link onResetFiles} callback is invoked to give the caller a chance
+ * to bring its state up to speed.
+ *
  * In addition to updating the local database, it also calls the provided
  * {@link onFetchFiles} callback with the latest decrypted files after each
  * batch the new and/or updated files are received from remote.
@@ -40,6 +43,7 @@ import {
 export const syncFiles = async (
     type: "normal" | "hidden",
     collections: Collection[],
+    onResetFiles: (fs: EnteFile[]) => void,
     onFetchFiles: (fs: EnteFile[]) => void,
 ) => {
     const localFiles = await getLocalFiles(type);
@@ -47,7 +51,7 @@ export const syncFiles = async (
     let didUpdateFiles = false;
     if (files.length !== localFiles.length) {
         await setLocalFiles(type, files);
-        setFiles(sortFiles(mergeMetadata(files)));
+        onResetFiles(files);
         didUpdateFiles = true;
     }
     for (const collection of collections) {

web/packages/new/photos/components/gallery/reducer.ts

@@ -126,10 +126,11 @@ export type GalleryAction =
           collections: Collection[];
           hiddenCollections: Collection[];
       }
+    | { type: "resetFiles"; files: EnteFile[] }
     | { type: "fetchFiles"; files: EnteFile[] }
     | { type: "uploadFile"; file: EnteFile }
-    | { type: "setFiles"; files: EnteFile[] }
-    | { type: "setHiddenFiles"; hiddenFiles: EnteFile[] }
+    | { type: "resetHiddenFiles"; hiddenFiles: EnteFile[] }
+    | { type: "fetchHiddenFiles"; hiddenFiles: EnteFile[] }
     | { type: "setTrashedFiles"; trashedFiles: EnteFile[] }
     | { type: "setFavorites"; favFileIDs: Set<number> };
 
@@ -194,6 +195,8 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                 collections: action.collections,
                 hiddenCollections: action.hiddenCollections,
             };
+        case "resetFiles":
+            return { ...state, files: sortFiles(mergeMetadata(action.files)) };
         case "fetchFiles":
             return {
                 ...state,
@@ -211,10 +214,23 @@ const galleryReducer: React.Reducer<GalleryState, GalleryAction> = (
                 ...state,
                 files: sortFiles([...state.files, action.file]),
             };
-        case "setFiles":
-            return { ...state, files: action.files };
-        case "setHiddenFiles":
-            return { ...state, hiddenFiles: action.hiddenFiles };
+        case "resetHiddenFiles":
+            return {
+                ...state,
+                hiddenFiles: sortFiles(mergeMetadata(action.hiddenFiles)),
+            };
+        case "fetchHiddenFiles":
+            return {
+                ...state,
+                hiddenFiles: sortFiles(
+                    mergeMetadata(
+                        getLatestVersionFiles([
+                            ...state.hiddenFiles,
+                            ...action.hiddenFiles,
+                        ]),
+                    ),
+                ),
+            };
         case "setTrashedFiles":
             return { ...state, trashedFiles: action.trashedFiles };
         case "setFavorites":