fix state not changing

src/components/PhotoFrame.tsx

@@ -1,6 +1,6 @@
 import { GalleryContext } from 'pages/gallery';
 import PreviewCard from './pages/gallery/PreviewCard';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { EnteFile } from 'types/file';
 import { styled } from '@mui/material';
 import DownloadManager from 'services/downloadManager';
@@ -30,6 +30,7 @@ import { logError } from 'utils/sentry';
 import { CustomError } from 'utils/error';
 import { User } from 'types/user';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { useMemo } from 'react';
 
 const Container = styled('div')`
     display: block;
@@ -106,67 +107,14 @@ const PhotoFrame = ({
     const [rangeStart, setRangeStart] = useState(null);
     const [currentHover, setCurrentHover] = useState(null);
     const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
-    const filteredDataRef = useRef<EnteFile[]>([]);
-    const filteredData = filteredDataRef?.current ?? [];
     const router = useRouter();
     const [isSourceLoaded, setIsSourceLoaded] = useState(false);
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Shift') {
-                setIsShiftKeyPressed(true);
-            }
-        };
-        const handleKeyUp = (e: KeyboardEvent) => {
-            if (e.key === 'Shift') {
-                setIsShiftKeyPressed(false);
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown, false);
-        document.addEventListener('keyup', handleKeyUp, false);
-        router.events.on('hashChangeComplete', (url: string) => {
-            const start = url.indexOf('#');
-            const hash = url.slice(start !== -1 ? start : url.length);
-            const shouldPhotoSwipeBeOpened = hash.endsWith(
-                PHOTOSWIPE_HASH_SUFFIX
-            );
-            if (shouldPhotoSwipeBeOpened) {
-                setOpen(true);
-            } else {
-                setOpen(false);
-            }
-        });
-        return () => {
-            document.addEventListener('keydown', handleKeyDown, false);
-            document.addEventListener('keyup', handleKeyUp, false);
-        };
-    }, []);
 
-    useEffect(() => {
+    const filteredData = useMemo(() => {
-        if (!isNaN(search?.file)) {
-            const filteredDataIdx = filteredData.findIndex((file) => {
-                return file.id === search.file;
-            });
-            if (!isNaN(filteredDataIdx)) {
-                onThumbnailClick(filteredDataIdx)();
-            }
-            resetSearch();
-        }
-    }, [search, filteredData]);
-
-    const resetFetching = () => {
-        setFetching({});
-    };
-
-    useEffect(() => {
-        if (selected.count === 0) {
-            setRangeStart(null);
-        }
-    }, [selected]);
-
-    useEffect(() => {
         const idSet = new Set();
         const user: User = getData(LS_KEYS.USER);
-        filteredDataRef.current = files
+
+        return files
             .map((item, index) => ({
                 ...item,
                 dataIndex: index,
@@ -249,6 +197,59 @@ const PhotoFrame = ({
         }
     }, [open]);
 
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Shift') {
+                setIsShiftKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (e: KeyboardEvent) => {
+            if (e.key === 'Shift') {
+                setIsShiftKeyPressed(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, false);
+        document.addEventListener('keyup', handleKeyUp, false);
+        router.events.on('hashChangeComplete', (url: string) => {
+            const start = url.indexOf('#');
+            const hash = url.slice(start !== -1 ? start : url.length);
+            const shouldPhotoSwipeBeOpened = hash.endsWith(
+                PHOTOSWIPE_HASH_SUFFIX
+            );
+            if (shouldPhotoSwipeBeOpened) {
+                setOpen(true);
+            } else {
+                setOpen(false);
+            }
+        });
+        return () => {
+            document.addEventListener('keydown', handleKeyDown, false);
+            document.addEventListener('keyup', handleKeyUp, false);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!isNaN(search?.file)) {
+            const filteredDataIdx = filteredData.findIndex((file) => {
+                return file.id === search.file;
+            });
+            if (!isNaN(filteredDataIdx)) {
+                onThumbnailClick(filteredDataIdx)();
+            }
+            resetSearch();
+        }
+    }, [search, filteredData]);
+
+    const resetFetching = () => {
+        setFetching({});
+    };
+
+    useEffect(() => {
+        if (selected.count === 0) {
+            setRangeStart(null);
+        }
+    }, [selected]);
+
     const getFileIndexFromID = (files: EnteFile[], id: number) => {
         const index = files.findIndex((file) => file.id === id);
         if (index === -1) {

src/components/PhotoSwipe/index.tsx

@@ -270,11 +270,10 @@ function PhotoSwipe(props: Iprops) {
     const trashFile = async (file: EnteFile) => {
         const { deletedFileIds, setDeletedFileIds } = props;
         deletedFileIds.add(file.id);
-        setDeletedFileIds(deletedFileIds);
+        setDeletedFileIds(new Set(deletedFileIds));
         await trashFiles([file]);
         setIsFav(true);
         needUpdate.current = true;
-        photoSwipe.next();
     };
 
     const confirmTrashFile = (file: EnteFile) =>
@@ -287,7 +286,7 @@ function PhotoSwipe(props: Iprops) {
                 photoSwipe.items.push(item);
             });
             photoSwipe.invalidateCurrItems();
-            if ((photoSwipe as any).isOpen()) {
+            if (isOpen) {
                 photoSwipe.updateSize(true);
             }
         }

src/pages/gallery/index.tsx

@@ -498,7 +498,7 @@ export default function Gallery() {
                     selectedFiles.forEach((file) =>
                         deletedFileIds.add(file.id)
                     );
-                    return deletedFileIds;
+                    return new Set(deletedFileIds);
                 });
             } else {
                 await trashFiles(selectedFiles);