feat: Add remove file option to modal (#2750)

theopensystemslab · Feb 5, 2024 · 761f230 · 761f230
1 parent 5866eda
commit 761f230
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
@@ -35,6 +35,7 @@ interface FileTaggingModalProps {
   fileList: FileList;
   setFileList: (value: React.SetStateAction<FileList>) => void;
   setShowModal: (value: React.SetStateAction<boolean>) => void;
+  removeFile: (slot: FileUploadSlot) => void;
 }
 
 const ListHeader = styled(Box)(({ theme }) => ({
@@ -52,6 +53,7 @@ export const FileTaggingModal = ({
   fileList,
   setFileList,
   setShowModal,
+  removeFile,
 }: FileTaggingModalProps) => {
   const [error, setError] = useState<string | undefined>();
 
@@ -95,7 +97,11 @@ export const FileTaggingModal = ({
         </Box>
         {uploadedFiles.map((slot) => (
           <Box sx={{ mb: 4 }} key={`tags-per-file-container-${slot.id}`}>
-            <UploadedFileCard {...slot} key={slot.id} />
+            <UploadedFileCard
+              {...slot}
+              key={slot.id}
+              removeFile={() => removeFile(slot)}
+            />
             <SelectMultiple
               uploadedFile={slot}
               fileList={fileList}

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -155,6 +155,17 @@ function Component(props: Props) {
     }
   };
 
+  const removeFile = (slot: FileUploadSlot) => {
+    setSlots(slots.filter((currentSlot) => currentSlot.file !== slot.file));
+    setFileUploadStatus(`${slot.file.path} was deleted`);
+    const updatedFileList = removeSlots(
+      getTagsForSlot(slot.id, fileList),
+      slot,
+      fileList,
+    );
+    setFileList(updatedFileList);
+  };
+
   return (
     <Card
       handleSubmit={props.hideDropZone ? props.handleSubmit : validateAndSubmit}
@@ -222,6 +233,7 @@ function Component(props: Props) {
                 fileList={fileList}
                 setFileList={setFileList}
                 setShowModal={setShowModal}
+                removeFile={removeFile}
               />
             )}
             {slots.map((slot) => {
@@ -231,20 +243,7 @@ function Component(props: Props) {
                   key={slot.id}
                   tags={getTagsForSlot(slot.id, fileList)}
                   onChange={onUploadedFileCardChange}
-                  removeFile={() => {
-                    setSlots(
-                      slots.filter(
-                        (currentSlot) => currentSlot.file !== slot.file,
-                      ),
-                    );
-                    setFileUploadStatus(`${slot.file.path} was deleted`);
-                    const updatedFileList = removeSlots(
-                      getTagsForSlot(slot.id, fileList),
-                      slot,
-                      fileList,
-                    );
-                    setFileList(updatedFileList);
-                  }}
+                  removeFile={() => removeFile(slot)}
                 />
               );
             })}

diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx
@@ -12,7 +12,7 @@ import ImagePreview from "components/ImagePreview";
 import React from "react";
 
 interface Props extends FileUploadSlot {
-  removeFile?: () => void;
+  removeFile: () => void;
   onChange?: () => void;
   tags?: string[];
 }