refactor: update the remove method to avoid direct state update

- Create a clone of fileList before removing the file - Remove the file and update state with the setter
theopensystemslab · Nov 13, 2023 · 3f5a688 · 3f5a688
1 parent e3158fc
commit 3f5a688
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -240,11 +240,12 @@ function Component(props: Props) {
                       ),
                     );
                     setFileUploadStatus(`${slot.file.path} was deleted`);
-                    removeSlots(
+                    const updatedFileList = removeSlots(
                       getTagsForSlot(slot.id, fileList),
                       slot,
                       fileList,
                     );
+                    setFileList(updatedFileList);
                   }}
                 />
               );

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts
@@ -1,5 +1,4 @@
 import cloneDeep from "lodash/cloneDeep";
-import merge from "lodash/merge";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { Store } from "pages/FlowEditor/lib/store";
@@ -368,7 +367,7 @@ export const removeSlots = (
   uploadedFile: FileUploadSlot,
   fileList: FileList,
 ): FileList => {
-  const updatedFileList: FileList = merge(fileList);
+  const updatedFileList: FileList = cloneDeep(fileList);
   const categories = Object.keys(updatedFileList) as Array<
     keyof typeof updatedFileList
   >;