From e3995be147bb1a4863e728ad6ca95adf97e4e17e Mon Sep 17 00:00:00 2001
From: Ai Ling <hong-ailing@hotmail.com>
Date: Thu, 13 Oct 2022 01:06:11 +0800
Subject: [PATCH] [offers][fix] Fix minor issues in form

---
 .../portal/src/components/offers/constants.ts |  4 +-
 .../offers/forms/BackgroundForm.tsx           | 79 +++++++++++--------
 .../offers/forms/OfferDetailsForm.tsx         | 66 +++++-----------
 apps/portal/src/components/offers/types.ts    |  2 +-
 4 files changed, 65 insertions(+), 86 deletions(-)

diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts
index e360a505..d8960877 100644
--- a/apps/portal/src/components/offers/constants.ts
+++ b/apps/portal/src/components/offers/constants.ts
@@ -104,8 +104,8 @@ export const yearOptions = [
 
 export const educationLevelOptions = Object.entries(
   EducationBackgroundType,
-).map(([key, value]) => ({
-  label: key,
+).map(([, value]) => ({
+  label: value,
   value,
 }));
 
diff --git a/apps/portal/src/components/offers/forms/BackgroundForm.tsx b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
index 61a1c3fe..1ff89c1e 100644
--- a/apps/portal/src/components/offers/forms/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
@@ -5,6 +5,8 @@ import {
   companyOptions,
   educationFieldOptions,
   educationLevelOptions,
+  emptyOption,
+  FieldError,
   locationOptions,
   titleOptions,
 } from '~/components/offers/constants';
@@ -28,44 +30,44 @@ function YoeSection() {
           <FormTextInput
             label="Total YOE"
             placeholder="0"
+            required={true}
             type="number"
             {...register(`background.totalYoe`, {
+              required: FieldError.Required,
               valueAsNumber: true,
             })}
           />
         </div>
-        <div className="grid grid-cols-1 space-x-3">
-          <Collapsible label="Add specific YOEs by domain">
-            <div className="mb-5 grid grid-cols-2 space-x-3">
-              <FormTextInput
-                label="Specific YOE 1"
-                type="number"
-                {...register(`background.specificYoes.0.yoe`, {
-                  valueAsNumber: true,
-                })}
-              />
-              <FormTextInput
-                label="Specific Domain 1"
-                placeholder="e.g. Frontend"
-                {...register(`background.specificYoes.0.domain`)}
-              />
-            </div>
-            <div className="mb-5 grid grid-cols-2 space-x-3">
-              <FormTextInput
-                label="Specific YOE 2"
-                type="number"
-                {...register(`background.specificYoes.1.yoe`, {
-                  valueAsNumber: true,
-                })}
-              />
-              <FormTextInput
-                label="Specific Domain 2"
-                placeholder="e.g. Backend"
-                {...register(`background.specificYoes.1.domain`)}
-              />
-            </div>
-          </Collapsible>
-        </div>
+        <Collapsible label="Add specific YOEs by domain">
+          <div className="mb-5 grid grid-cols-2 space-x-3">
+            <FormTextInput
+              label="Specific YOE 1"
+              type="number"
+              {...register(`background.specificYoes.0.yoe`, {
+                valueAsNumber: true,
+              })}
+            />
+            <FormTextInput
+              label="Specific Domain 1"
+              placeholder="e.g. Frontend"
+              {...register(`background.specificYoes.0.domain`)}
+            />
+          </div>
+          <div className="mb-5 grid grid-cols-2 space-x-3">
+            <FormTextInput
+              label="Specific YOE 2"
+              type="number"
+              {...register(`background.specificYoes.1.yoe`, {
+                valueAsNumber: true,
+              })}
+            />
+            <FormTextInput
+              label="Specific Domain 2"
+              placeholder="e.g. Backend"
+              {...register(`background.specificYoes.1.domain`)}
+            />
+          </div>
+        </Collapsible>
       </div>
     </>
   );
@@ -80,12 +82,14 @@ function FullTimeJobFields() {
           display="block"
           label="Title"
           options={titleOptions}
+          placeholder={emptyOption}
           {...register(`background.experiences.0.title`)}
         />
         <FormSelect
           display="block"
           label="Company"
           options={companyOptions}
+          placeholder={emptyOption}
           {...register(`background.experiences.0.companyId`)}
         />
       </div>
@@ -155,12 +159,14 @@ function InternshipJobFields() {
           display="block"
           label="Title"
           options={titleOptions}
+          placeholder={emptyOption}
           {...register(`background.experiences.0.title`)}
         />
         <FormSelect
           display="block"
           label="Company"
           options={companyOptions}
+          placeholder={emptyOption}
           {...register(`background.experiences.0.company`)}
         />
       </div>
@@ -195,6 +201,7 @@ function InternshipJobFields() {
             display="block"
             label="Location"
             options={locationOptions}
+            placeholder={emptyOption}
             {...register(`background.experiences.0.location`)}
           />
         </div>
@@ -258,12 +265,14 @@ function EducationSection() {
             display="block"
             label="Education Level"
             options={educationLevelOptions}
+            placeholder={emptyOption}
             {...register(`background.educations.0.type`)}
           />
           <FormSelect
             display="block"
             label="Field"
             options={educationFieldOptions}
+            placeholder={emptyOption}
             {...register(`background.educations.0.field`)}
           />
         </div>
@@ -287,9 +296,9 @@ export default function BackgroundForm() {
       <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
         Help us better gauge your offers
       </h5>
-      <h6 className="mx-10 mb-8 text-center text-lg font-light text-gray-600">
-        This section is optional, but your background information helps us
-        benchmark your offers.
+      <h6 className="text-md mx-10 mb-8 text-center font-light text-gray-600">
+        This section is mostly optional, but your background information helps
+        us benchmark your offers.
       </h6>
       <div>
         <YoeSection />
diff --git a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
index 9ff722fb..7f416397 100644
--- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
-import type { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
+import type {
+  FieldValues,
+  UseFieldArrayRemove,
+  UseFieldArrayReturn,
+} from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
 import { useFieldArray } from 'react-hook-form';
@@ -35,12 +39,12 @@ import { CURRENCY_OPTIONS } from '../../../utils/offers/currency/CurrencyEnum';
 
 type FullTimeOfferDetailsFormProps = Readonly<{
   index: number;
-  setDialogOpen: (isOpen: boolean) => void;
+  remove: UseFieldArrayRemove;
 }>;
 
 function FullTimeOfferDetailsForm({
   index,
-  setDialogOpen,
+  remove,
 }: FullTimeOfferDetailsFormProps) {
   const { register, formState, setValue } = useFormContext<{
     offers: Array<FullTimeOfferDetailsFormData>;
@@ -103,7 +107,7 @@ function FullTimeOfferDetailsForm({
           })}
         />
       </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
+      <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
         <FormSelect
           display="block"
           errorMessage={offerFields?.location?.message}
@@ -254,7 +258,7 @@ function FullTimeOfferDetailsForm({
             icon={TrashIcon}
             label="Delete"
             variant="secondary"
-            onClick={() => setDialogOpen(true)}
+            onClick={() => remove(index)}
           />
         )}
       </div>
@@ -264,12 +268,12 @@ function FullTimeOfferDetailsForm({
 
 type InternshipOfferDetailsFormProps = Readonly<{
   index: number;
-  setDialogOpen: (isOpen: boolean) => void;
+  remove: UseFieldArrayRemove;
 }>;
 
 function InternshipOfferDetailsForm({
   index,
-  setDialogOpen,
+  remove,
 }: InternshipOfferDetailsFormProps) {
   const { register, formState } = useFormContext<{
     offers: Array<InternshipOfferDetailsFormData>;
@@ -410,7 +414,7 @@ function InternshipOfferDetailsForm({
             label="Delete"
             variant="secondary"
             onClick={() => {
-              setDialogOpen(true);
+              remove(index);
             }}
           />
         )}
@@ -429,7 +433,6 @@ function OfferDetailsFormArray({
   jobType,
 }: OfferDetailsFormArrayProps) {
   const { append, remove, fields } = fieldArrayValues;
-  const [isDialogOpen, setDialogOpen] = useState(false);
 
   return (
     <div>
@@ -437,44 +440,10 @@ function OfferDetailsFormArray({
         return (
           <div key={item.id}>
             {jobType === JobType.FullTime ? (
-              <FullTimeOfferDetailsForm
-                index={index}
-                setDialogOpen={setDialogOpen}
-              />
+              <FullTimeOfferDetailsForm index={index} remove={remove} />
             ) : (
-              <InternshipOfferDetailsForm
-                index={index}
-                setDialogOpen={setDialogOpen}
-              />
+              <InternshipOfferDetailsForm index={index} remove={remove} />
             )}
-            <Dialog
-              isShown={isDialogOpen}
-              primaryButton={
-                <Button
-                  display="block"
-                  label="OK"
-                  variant="primary"
-                  onClick={() => {
-                    remove(index);
-                    setDialogOpen(false);
-                  }}
-                />
-              }
-              secondaryButton={
-                <Button
-                  display="block"
-                  label="Cancel"
-                  variant="tertiary"
-                  onClick={() => setDialogOpen(false)}
-                />
-              }
-              title="Remove this offer"
-              onClose={() => setDialogOpen(false)}>
-              <p>
-                Are you sure you want to remove this offer? This action cannot
-                be reversed.
-              </p>
-            </Dialog>
           </div>
         );
       })}
@@ -501,15 +470,16 @@ export default function OfferDetailsForm() {
   const [isDialogOpen, setDialogOpen] = useState(false);
   const { control } = useFormContext();
   const fieldArrayValues = useFieldArray({ control, name: 'offers' });
+  const { append, remove } = fieldArrayValues;
 
   const toggleJobType = () => {
-    fieldArrayValues.remove();
+    remove();
     if (jobType === JobType.FullTime) {
       setJobType(JobType.Internship);
-      fieldArrayValues.append(defaultInternshipOfferValues);
+      append(defaultInternshipOfferValues);
     } else {
       setJobType(JobType.FullTime);
-      fieldArrayValues.append(defaultFullTimeOfferValues);
+      append(defaultFullTimeOfferValues);
     }
   };
 
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index bab501df..ede8f705 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -20,7 +20,7 @@ export enum EducationBackgroundType {
   Masters = 'Masters',
   PhD = 'PhD',
   Professional = 'Professional',
-  Seconday = 'Secondary',
+  Secondary = 'Secondary',
   SelfTaught = 'Self-taught',
 }