From a4db51a67b4e4531d9cb7b4e3a625d7fffcf61a8 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Tue, 16 Sep 2025 15:05:39 +0100 Subject: [PATCH] Use stubs instead of files --- .../tools/rotate/RotateSettings.tsx | 35 ++++--------------- frontend/src/contexts/file/fileHooks.ts | 8 ++--- frontend/src/tools/Merge.tsx | 12 +++---- 3 files changed, 17 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/tools/rotate/RotateSettings.tsx b/frontend/src/components/tools/rotate/RotateSettings.tsx index fca6c5a7f..0ac39700e 100644 --- a/frontend/src/components/tools/rotate/RotateSettings.tsx +++ b/frontend/src/components/tools/rotate/RotateSettings.tsx @@ -5,7 +5,6 @@ import RotateLeftIcon from "@mui/icons-material/RotateLeft"; import RotateRightIcon from "@mui/icons-material/RotateRight"; import { RotateParametersHook } from "../../../hooks/tools/rotate/useRotateParameters"; import { useSelectedFiles } from "../../../contexts/file/fileHooks"; -import { useThumbnailGeneration } from "../../../hooks/useThumbnailGeneration"; import DocumentThumbnail from "../../shared/filePreview/DocumentThumbnail"; interface RotateSettingsProps { @@ -15,39 +14,19 @@ interface RotateSettingsProps { const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) => { const { t } = useTranslation(); - const { selectedFiles } = useSelectedFiles(); - const { getThumbnailFromCache, requestThumbnail } = useThumbnailGeneration(); + const { selectedFileStubs } = useSelectedFiles(); // Get the first selected file for preview - const selectedFile = useMemo(() => { - return selectedFiles.length > 0 ? selectedFiles[0] : null; - }, [selectedFiles]); + const selectedStub = useMemo(() => { + return selectedFileStubs.length > 0 ? selectedFileStubs[0] : null; + }, [selectedFileStubs]); // Get thumbnail for the selected file const [thumbnail, setThumbnail] = useState(null); useEffect(() => { - if (!selectedFile) { - setThumbnail(null); - return; - } - - const pageId = `${selectedFile.fileId}-1`; - - // Try to get cached thumbnail first - const cached = getThumbnailFromCache(pageId); - if (cached) { - setThumbnail(cached); - return; - } - - // Request thumbnail if not cached - requestThumbnail(pageId, selectedFile, 1).then((result) => { - setThumbnail(result); - }).catch(() => { - setThumbnail(null); - }); - }, [selectedFile, getThumbnailFromCache, requestThumbnail]); + setThumbnail(selectedStub?.thumbnailUrl || null); + }, [selectedStub]); // Calculate current angle display const currentAngle = parameters.parameters.angle; @@ -86,7 +65,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) = }} > diff --git a/frontend/src/contexts/file/fileHooks.ts b/frontend/src/contexts/file/fileHooks.ts index 056ed2aa0..e42860562 100644 --- a/frontend/src/contexts/file/fileHooks.ts +++ b/frontend/src/contexts/file/fileHooks.ts @@ -123,12 +123,12 @@ export function useStirlingFileStub(fileId: FileId): { file?: File; record?: Sti /** * Hook for all files (use sparingly - causes re-renders on file list changes) */ -export function useAllFiles(): { files: StirlingFile[]; records: StirlingFileStub[]; fileIds: FileId[] } { +export function useAllFiles(): { files: StirlingFile[]; fileStubs: StirlingFileStub[]; fileIds: FileId[] } { const { state, selectors } = useFileState(); return useMemo(() => ({ files: selectors.getFiles(), - records: selectors.getStirlingFileStubs(), + fileStubs: selectors.getStirlingFileStubs(), fileIds: state.files.ids }), [state.files.ids, selectors]); } @@ -136,12 +136,12 @@ export function useAllFiles(): { files: StirlingFile[]; records: StirlingFileStu /** * Hook for selected files (optimized for selection-based UI) */ -export function useSelectedFiles(): { selectedFiles: StirlingFile[]; selectedRecords: StirlingFileStub[]; selectedFileIds: FileId[] } { +export function useSelectedFiles(): { selectedFiles: StirlingFile[]; selectedFileStubs: StirlingFileStub[]; selectedFileIds: FileId[] } { const { state, selectors } = useFileState(); return useMemo(() => ({ selectedFiles: selectors.getSelectedFiles(), - selectedRecords: selectors.getSelectedStirlingFileStubs(), + selectedFileStubs: selectors.getSelectedStirlingFileStubs(), selectedFileIds: state.ui.selectedFileIds }), [state.ui.selectedFileIds, selectors]); } diff --git a/frontend/src/tools/Merge.tsx b/frontend/src/tools/Merge.tsx index c0ed04f1b..ef9f8228a 100644 --- a/frontend/src/tools/Merge.tsx +++ b/frontend/src/tools/Merge.tsx @@ -16,7 +16,7 @@ const Merge = (props: BaseToolProps) => { // File selection hooks for custom sorting const { fileIds } = useAllFiles(); - const { selectedRecords } = useSelectedFiles(); + const { selectedFileStubs } = useSelectedFiles(); const { reorderFiles } = useFileManagement(); const base = useBaseTool( @@ -29,23 +29,23 @@ const Merge = (props: BaseToolProps) => { // Custom file sorting logic for merge tool const sortFiles = useCallback((sortType: 'filename' | 'dateModified', ascending: boolean = true) => { - const sortedRecords = [...selectedRecords].sort((recordA, recordB) => { + const sortedStubs = [...selectedFileStubs].sort((stubA, stubB) => { let comparison = 0; switch (sortType) { case 'filename': - comparison = recordA.name.localeCompare(recordB.name); + comparison = stubA.name.localeCompare(stubB.name); break; case 'dateModified': - comparison = recordA.lastModified - recordB.lastModified; + comparison = stubA.lastModified - stubB.lastModified; break; } return ascending ? comparison : -comparison; }); - const selectedIds = sortedRecords.map(record => record.id); + const selectedIds = sortedStubs.map(record => record.id); const deselectedIds = fileIds.filter(id => !selectedIds.includes(id)); reorderFiles([...selectedIds, ...deselectedIds]); - }, [selectedRecords, fileIds, reorderFiles]); + }, [selectedFileStubs, fileIds, reorderFiles]); return createToolFlow({ files: {