[offers][refactor] refactor types and constants

apps/portal/src/components/offers/constants.ts

@@ -0,0 +1,120 @@
+// TODO: use enums
+export const titleOptions = [
+  {
+    label: 'Software engineer',
+    value: 'Software engineer',
+  },
+  {
+    label: 'Frontend engineer',
+    value: 'Frontend engineer',
+  },
+  {
+    label: 'Backend engineer',
+    value: 'Backend engineer',
+  },
+  {
+    label: 'Full-stack engineer',
+    value: 'Full-stack engineer',
+  },
+];
+
+export const currencyOptions = [
+  {
+    label: 'USD',
+    value: 'USD',
+  },
+  {
+    label: 'SGD',
+    value: 'SGD',
+  },
+  {
+    label: 'EUR',
+    value: 'EUR',
+  },
+];
+
+export const companyOptions = [
+  {
+    label: 'Shopee',
+    value: 'id-abc123',
+  },
+];
+
+export const locationOptions = [
+  {
+    label: 'Singapore, Singapore',
+    value: 'Singapore, Singapore',
+  },
+];
+
+export const internshipCycleOptions = [
+  {
+    label: 'Summer',
+    value: 'Summer',
+  },
+  {
+    label: 'Winter',
+    value: 'Winter',
+  },
+  {
+    label: 'Spring',
+    value: 'Spring',
+  },
+  {
+    label: 'Fall',
+    value: 'Fall',
+  },
+  {
+    label: 'Full-year',
+    value: 'Full-year',
+  },
+];
+
+export const yearOptions = [
+  {
+    label: '2021',
+    value: '2021',
+  },
+  {
+    label: '2022',
+    value: '2022',
+  },
+  {
+    label: '2023',
+    value: '2023',
+  },
+  {
+    label: '2024',
+    value: '2024',
+  },
+];
+
+export const educationLevelOptions = [
+  {
+    label: 'Bachelor',
+    value: 'Bachelor',
+  },
+  {
+    label: 'Masters',
+    value: 'Masters',
+  },
+  {
+    label: 'Doctorate',
+    value: 'Doctorate',
+  },
+];
+
+export const educationFieldOptions = [
+  {
+    label: 'Computer Science',
+    value: 'Computer Science',
+  },
+  {
+    label: 'Information Security',
+    value: 'Information Security',
+  },
+  {
+    label: 'Business Analytics',
+    value: 'Business Analytics',
+  },
+];

apps/portal/src/components/offers/forms/BackgroundForm.tsx

@@ -7,9 +7,11 @@ import FormTextInput from './FormTextInput';
 import {
   companyOptions,
   currencyOptions,
+  educationFieldOptions,
+  educationLevelOptions,
   locationOptions,
   titleOptions,
-} from './OfferDetailsForm';
+} from '../constants';
 
 function YoeSection() {
   const { register } = useFormContext();
@@ -187,7 +189,9 @@ function InternshipJobFields() {
 }
 
 function CurrentJobSection() {
-  const { register, getValues } = useFormContext();
+  const { register, watch } = useFormContext();
+  const watchJobType = watch('background.experience.jobType', 'FULLTIME');
+
   return (
     <>
       <h6 className="mb-2 text-left text-xl font-medium text-gray-400">
@@ -213,7 +217,7 @@ function CurrentJobSection() {
             />
           </FormRadioList>
         </div>
-        {getValues('background.experience.jobType') === 'Full-time' ? (
+        {watchJobType === 'Full-time' ? (
           <FullTimeJobFields />
         ) : (
           <InternshipJobFields />
@@ -223,36 +227,6 @@ function CurrentJobSection() {
   );
 }
 
-const educationLevelOptions = [
-  {
-    label: 'Bachelor',
-    value: 'Bachelor',
-  },
-  {
-    label: 'Masters',
-    value: 'Masters',
-  },
-  {
-    label: 'Doctorate',
-    value: 'Doctorate',
-  },
-];
-
-const fieldOptions = [
-  {
-    label: 'Computer Science',
-    value: 'Computer Science',
-  },
-  {
-    label: 'Information Security',
-    value: 'Information Security',
-  },
-  {
-    label: 'Business Analytics',
-    value: 'Business Analytics',
-  },
-];
-
 function EducationSection() {
   const { register } = useFormContext();
   return (
@@ -271,7 +245,7 @@ function EducationSection() {
           <FormSelect
             display="block"
             label="Field"
-            options={fieldOptions}
+            options={educationFieldOptions}
             {...register(`background.education.field`)}
           />
         </div>

apps/portal/src/components/offers/forms/FormRadioList.tsx

@@ -7,8 +7,7 @@ type RadioListProps = ComponentProps<typeof RadioList>;
 
 type FormRadioListProps = Omit<RadioListProps, 'onChange'>;
 
-function FormRadioListWithRef(props: FormRadioListProps) {
+function FormRadioListWithRef({ name, ...rest }: FormRadioListProps) {
-  const { name, ...rest } = props;
   const { setValue } = useFormContext();
   return (
     <RadioList

apps/portal/src/components/offers/forms/FormSelect.tsx

@@ -8,14 +8,13 @@ type SelectProps = ComponentProps<typeof Select>;
 type FormSelectProps = Omit<SelectProps, 'onChange'>;
 
 function FormSelectWithRef(
-  props: FormSelectProps,
+  { name, ...rest }: FormSelectProps,
   ref?: ForwardedRef<HTMLSelectElement>,
 ) {
-  const { name } = props;
   const { setValue } = useFormContext();
   return (
     <Select
-      {...(props as SelectProps)}
+      {...(rest as SelectProps)}
       ref={ref}
       onChange={(val) => setValue(name || '', val)}
     />

apps/portal/src/components/offers/forms/FormTextArea.tsx

@@ -10,10 +10,9 @@ type FormTextAreaProps = Omit<TextAreaProps, 'onChange'> &
   Pick<UseFormRegisterReturn<never>, 'onChange'>;
 
 function FormTextAreaWithRef(
-  props: FormTextAreaProps,
+  { onChange, ...rest }: FormTextAreaProps,
   ref?: ForwardedRef<HTMLTextAreaElement>,
 ) {
-  const { onChange, ...rest } = props;
   return (
     <TextArea
       {...(rest as TextAreaProps)}

apps/portal/src/components/offers/forms/FormTextInput.tsx

@@ -9,10 +9,9 @@ type FormTextInputProps = Omit<TextInputProps, 'onChange'> &
   Pick<UseFormRegisterReturn<never>, 'onChange'>;
 
 function FormTextInputWithRef(
-  props: FormTextInputProps,
+  { onChange, ...rest }: FormTextInputProps,
   ref?: ForwardedRef<HTMLInputElement>,
 ) {
-  const { onChange, ...rest } = props;
   return (
     <TextInput
       {...(rest as TextInputProps)}

apps/portal/src/components/offers/forms/OfferDetailsForm.tsx

@@ -13,98 +13,16 @@ import { Button } from '@tih/ui';
 import FormSelect from './FormSelect';
 import FormTextArea from './FormTextArea';
 import FormTextInput from './FormTextInput';
-
+import {
-// eslint-disable-next-line no-shadow
+  companyOptions,
-export enum JobType {
+  currencyOptions,
-  FullTime = 'Full-time',
+  internshipCycleOptions,
-  Internship = 'Internship',
+  locationOptions,
-}
+  titleOptions,
-
+  yearOptions,
-export const titleOptions = [
+} from '../constants';
-  {
+import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types';
-    label: 'Software engineer',
+import { JobType } from '../types';
-    value: 'Software engineer',
-  },
-  {
-    label: 'Frontend engineer',
-    value: 'Frontend engineer',
-  },
-  {
-    label: 'Backend engineer',
-    value: 'Backend engineer',
-  },
-  {
-    label: 'Full-stack engineer',
-    value: 'Full-stack engineer',
-  },
-];
-
-export const currencyOptions = [
-  {
-    label: 'USD',
-    value: 'USD',
-  },
-  {
-    label: 'SGD',
-    value: 'SGD',
-  },
-  {
-    label: 'EUR',
-    value: 'EUR',
-  },
-];
-
-export const companyOptions = [
-  {
-    label: 'Shopee',
-    value: 'id-abc123',
-  },
-];
-
-export const locationOptions = [
-  {
-    label: 'Singapore, Singapore',
-    value: 'Singapore, Singapore',
-  },
-];
-
-const internshipCycleOptions = [
-  {
-    label: 'Summer',
-    value: 'Summer',
-  },
-  {
-    label: 'Winter',
-    value: 'Winter',
-  },
-  {
-    label: 'Spring',
-    value: 'Spring',
-  },
-  {
-    label: 'Fall',
-    value: 'Fall',
-  },
-];
-
-const yearOptions = [
-  {
-    label: '2021',
-    value: '2021',
-  },
-  {
-    label: '2022',
-    value: '2022',
-  },
-  {
-    label: '2023',
-    value: '2023',
-  },
-  {
-    label: '2024',
-    value: '2024',
-  },
-];
 
 type FullTimeOfferDetailsFormProps = Readonly<{
   index: number;
@@ -115,7 +33,10 @@ function FullTimeOfferDetailsForm({
   index,
   remove,
 }: FullTimeOfferDetailsFormProps) {
-  const { register } = useFormContext();
+  const { register } = useFormContext<{
+    offers: Array<FullTimeOfferFormData>;
+  }>();
+
   return (
     <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-3 space-x-3">
@@ -124,13 +45,17 @@ function FullTimeOfferDetailsForm({
           label="Title"
           options={titleOptions}
           required={true}
-          {...register(`offers.${index}.job.title`, { required: true })}
+          {...register(`offers.${index}.job.title`, {
+            required: true,
+          })}
         />
         <FormTextInput
           label="Focus / Specialization"
           placeholder="e.g. Front End"
           required={true}
-          {...register(`offers.${index}.job.specialization`)}
+          {...register(`offers.${index}.job.specialization`, {
+            required: true,
+          })}
         />
         <FormSelect
           display="block"
@@ -152,7 +77,7 @@ function FullTimeOfferDetailsForm({
           label="Location"
           options={locationOptions}
           required={true}
-          {...register(`offers.${index}.job.location`, { required: true })}
+          {...register(`offers.${index}.location`, { required: true })}
         />
         <FormTextInput
           label="Month Received"
@@ -321,7 +246,9 @@ function InternshipOfferDetailsForm({
   index,
   remove,
 }: InternshipOfferDetailsFormProps) {
-  const { register } = useFormContext();
+  const { register } = useFormContext<{
+    offers: Array<InternshipOfferFormData>;
+  }>();
 
   return (
     <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">

apps/portal/src/components/offers/types.ts

@@ -0,0 +1,100 @@
+/*
+ *  Offer Profile Submission
+ */
+
+// eslint-disable-next-line no-shadow
+export enum JobType {
+  FullTime = 'FULLTIME',
+  Internship = 'INTERNSHIP',
+}
+
+type Money = {
+  currency: string;
+  value: number;
+};
+
+type FullTimeJobData = {
+  base: Money;
+  bonus: Money;
+  level: string;
+  specialization: string;
+  stocks: Money;
+  title: string;
+  totalCompensation: Money;
+};
+
+export type FullTimeOfferFormData = {
+  comments: string;
+  companyId: string;
+  job: FullTimeJobData;
+  jobType: string;
+  location: string;
+  monthYearReceived: string;
+  negotiationStrategy: string;
+};
+
+type InternshipJobData = {
+  internshipCycle: string;
+  monthlySalary: Money;
+  specialization: string;
+  startYear: number;
+  title: string;
+};
+
+export type InternshipOfferFormData = {
+  comments: string;
+  companyId: string;
+  job: InternshipJobData;
+  jobType: string;
+  location: string;
+  monthYearReceived: string;
+  negotiationStrategy: string;
+};
+
+type OfferDetailsFormData = FullTimeOfferFormData | InternshipOfferFormData;
+
+type SpecificYoe = {
+  domain: string;
+  yoe: number;
+};
+
+type FullTimeExperience = {
+  level: string;
+  totalCompensation: Money;
+};
+
+type InternshipExperience = {
+  monthlySalary: Money;
+};
+
+type GeneralExperience = {
+  companyId: string;
+  durationInMonths: number;
+  jobType: string;
+  specialization: string;
+  title: string;
+};
+
+type Experience =
+  | (FullTimeExperience & GeneralExperience)
+  | (GeneralExperience & InternshipExperience);
+
+type Education = {
+  endDate: Date;
+  field: string;
+  school: string;
+  startDate: Date;
+  type: string;
+};
+
+type BackgroundFormData = {
+  education: Education;
+  experience: Experience;
+  specificYoes: Array<SpecificYoe>;
+  totalYoe: number;
+};
+
+export type SubmitOfferFormData = {
+  background: BackgroundFormData;
+  offers: Array<OfferDetailsFormData>;
+};

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

@@ -8,98 +8,7 @@ import BackgroundForm from '~/components/offers/forms/BackgroundForm';
 import OfferAnalysis from '~/components/offers/forms/OfferAnalysis';
 import OfferDetailsForm from '~/components/offers/forms/OfferDetailsForm';
 import OfferProfileSave from '~/components/offers/forms/OfferProfileSave';
-
+import type { SubmitOfferFormData } from '~/components/offers/types';
-type Money = {
-  currency: string;
-  value: number;
-};
-
-type FullTimeJobData = {
-  base: Money;
-  bonus: Money;
-  level: string;
-  specialization: string;
-  stocks: Money;
-  title: string;
-  totalCompensation: Money;
-};
-
-type FullTimeOfferFormData = {
-  comments: string;
-  companyId: string;
-  job: FullTimeJobData;
-  jobType: string;
-  location: string;
-  monthYearReceived: string;
-  negotiationStrategy: string;
-};
-
-type InternshipJobData = {
-  internshipCycle: string;
-  monthlySalary: Money;
-  specialization: string;
-  startYear: number;
-  title: string;
-};
-
-type InternshipOfferFormData = {
-  comments: string;
-  companyId: string;
-  job: InternshipJobData;
-  jobType: string;
-  location: string;
-  monthYearReceived: string;
-  negotiationStrategy: string;
-};
-
-type OfferDetailsFormData = FullTimeOfferFormData | InternshipOfferFormData;
-
-type SpecificYoe = {
-  domain: string;
-  yoe: number;
-};
-
-type FullTimeExperience = {
-  level: string;
-  totalCompensation: Money;
-};
-
-type InternshipExperience = {
-  monthlySalary: Money;
-};
-
-type GeneralExperience = {
-  companyId: string;
-  durationInMonths: number;
-  jobType: string;
-  specialization: string;
-  title: string;
-};
-
-type Experience =
-  | (FullTimeExperience & GeneralExperience)
-  | (GeneralExperience & InternshipExperience);
-
-type Education = {
-  endDate: Date;
-  field: string;
-  school: string;
-  startDate: Date;
-  type: string;
-};
-
-type BackgroundFormData = {
-  education: Education;
-  experience: Experience;
-  specificYoes: Array<SpecificYoe>;
-  totalYoe: number;
-};
-
-// Export type SubmitOfferFormData
-export type SubmitOfferFormData = {
-  background: BackgroundFormData;
-  offers: Array<OfferDetailsFormData>;
-};
 
 function Breadcrumbs() {
   return (
@@ -109,45 +18,48 @@ function Breadcrumbs() {
   );
 }
 
+const defaultOfferValues = {
+  offers: [
+    {
+      comments: '',
+      companyId: 'Shopee',
+      job: {
+        base: {
+          currency: 'USD',
+          value: 0,
+        },
+        bonus: {
+          currency: 'USD',
+          value: 0,
+        },
+        level: '',
+        specialization: '',
+        stocks: {
+          currency: 'USD',
+          value: 0,
+        },
+        title: '',
+        totalCompensation: {
+          currency: 'USD',
+          value: 0,
+        },
+      },
+      jobType: 'FULLTIME',
+      monthYearReceived: '',
+      negotiationStrategy: '',
+    },
+  ],
+};
+
 export default function OffersSubmissionPage() {
   const [formStep, setFormStep] = useState(0);
   const formMethods = useForm<SubmitOfferFormData>({
-    defaultValues: {
+    defaultValues: defaultOfferValues,
-      offers: [
-        {
-          comments: '',
-          companyId: 'Shopee',
-          job: {
-            base: {
-              currency: 'USD',
-              value: 0,
-            },
-            bonus: {
-              currency: 'USD',
-              value: 0,
-            },
-            level: '',
-            specialization: '',
-            stocks: {
-              currency: 'USD',
-              value: 0,
-            },
-            title: '',
-            totalCompensation: {
-              currency: 'USD',
-              value: 0,
-            },
-          },
-          jobType: 'FULLTIME',
-          monthYearReceived: '',
-          negotiationStrategy: '',
-        },
-      ],
-    },
   });
 
   const nextStep = () => setFormStep(formStep + 1);
   const previousStep = () => setFormStep(formStep - 1);
+
   const formComponents = [
     <OfferDetailsForm key={0} />,
     <BackgroundForm key={1} />,