fix state not changing
This commit is contained in:
parent
7ef4b53fdb
commit
b49259f663
|
@ -1,6 +1,6 @@
|
||||||
import { GalleryContext } from 'pages/gallery';
|
import { GalleryContext } from 'pages/gallery';
|
||||||
import PreviewCard from './pages/gallery/PreviewCard';
|
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 { EnteFile } from 'types/file';
|
||||||
import { styled } from '@mui/material';
|
import { styled } from '@mui/material';
|
||||||
import DownloadManager from 'services/downloadManager';
|
import DownloadManager from 'services/downloadManager';
|
||||||
|
@ -30,6 +30,7 @@ import { logError } from 'utils/sentry';
|
||||||
import { CustomError } from 'utils/error';
|
import { CustomError } from 'utils/error';
|
||||||
import { User } from 'types/user';
|
import { User } from 'types/user';
|
||||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
const Container = styled('div')`
|
const Container = styled('div')`
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -106,67 +107,14 @@ const PhotoFrame = ({
|
||||||
const [rangeStart, setRangeStart] = useState(null);
|
const [rangeStart, setRangeStart] = useState(null);
|
||||||
const [currentHover, setCurrentHover] = useState(null);
|
const [currentHover, setCurrentHover] = useState(null);
|
||||||
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
||||||
const filteredDataRef = useRef<EnteFile[]>([]);
|
|
||||||
const filteredData = filteredDataRef?.current ?? [];
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isSourceLoaded, setIsSourceLoaded] = useState(false);
|
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 idSet = new Set();
|
||||||
const user: User = getData(LS_KEYS.USER);
|
const user: User = getData(LS_KEYS.USER);
|
||||||
filteredDataRef.current = files
|
|
||||||
|
return files
|
||||||
.map((item, index) => ({
|
.map((item, index) => ({
|
||||||
...item,
|
...item,
|
||||||
dataIndex: index,
|
dataIndex: index,
|
||||||
|
@ -249,6 +197,59 @@ const PhotoFrame = ({
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [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 getFileIndexFromID = (files: EnteFile[], id: number) => {
|
||||||
const index = files.findIndex((file) => file.id === id);
|
const index = files.findIndex((file) => file.id === id);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
|
|
|
@ -270,11 +270,10 @@ function PhotoSwipe(props: Iprops) {
|
||||||
const trashFile = async (file: EnteFile) => {
|
const trashFile = async (file: EnteFile) => {
|
||||||
const { deletedFileIds, setDeletedFileIds } = props;
|
const { deletedFileIds, setDeletedFileIds } = props;
|
||||||
deletedFileIds.add(file.id);
|
deletedFileIds.add(file.id);
|
||||||
setDeletedFileIds(deletedFileIds);
|
setDeletedFileIds(new Set(deletedFileIds));
|
||||||
await trashFiles([file]);
|
await trashFiles([file]);
|
||||||
setIsFav(true);
|
setIsFav(true);
|
||||||
needUpdate.current = true;
|
needUpdate.current = true;
|
||||||
photoSwipe.next();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const confirmTrashFile = (file: EnteFile) =>
|
const confirmTrashFile = (file: EnteFile) =>
|
||||||
|
@ -287,7 +286,7 @@ function PhotoSwipe(props: Iprops) {
|
||||||
photoSwipe.items.push(item);
|
photoSwipe.items.push(item);
|
||||||
});
|
});
|
||||||
photoSwipe.invalidateCurrItems();
|
photoSwipe.invalidateCurrItems();
|
||||||
if ((photoSwipe as any).isOpen()) {
|
if (isOpen) {
|
||||||
photoSwipe.updateSize(true);
|
photoSwipe.updateSize(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -498,7 +498,7 @@ export default function Gallery() {
|
||||||
selectedFiles.forEach((file) =>
|
selectedFiles.forEach((file) =>
|
||||||
deletedFileIds.add(file.id)
|
deletedFileIds.add(file.id)
|
||||||
);
|
);
|
||||||
return deletedFileIds;
|
return new Set(deletedFileIds);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
await trashFiles(selectedFiles);
|
await trashFiles(selectedFiles);
|
||||||
|
|
Loading…
Reference in a new issue