refactor(create): use immer for sigit files creation

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<SigitFile[]>([])
+  const [drawnFiles, updateDrawnFiles] = useImmer<SigitFile[]>([])
   const [parsingPdf, setIsParsing] = useState<boolean>(false)
 
   const searchFieldRef = useRef<HTMLInputElement>(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 && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <Container className={styles.container}>
         <StickySideColumns
           left={
@@ -1237,19 +1257,17 @@ export const CreatePage = () => {
           centerIcon={faFile}
           rightIcon={faToolbox}
         >
-          {parsingPdf ? (
-            <LoadingSpinner variant="small" />
-          ) : (
-            <DrawPDFFields
-              users={users}
-              metadata={metadata}
-              selectedTool={selectedTool}
-              sigitFiles={drawnFiles}
-              setSigitFiles={setDrawnFiles}
-            />
-          )}
+          <DrawPDFFields
+            users={users}
+            metadata={metadata}
+            selectedTool={selectedTool}
+            sigitFiles={drawnFiles}
+            updateSigitFiles={updateDrawnFiles}
+          />
+          {parsingPdf && <LoadingSpinner variant="small" />}
         </StickySideColumns>
       </Container>
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
     </>
   )
 }