From f5789bb6006366e5a1ee3d5be7baf959d6d4b9d6 Mon Sep 17 00:00:00 2001
From: Sharath Thokala <Sharath.Thokala@wmca.org.uk>
Date: Mon, 29 Jan 2024 11:41:36 +0000
Subject: [PATCH] Add remove file logic

---
 .../App/Form/Summary/Sections/SendRequest.tsx | 16 ++---
 .../MultiFileUpload/MultiFileUpload.tsx       | 71 +++++++++----------
 .../MultiFileUpload/MultiFileUpload.types.ts  |  1 +
 .../DisabilityProofStep.tsx                   | 12 ++++
 4 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/components/App/Form/Summary/Sections/SendRequest.tsx b/src/components/App/Form/Summary/Sections/SendRequest.tsx
index 7d0ffc1..57741be 100644
--- a/src/components/App/Form/Summary/Sections/SendRequest.tsx
+++ b/src/components/App/Form/Summary/Sections/SendRequest.tsx
@@ -28,14 +28,14 @@ const SendYourRequest = () => {
   const fileData = [];
   const applicationNumber = Math.floor(Math.random() * 10000000 + 1).toString();
   const files = [
-    formDataState.ApplicantPhoto,
-    ...formDataState.proofDocumentArms,
-    ...formDataState.proofDocumentBlind,
-    ...formDataState.proofDocumentDeaf,
-    ...formDataState.proofDocumentDrive,
-    ...formDataState.proofDocumentLanguage,
-    ...formDataState.proofDocumentLearn,
-    ...formDataState.proofDocumentWalk,
+    [formDataState.ApplicantPhoto],
+    formDataState.proofDocumentArms ? [...formDataState.proofDocumentArms] : [],
+    formDataState.proofDocumentBlind ? [...formDataState.proofDocumentBlind] : [],
+    formDataState.proofDocumentDeaf ? [...formDataState.proofDocumentDeaf] : [],
+    formDataState.proofDocumentDrive ? [...formDataState.proofDocumentDrive] : [],
+    formDataState.proofDocumentLanguage ? [...formDataState.proofDocumentLanguage] : [],
+    formDataState.proofDocumentLearn ? [...formDataState.proofDocumentLearn] : [],
+    formDataState.proofDocumentWalk ? [...formDataState.proofDocumentWalk] : [],
   ];
   const checkAnswersEl = document.getElementById('application-summary');
   // remove change button
diff --git a/src/components/shared/MultiFileUpload/MultiFileUpload.tsx b/src/components/shared/MultiFileUpload/MultiFileUpload.tsx
index da150e6..65315eb 100644
--- a/src/components/shared/MultiFileUpload/MultiFileUpload.tsx
+++ b/src/components/shared/MultiFileUpload/MultiFileUpload.tsx
@@ -6,14 +6,13 @@ import { Icon } from 'components/shared';
 import s from './MultiFileUpload.module.scss';
 import { TMultiFileUploadProps } from './MultiFileUpload.types';
 
-// prettier-ignore
-
 const FileUpload = ({
   name,
   label,
   hint,
   defaultFiles,
   updateFiles,
+  removeFile,
   error,
   accept,
 }: TMultiFileUploadProps): JSX.Element => {
@@ -21,13 +20,13 @@ const FileUpload = ({
   const handleFocus = () => setIsFileInputFocused(true);
   const handleBlur = () => setIsFileInputFocused(false);
 
-  // const dFiles = defaultFiles ? [...defaultFiles] : [];
+  const selectedFiles = defaultFiles ? [...defaultFiles] : [];
 
   // const previewUrl = defaultFile ? URL.createObjectURL(defaultFile) : undefined;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target?.files;
-    const files = fileList ? [...fileList] : [];
+    const files = fileList ? [...selectedFiles, ...fileList] : selectedFiles;
 
     if (!files) return;
     updateFiles(files);
@@ -49,14 +48,12 @@ const FileUpload = ({
 
         <label
           htmlFor={name}
-          className={`wmnds-btn wmnds-btn--primary ${isFileInputFocused ? s.fileUploadLabelFocused : ''
-            }`}
+          className={`wmnds-btn wmnds-btn--primary ${
+            isFileInputFocused ? s.fileUploadLabelFocused : ''
+          }`}
         >
           Choose file
-          <Icon
-            className="wmnds-btn__icon wmnds-btn__icon--right"
-            iconName="general-paperclip"
-          />
+          <Icon className="wmnds-btn__icon wmnds-btn__icon--right" iconName="general-paperclip" />
           <input
             type="file"
             name={name}
@@ -69,33 +66,35 @@ const FileUpload = ({
             multiple
           />
         </label>
-        <span className="wmnds-m-l-md">No files selected</span>
-
-        {defaultFiles ? (defaultFiles.map((file, i) => (
-          // <li key={i}>
-          // {file.name} - {file.type}
-          // </li>
-          <>
-            <div key={i} className={`${s.fileUploadUploaded}`}>
-              <button
-                className="wmnds-btn wmnds-btn--destructive"
-                type="button"
-                name={i.toString()}
-                id={i.toString()}
-                title="Remove uploaded file"
-                onClick={() => updateFiles(null)}
-              >
-                Remove file
-                <Icon className="wmnds-btn__icon wmnds-btn__icon--right" iconName="general-trash" />
-              </button>
-              <span className="wmnds-m-l-md">{file.name}</span>
-            </div>
-            <div className="wmnds-m-t-lg">
-              <img className={s.fileUploadPreview} src={URL.createObjectURL(file)} alt="preview" />
-            </div>
-          </>
-        ))) : (<></>)}
+        <span className="wmnds-m-l-md">
+          {selectedFiles.length > 0 ? 'Add more files' : 'No files selected'}
+        </span>
 
+        {defaultFiles ? (
+          defaultFiles.map((file, i) => (
+            <>
+              <div key={i} className={`wmnds-m-t-md ${s.fileUploadUploaded}`}>
+                <button
+                  className="wmnds-btn wmnds-btn--destructive"
+                  type="button"
+                  name={i.toString()}
+                  id={i.toString()}
+                  title="Remove uploaded file"
+                  onClick={() => removeFile(file)}
+                >
+                  Remove file
+                  <Icon
+                    className="wmnds-btn__icon wmnds-btn__icon--right"
+                    iconName="general-trash"
+                  />
+                </button>
+                <span className="wmnds-m-l-md">{file.name}</span>
+              </div>
+            </>
+          ))
+        ) : (
+          <></>
+        )}
       </div>
     </fieldset>
   );
diff --git a/src/components/shared/MultiFileUpload/MultiFileUpload.types.ts b/src/components/shared/MultiFileUpload/MultiFileUpload.types.ts
index 4126b43..1806539 100644
--- a/src/components/shared/MultiFileUpload/MultiFileUpload.types.ts
+++ b/src/components/shared/MultiFileUpload/MultiFileUpload.types.ts
@@ -8,5 +8,6 @@ export type TMultiFileUploadProps = {
   hint?: string;
   defaultFiles?: Nullable<File[]>;
   updateFiles: (files: Nullable<File[]>) => void;
+  removeFile: (file: File) => void;
   accept?: string;
 };
diff --git a/src/components/sharedSteps/DisabilityProofStep/DisabilityProofStep.tsx b/src/components/sharedSteps/DisabilityProofStep/DisabilityProofStep.tsx
index ce0bd37..c3e0eee 100644
--- a/src/components/sharedSteps/DisabilityProofStep/DisabilityProofStep.tsx
+++ b/src/components/sharedSteps/DisabilityProofStep/DisabilityProofStep.tsx
@@ -98,6 +98,17 @@ const DisabilityProofStep = ({
       handleNavigation();
     }
   };
+  const deleteFile = (file: File) => {
+    if (identityDocument.currentValue !== null) {
+      const array = [...identityDocument.currentValue];
+      const index = identityDocument.currentValue.indexOf(file);
+      if (index > -1) {
+        array.splice(index, 1);
+        identityDocument.set(array);
+      }
+    }
+  };
+
   // const one = !question.includes('learn') ? 'one' : 'at least two';
   return (
     <Question
@@ -159,6 +170,7 @@ const DisabilityProofStep = ({
         name={`${dataCategoryPrefix}proof`}
         defaultFiles={identityDocument.currentValue}
         updateFiles={identityDocument.set}
+        removeFile={deleteFile}
         error={identityDocument.error}
         aria-label="Files must be jpeg, png or pdf file format"
       />