From db6ac5d701718b5eb3cdb28356aa8996f09a6178 Mon Sep 17 00:00:00 2001 From: Ai Ling Date: Mon, 10 Oct 2022 13:11:28 +0800 Subject: [PATCH] [offers][style] style offers form --- .../portal/src/components/offers/constants.ts | 70 ++++++++++++------- .../offers/forms/BackgroundForm.tsx | 29 ++++---- .../offers/forms/OfferDetailsForm.tsx | 28 ++++---- .../offers/profile/EducationCard.tsx | 12 +--- apps/portal/src/components/offers/types.ts | 14 +++- apps/portal/src/pages/offers/submit.tsx | 5 +- 6 files changed, 92 insertions(+), 66 deletions(-) diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts index 09e11240..2a09e9b5 100644 --- a/apps/portal/src/components/offers/constants.ts +++ b/apps/portal/src/components/offers/constants.ts @@ -1,5 +1,13 @@ +import { EducationBackgroundType } from './types'; + +const emptyOption = { + label: '----', + value: '', +}; + // TODO: use enums export const titleOptions = [ + emptyOption, { label: 'Software engineer', value: 'Software engineer', @@ -18,36 +26,48 @@ export const titleOptions = [ }, ]; -export const currencyOptions = [ +export const companyOptions = [ + emptyOption, { - label: 'USD', - value: 'USD', + label: 'Bytedance', + value: 'id-abc123', }, { - label: 'SGD', - value: 'SGD', + label: 'Google', + value: 'id-abc567', }, { - label: 'EUR', - value: 'EUR', + label: 'Meta', + value: 'id-abc456', }, -]; - -export const companyOptions = [ { label: 'Shopee', - value: 'id-abc123', + value: 'id-abc345', + }, + { + label: 'Tik Tok', + value: 'id-abc678', }, ]; export const locationOptions = [ + emptyOption, { label: 'Singapore, Singapore', value: 'Singapore, Singapore', }, + { + label: 'New York, US', + value: 'New York, US', + }, + { + label: 'San Francisco, US', + value: 'San Francisco, US', + }, ]; export const internshipCycleOptions = [ + emptyOption, { label: 'Summer', value: 'Summer', @@ -65,12 +85,13 @@ export const internshipCycleOptions = [ value: 'Fall', }, { - label: 'Full-year', - value: 'Full-year', + label: 'Full year', + value: 'Full year', }, ]; export const yearOptions = [ + emptyOption, { label: '2021', value: '2021', @@ -89,22 +110,17 @@ export const yearOptions = [ }, ]; -export const educationLevelOptions = [ - { - label: 'Bachelor', - value: 'Bachelor', - }, - { - label: 'Masters', - value: 'Masters', - }, - { - label: 'Doctorate', - value: 'Doctorate', - }, -]; +const educationBackgroundTypes = Object.entries(EducationBackgroundType).map( + ([key, value]) => ({ + label: key, + value, + }), +); + +export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes]; export const educationFieldOptions = [ + emptyOption, { label: 'Computer Science', value: 'Computer Science', diff --git a/apps/portal/src/components/offers/forms/BackgroundForm.tsx b/apps/portal/src/components/offers/forms/BackgroundForm.tsx index 94e478e9..0acbbe69 100644 --- a/apps/portal/src/components/offers/forms/BackgroundForm.tsx +++ b/apps/portal/src/components/offers/forms/BackgroundForm.tsx @@ -1,4 +1,4 @@ -import { useFormContext } from 'react-hook-form'; +import { useFormContext, useWatch } from 'react-hook-form'; import { Collapsible, RadioList } from '@tih/ui'; import FormRadioList from './FormRadioList'; @@ -6,12 +6,13 @@ import FormSelect from './FormSelect'; import FormTextInput from './FormTextInput'; import { companyOptions, - currencyOptions, educationFieldOptions, educationLevelOptions, locationOptions, titleOptions, } from '../constants'; +import { JobType } from '../types'; +import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum'; function YoeSection() { const { register } = useFormContext(); @@ -25,6 +26,7 @@ function YoeSection() {
@@ -87,7 +89,7 @@ function FullTimeJobFields() { borderStyle="borderless" isLabelHidden={true} label="Currency" - options={currencyOptions} + options={CURRENCY_OPTIONS} {...register(`background.experience.totalCompensation.currency`)} /> } @@ -156,7 +158,7 @@ function InternshipJobFields() { borderStyle="borderless" isLabelHidden={true} label="Currency" - options={currencyOptions} + options={CURRENCY_OPTIONS} {...register(`background.experience.monthlySalary.currency`)} /> } @@ -189,8 +191,11 @@ function InternshipJobFields() { } function CurrentJobSection() { - const { register, watch } = useFormContext(); - const watchJobType = watch('background.experience.jobType', 'FULLTIME'); + const { register } = useFormContext(); + const watchJobType = useWatch({ + defaultValue: JobType.FullTime, + name: 'background.experience.jobType', + }); return ( <> @@ -200,7 +205,7 @@ function CurrentJobSection() {
- {watchJobType === 'Full-time' ? ( + {watchJobType === JobType.FullTime ? ( ) : ( @@ -250,7 +255,7 @@ function EducationSection() { />
-
+
Help us better gauge your offers -
+
This section is optional, but your background information helps us benchmark your offers.
diff --git a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx index 2acf90f2..6266994f 100644 --- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx +++ b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx @@ -15,7 +15,6 @@ import FormTextArea from './FormTextArea'; import FormTextInput from './FormTextInput'; import { companyOptions, - currencyOptions, internshipCycleOptions, locationOptions, titleOptions, @@ -23,6 +22,7 @@ import { } from '../constants'; import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types'; import { JobType } from '../types'; +import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum'; type FullTimeOfferDetailsFormProps = Readonly<{ index: number; @@ -39,7 +39,7 @@ function FullTimeOfferDetailsForm({ return (
-
+
+
+
-
-
+
+
-
+
} @@ -137,7 +139,7 @@ function FullTimeOfferDetailsForm({ borderStyle="borderless" isLabelHidden={true} label="Currency" - options={currencyOptions} + options={CURRENCY_OPTIONS} {...register(`offers.${index}.job.bonus.currency`)} /> } @@ -150,13 +152,15 @@ function FullTimeOfferDetailsForm({ type="number" {...register(`offers.${index}.job.bonus.value`)} /> +
+
} @@ -316,7 +320,7 @@ function InternshipOfferDetailsForm({ borderStyle="borderless" isLabelHidden={true} label="Currency" - options={currencyOptions} + options={CURRENCY_OPTIONS} {...register(`offers.${index}.job.monthlySalary.currency`)} /> } @@ -381,7 +385,7 @@ export default function OfferDetailsForm() {