From 9ed42d7bbfa6e9e514c1a90fc10efc63a079c19a Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Fri, 14 Oct 2022 21:30:34 +0800
Subject: [PATCH] [resumes][fix] fix file upload error

---
 apps/portal/src/pages/resumes/submit.tsx | 58 ++++++++++++------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index d3d90c43..713703c3 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import type { SubmitHandler } from 'react-hook-form';
@@ -61,10 +61,6 @@ const selectors: Array<SelectorOptions> = [
 ];
 
 export default function SubmitResumeForm() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const resumeCreateMutation = trpc.useMutation('resumes.resume.user.create');
-
   const [resumeFile, setResumeFile] = useState<File | null>();
   const [isLoading, setIsLoading] = useState(false);
   const [invalidFileUploadError, setInvalidFileUploadError] = useState<
@@ -72,17 +68,34 @@ export default function SubmitResumeForm() {
   >(null);
   const [isDialogShown, setIsDialogShown] = useState(false);
 
-  const onFileDrop = (
-    acceptedFiles: Array<File>,
-    fileRejections: Array<FileRejection>,
-  ) => {
-    if (fileRejections.length === 0) {
-      setInvalidFileUploadError('');
-      setResumeFile(acceptedFiles[0]);
-    } else {
-      setInvalidFileUploadError(FILE_UPLOAD_ERROR);
-    }
-  };
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const resumeCreateMutation = trpc.useMutation('resumes.resume.user.create');
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<IFormInput>({
+    defaultValues: {
+      isChecked: false,
+    },
+  });
+
+  const onFileDrop = useCallback(
+    (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
+      if (fileRejections.length === 0) {
+        setInvalidFileUploadError('');
+        setResumeFile(acceptedFiles[0]);
+        setValue('file', acceptedFiles[0]);
+      } else {
+        setInvalidFileUploadError(FILE_UPLOAD_ERROR);
+      }
+    },
+    [setValue],
+  );
 
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
@@ -101,18 +114,6 @@ export default function SubmitResumeForm() {
     }
   }, [router, session, status]);
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors, isDirty },
-  } = useForm<IFormInput>({
-    defaultValues: {
-      isChecked: false,
-    },
-  });
-
   const onSubmit: SubmitHandler<IFormInput> = async (data) => {
     if (resumeFile == null) {
       return;
@@ -163,6 +164,7 @@ export default function SubmitResumeForm() {
     setIsDialogShown(false);
     reset();
     setResumeFile(null);
+    setInvalidFileUploadError(null);
   };
 
   const onClickDownload = async (