diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 82f4d0c..a38767d 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -83,6 +83,7 @@ import { Autocomplete } from '@mui/lab' import _, { truncate } from 'lodash' import * as React from 'react' import { AvatarIconButton } from '../../components/UserAvatarIconButton' +import { useImmer } from 'use-immer' type FoundUser = Event & { npub: string } @@ -123,7 +124,7 @@ export const CreatePage = () => { const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>( {} ) - const [drawnFiles, setDrawnFiles] = useState([]) + const [drawnFiles, updateDrawnFiles] = useImmer([]) const [parsingPdf, setIsParsing] = useState(false) const searchFieldRef = useRef(null) @@ -295,8 +296,28 @@ export const CreatePage = () => { selectedFiles, getSigitFile ) + updateDrawnFiles((draft) => { + // Existing files are untouched - setDrawnFiles(files) + // Handle removed files + // Remove in reverse to avoid index issues + for (let i = draft.length - 1; i >= 0; i--) { + if ( + !files.some( + (f) => f.name === draft[i].name && f.size === draft[i].size + ) + ) { + draft.splice(i, 1) + } + } + + // Add new files + files.forEach((f) => { + if (!draft.some((d) => d.name === f.name && d.size === f.size)) { + draft.push(f) + } + }) + }) } setIsParsing(true) @@ -305,7 +326,7 @@ export const CreatePage = () => { setIsParsing(false) }) } - }, [selectedFiles]) + }, [selectedFiles, updateDrawnFiles]) /** * Changes the drawing tool @@ -516,7 +537,7 @@ export const CreatePage = () => { }) }) }) - setDrawnFiles(drawnFilesCopy) + updateDrawnFiles(drawnFilesCopy) } /** @@ -1017,14 +1038,13 @@ export const CreatePage = () => { try { return JSON.parse(event.content) } catch (e) { - return undefined console.error(e) + return undefined } } return ( <> - {isLoading && } { centerIcon={faFile} rightIcon={faToolbox} > - {parsingPdf ? ( - - ) : ( - - )} + + {parsingPdf && } + {isLoading && } ) }