Keane/update-submit-form (#338)

* [resumes][fix] add isLoading effect on submit form

* [resumes][fix] remove useeffect on browse page

apps/portal/src/pages/resumes/index.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { Disclosure, Menu, Transition } from '@headlessui/react';
 import {
   ChevronDownIcon,
@@ -22,6 +22,7 @@ import {
   TOP_HITS,
 } from '~/components/resumes/browse/constants';
 import FilterPill from '~/components/resumes/browse/FilterPill';
+import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 
 import type { Resume } from '~/types/resume';
 
@@ -42,12 +43,11 @@ const filters = [
     options: LOCATION,
   },
 ];
-import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 
 import { trpc } from '~/utils/trpc';
 
 export default function ResumeHomePage() {
-  const { data } = useSession();
+  const { data: sessionData } = useSession();
   const router = useRouter();
   const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
   const [searchValue, setSearchValue] = useState('');
@@ -55,41 +55,25 @@ export default function ResumeHomePage() {
 
   const allResumesQuery = trpc.useQuery(['resumes.resume.all'], {
     enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
+    onSuccess: (data) => {
+      setResumes(data);
+    },
   });
   const starredResumesQuery = trpc.useQuery(['resumes.resume.browse.stars'], {
     enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
+    onSuccess: (data) => {
+      setResumes(data);
+    },
   });
   const myResumesQuery = trpc.useQuery(['resumes.resume.browse.my'], {
     enabled: tabsValue === BROWSE_TABS_VALUES.MY,
+    onSuccess: (data) => {
+      setResumes(data);
+    },
   });
 
-  useEffect(() => {
-    switch (tabsValue) {
-      case BROWSE_TABS_VALUES.ALL: {
-        setResumes(allResumesQuery.data ?? []);
-        break;
-      }
-      case BROWSE_TABS_VALUES.STARRED: {
-        setResumes(starredResumesQuery.data ?? []);
-        break;
-      }
-      case BROWSE_TABS_VALUES.MY: {
-        setResumes(myResumesQuery.data ?? []);
-        break;
-      }
-      default: {
-        setResumes([]);
-      }
-    }
-  }, [
-    allResumesQuery.data,
-    starredResumesQuery.data,
-    myResumesQuery.data,
-    tabsValue,
-  ]);
-
   const onClickNew = () => {
-    if (data?.user?.id) {
+    if (sessionData?.user?.id) {
       router.push('/resumes/submit');
     } else {
       // TODO: Handle non-logged in user behaviour

apps/portal/src/pages/resumes/submit.tsx

@@ -40,6 +40,7 @@ export default function SubmitResumeForm() {
   const router = useRouter();
 
   const [resumeFile, setResumeFile] = useState<File | null>();
+  const [isLoading, setIsLoading] = useState(false);
   const [invalidFileUploadError, setInvalidFileUploadError] = useState<
     string | null
   >(null);
@@ -50,12 +51,18 @@ export default function SubmitResumeForm() {
     setValue,
     reset,
     formState: { errors },
-  } = useForm<IFormInput>();
+  } = useForm<IFormInput>({
+    defaultValues: {
+      isChecked: false,
+    },
+  });
 
   const onSubmit: SubmitHandler<IFormInput> = async (data) => {
     if (resumeFile == null) {
+      console.error('Resume file is empty');
       return;
     }
+    setIsLoading(true);
 
     const formData = new FormData();
     formData.append('key', RESUME_STORAGE_KEY);
@@ -68,15 +75,27 @@ export default function SubmitResumeForm() {
     });
     const { url } = res.data;
 
-    await resumeCreateMutation.mutate({
+    resumeCreateMutation.mutate(
+      {
         additionalInfo: data.additionalInfo,
         experience: data.experience,
         location: data.location,
         role: data.role,
         title: data.title,
         url,
-    });
+      },
+      {
+        onError: (error) => {
+          console.error(error);
+        },
+        onSettled: () => {
+          setIsLoading(false);
+        },
+        onSuccess: () => {
           router.push('/resumes');
+        },
+      },
+    );
   };
 
   const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -255,6 +274,7 @@ export default function SubmitResumeForm() {
                 <Button
                   addonPosition="start"
                   display="inline"
+                  isLoading={isLoading}
                   label="Submit"
                   size="md"
                   type="submit"