From 511087cf907f69b074f77b7d5e7e5c394bda5414 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Thu, 13 Oct 2022 23:13:24 +0800
Subject: [PATCH] [resumes][feat] downloading resume in submit form

---
 apps/portal/src/pages/resumes/submit.tsx | 37 ++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index 4a77bbf8..ad9ffa49 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -141,6 +141,26 @@ export default function SubmitResumeForm() {
     setResumeFile(null);
   };
 
+  const onClickDownload = async () => {
+    if (resumeFile == null) {
+      return;
+    }
+
+    const url = window.URL.createObjectURL(resumeFile);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', resumeFile.name);
+
+    // Append to html link element page
+    document.body.appendChild(link);
+
+    // Start download
+    link.click();
+
+    // Clean up and remove the link
+    link.remove();
+  };
+
   const fileUploadError = useMemo(() => {
     if (invalidFileUploadError != null) {
       return invalidFileUploadError;
@@ -240,15 +260,26 @@ export default function SubmitResumeForm() {
                   )}>
                   <div className="space-y-1 text-center">
                     <div className="flex gap-2">
-                      <PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
-                      {resumeFile && <p>{resumeFile.name}</p>}
+                      {resumeFile == null ? (
+                        <PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
+                      ) : (
+                        <div className="flex gap-2">
+                          <p
+                            className="cursor-pointer  underline underline-offset-1 hover:text-indigo-600"
+                            onClick={onClickDownload}>
+                            {resumeFile.name}
+                          </p>
+                        </div>
+                      )}
                     </div>
                     <div className="flex justify-center text-sm">
                       <label
                         className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
                         htmlFor="file-upload">
                         <p className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500">
-                          Upload a file
+                          {resumeFile == null
+                            ? 'Upload a file'
+                            : 'Replace file'}
                         </p>
                         <input
                           {...register('file', { required: true })}