Update the UI when deleting a subset of the duplicates

The list of photos shown on the dedup screen did not update if we selected a
subset of the duplicates and deleted them. This is because while we're issuing a
remote API request, we don't seem to be updating our local storage with the
results of that when we're on this screen. So when the gallery on this screen
re-renders, it still reads the same files again, even after they've been
deleted.

Not happy with the current solution, but it does solve the customers issue. Have
added an "Enhancement" tag to flag this.

Test:

I was able to reproduce the issue. After making these changes, I don't see it
anymore. Haven't done exhaustive checks, but it fixes the happy path at least.

Tested locally.

apps/photos/src/pages/deduplicate/index.tsx

@@ -5,7 +5,7 @@ import { ALL_SECTION } from 'constants/collection';
 import { AppContext } from 'pages/_app';
 import { createContext, useContext, useEffect, useState } from 'react';
 import { getDuplicates, Duplicate } from 'services/deduplicationService';
-import { getLocalFiles, trashFiles } from 'services/fileService';
+import { getLocalFiles, syncFiles, trashFiles } from 'services/fileService';
 import { SelectedState } from 'types/gallery';
 
 import { ApiError } from '@ente/shared/error';
@@ -20,13 +20,17 @@ import { PHOTOS_PAGES as PAGES } from '@ente/shared/constants/pages';
 import router from 'next/router';
 import { getKey, SESSION_KEYS } from '@ente/shared/storage/sessionStorage';
 import { styled } from '@mui/material';
-import { getLocalCollections } from 'services/collectionService';
+import {
+    getAllLatestCollections,
+    getLocalCollections,
+} from 'services/collectionService';
 import EnteSpinner from '@ente/shared/components/EnteSpinner';
 import { VerticallyCentered } from '@ente/shared/components/Container';
 import Typography from '@mui/material/Typography';
 import useMemoSingleThreaded from '@ente/shared/hooks/useMemoSingleThreaded';
 import InMemoryStore, { MS_KEYS } from '@ente/shared/storage/InMemoryStore';
 import { HttpStatusCode } from 'axios';
+import { syncTrash } from 'services/trashService';
 
 export const DeduplicateContext = createContext<DeduplicateContextType>(
     DefaultDeduplicateContext
@@ -118,6 +122,17 @@ export default function Deduplicate() {
             startLoading();
             const selectedFiles = getSelectedFiles(selected, duplicateFiles);
             await trashFiles(selectedFiles);
+
+            // trashFiles above does an API request, we still need to update our
+            // local state.
+            //
+            // Enhancement: This can be done in a more granular manner. Also, it
+            // is better to funnel these syncs instead of adding these here and
+            // there in an ad-hoc manner. For now, this fixes the issue with the
+            // UI not updating if the user deletes only some of the duplicates.
+            const collections = await getAllLatestCollections();
+            await syncFiles('normal', collections, () => {});
+            await syncTrash(collections, () => {});
         } catch (e) {
             if (
                 e instanceof ApiError &&