From 5d0c95e085a36c5409fb86e5720c2debb7075204 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 10 Oct 2022 09:34:34 +0800
Subject: [PATCH] [resumes][feat] disable inputs and buttons during form
 submission

---
 .../resumes/comments/CommentsForm.tsx         | 19 +++++++++++++------
 apps/portal/src/pages/resumes/submit.tsx      | 10 +++++++++-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/resumes/comments/CommentsForm.tsx b/apps/portal/src/components/resumes/comments/CommentsForm.tsx
index a14f9e3e..9a3f50bd 100644
--- a/apps/portal/src/components/resumes/comments/CommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsForm.tsx
@@ -88,35 +88,40 @@ export default function CommentsForm({
         onSubmit={handleSubmit(onSubmit)}>
         <div className="mt-4 space-y-4">
           <TextArea
-            {...(register('general'), {})}
+            {...register('general')}
+            disabled={reviewCreateMutation.isLoading}
             label="General"
             placeholder="General comments about the resume"
             onChange={(value) => onValueChange('general', value)}
           />
 
           <TextArea
-            {...(register('education'), {})}
+            {...register('education')}
+            disabled={reviewCreateMutation.isLoading}
             label="Education"
             placeholder="Comments about the Education section"
             onChange={(value) => onValueChange('education', value)}
           />
 
           <TextArea
-            {...(register('experience'), {})}
+            {...register('experience')}
+            disabled={reviewCreateMutation.isLoading}
             label="Experience"
             placeholder="Comments about the Experience section"
             onChange={(value) => onValueChange('experience', value)}
           />
 
           <TextArea
-            {...(register('projects'), {})}
+            {...register('projects')}
+            disabled={reviewCreateMutation.isLoading}
             label="Projects"
             placeholder="Comments about the Projects section"
             onChange={(value) => onValueChange('projects', value)}
           />
 
           <TextArea
-            {...(register('skills'), {})}
+            {...register('skills')}
+            disabled={reviewCreateMutation.isLoading}
             label="Skills"
             placeholder="Comments about the Skills section"
             onChange={(value) => onValueChange('skills', value)}
@@ -125,6 +130,7 @@ export default function CommentsForm({
 
         <div className="flex justify-end space-x-2 pt-4">
           <Button
+            disabled={reviewCreateMutation.isLoading}
             label="Cancel"
             type="button"
             variant="tertiary"
@@ -132,7 +138,8 @@ export default function CommentsForm({
           />
 
           <Button
-            disabled={!isDirty}
+            disabled={!isDirty || reviewCreateMutation.isLoading}
+            isLoading={reviewCreateMutation.isLoading}
             label="Submit"
             type="submit"
             variant="primary"
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index 1ca06031..97ea8f12 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -140,7 +140,7 @@ export default function SubmitResumeForm() {
               <div className="mb-4">
                 <TextInput
                   {...register('title', { required: true })}
-                  errorMessage={errors?.title && 'Title cannot be empty!'}
+                  disabled={isLoading}
                   label="Title"
                   placeholder={TITLE_PLACEHOLDER}
                   required={true}
@@ -150,6 +150,7 @@ export default function SubmitResumeForm() {
               <div className="mb-4">
                 <Select
                   {...register('role', { required: true })}
+                  disabled={isLoading}
                   label="Role"
                   options={ROLES}
                   required={true}
@@ -159,6 +160,7 @@ export default function SubmitResumeForm() {
               <div className="mb-4">
                 <Select
                   {...register('experience', { required: true })}
+                  disabled={isLoading}
                   label="Experience Level"
                   options={EXPERIENCE}
                   required={true}
@@ -168,6 +170,7 @@ export default function SubmitResumeForm() {
               <div className="mb-4">
                 <Select
                   {...register('location', { required: true })}
+                  disabled={isLoading}
                   label="Location"
                   name="location"
                   options={LOCATION}
@@ -204,6 +207,7 @@ export default function SubmitResumeForm() {
                           {...register('file', { required: true })}
                           accept="application/pdf"
                           className="sr-only"
+                          disabled={isLoading}
                           id="file-upload"
                           name="file-upload"
                           type="file"
@@ -223,6 +227,7 @@ export default function SubmitResumeForm() {
               <div className="mb-8">
                 <TextArea
                   {...register('additionalInfo')}
+                  disabled={isLoading}
                   label="Additional Information"
                   placeholder={ADDITIONAL_INFO_PLACEHOLDER}
                   onChange={(val) => setValue('additionalInfo', val)}
@@ -259,12 +264,14 @@ export default function SubmitResumeForm() {
               </div>
               <CheckboxInput
                 {...register('isChecked', { required: true })}
+                disabled={isLoading}
                 label="I have read and will follow the guidelines stated."
                 onChange={(val) => setValue('isChecked', val)}
               />
               <div className="mt-4 flex justify-end gap-4">
                 <Button
                   addonPosition="start"
+                  disabled={isLoading}
                   display="inline"
                   label="Clear"
                   size="md"
@@ -273,6 +280,7 @@ export default function SubmitResumeForm() {
                 />
                 <Button
                   addonPosition="start"
+                  disabled={isLoading}
                   display="inline"
                   isLoading={isLoading}
                   label="Submit"