msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[offers][fix] Auto change currency according to TC currency

Browse Source
pull/366/head
Ai Ling 3 years ago
parent 7cb84a58ca
commit 603d86035c
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File

4
apps/portal/src/components/offers/constants.ts
Unescape View File

@ -136,5 +136,7 @@ export const educationFieldOptions = [
]; ];
export enum FieldError { export enum FieldError {
required = 'Please fill in this field.', NonNegativeNumber = 'Please fill in a non-negative number in this field.',
Number = 'Please fill in a number in this field.',
Required = 'Please fill in this field.',
} }

67
apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
Unescape View File

@ -1,5 +1,6 @@
import { useState } from 'react'; import { useEffect, useState } from 'react';
import type { FieldValues, UseFieldArrayReturn } from 'react-hook-form'; import type { FieldValues, UseFieldArrayReturn } from 'react-hook-form';
import { useWatch } from 'react-hook-form';
import { useFormContext } from 'react-hook-form'; import { useFormContext } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form'; import { useFieldArray } from 'react-hook-form';
import { PlusIcon } from '@heroicons/react/20/solid'; import { PlusIcon } from '@heroicons/react/20/solid';
@ -35,12 +36,21 @@ function FullTimeOfferDetailsForm({
index, index,
setDialogOpen, setDialogOpen,
}: FullTimeOfferDetailsFormProps) { }: FullTimeOfferDetailsFormProps) {
const { register, formState } = useFormContext<{ const { register, formState, setValue } = useFormContext<{
offers: Array<FullTimeOfferDetailsFormData>; offers: Array<FullTimeOfferDetailsFormData>;
}>(); }>();
const jobFields = formState.errors.offers?.[index]?.job; const jobFields = formState.errors.offers?.[index]?.job;
const watchCurrency = useWatch({
name: `offers.${index}.job.totalCompensation.currency`,
});
useEffect(() => {
setValue(`offers.${index}.job.base.currency`, watchCurrency);
setValue(`offers.${index}.job.bonus.currency`, watchCurrency);
setValue(`offers.${index}.job.stocks.currency`, watchCurrency);
}, [watchCurrency, index, setValue]);
return ( return (
<div className="my-5 rounded-lg border border-gray-200 px-10 py-5"> <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="mb-5 grid grid-cols-2 space-x-3">
@ -50,7 +60,7 @@ function FullTimeOfferDetailsForm({
options={titleOptions} options={titleOptions}
required={true} required={true}
{...register(`offers.${index}.job.title`, { {...register(`offers.${index}.job.title`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormTextInput <FormTextInput
@ -59,7 +69,7 @@ function FullTimeOfferDetailsForm({
placeholder="e.g. Front End" placeholder="e.g. Front End"
required={true} required={true}
{...register(`offers.${index}.job.specialization`, { {...register(`offers.${index}.job.specialization`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -70,7 +80,7 @@ function FullTimeOfferDetailsForm({
options={companyOptions} options={companyOptions}
required={true} required={true}
{...register(`offers.${index}.companyId`, { {...register(`offers.${index}.companyId`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormTextInput <FormTextInput
@ -79,7 +89,7 @@ function FullTimeOfferDetailsForm({
placeholder="e.g. L4, Junior" placeholder="e.g. L4, Junior"
required={true} required={true}
{...register(`offers.${index}.job.level`, { {...register(`offers.${index}.job.level`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -90,12 +100,12 @@ function FullTimeOfferDetailsForm({
options={locationOptions} options={locationOptions}
required={true} required={true}
{...register(`offers.${index}.location`, { {...register(`offers.${index}.location`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormMonthYearPicker <FormMonthYearPicker
{...register(`offers.${index}.monthYearReceived`, { {...register(`offers.${index}.monthYearReceived`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -108,7 +118,7 @@ function FullTimeOfferDetailsForm({
label="Currency" label="Currency"
options={CURRENCY_OPTIONS} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.totalCompensation.currency`, { {...register(`offers.${index}.job.totalCompensation.currency`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
} }
@ -121,7 +131,8 @@ function FullTimeOfferDetailsForm({
startAddOnType="label" startAddOnType="label"
type="number" type="number"
{...register(`offers.${index}.job.totalCompensation.value`, { {...register(`offers.${index}.job.totalCompensation.value`, {
required: FieldError.required, min: { message: FieldError.NonNegativeNumber, value: 0 },
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@ -135,7 +146,7 @@ function FullTimeOfferDetailsForm({
label="Currency" label="Currency"
options={CURRENCY_OPTIONS} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.base.currency`, { {...register(`offers.${index}.job.base.currency`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
} }
@ -148,7 +159,8 @@ function FullTimeOfferDetailsForm({
startAddOnType="label" startAddOnType="label"
type="number" type="number"
{...register(`offers.${index}.job.base.value`, { {...register(`offers.${index}.job.base.value`, {
required: FieldError.required, min: { message: FieldError.NonNegativeNumber, value: 0 },
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@ -160,7 +172,7 @@ function FullTimeOfferDetailsForm({
label="Currency" label="Currency"
options={CURRENCY_OPTIONS} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.bonus.currency`, { {...register(`offers.${index}.job.bonus.currency`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
} }
@ -173,7 +185,8 @@ function FullTimeOfferDetailsForm({
startAddOnType="label" startAddOnType="label"
type="number" type="number"
{...register(`offers.${index}.job.bonus.value`, { {...register(`offers.${index}.job.bonus.value`, {
required: FieldError.required, min: { message: FieldError.NonNegativeNumber, value: 0 },
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@ -187,7 +200,7 @@ function FullTimeOfferDetailsForm({
label="Currency" label="Currency"
options={CURRENCY_OPTIONS} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.stocks.currency`, { {...register(`offers.${index}.job.stocks.currency`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
} }
@ -200,7 +213,8 @@ function FullTimeOfferDetailsForm({
startAddOnType="label" startAddOnType="label"
type="number" type="number"
{...register(`offers.${index}.job.stocks.value`, { {...register(`offers.${index}.job.stocks.value`, {
required: FieldError.required, min: { message: FieldError.NonNegativeNumber, value: 0 },
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@ -258,7 +272,7 @@ function InternshipOfferDetailsForm({
required={true} required={true}
{...register(`offers.${index}.job.title`, { {...register(`offers.${index}.job.title`, {
minLength: 1, minLength: 1,
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormTextInput <FormTextInput
@ -268,7 +282,7 @@ function InternshipOfferDetailsForm({
required={true} required={true}
{...register(`offers.${index}.job.specialization`, { {...register(`offers.${index}.job.specialization`, {
minLength: 1, minLength: 1,
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -279,7 +293,7 @@ function InternshipOfferDetailsForm({
options={companyOptions} options={companyOptions}
required={true} required={true}
{...register(`offers.${index}.companyId`, { {...register(`offers.${index}.companyId`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormSelect <FormSelect
@ -288,7 +302,7 @@ function InternshipOfferDetailsForm({
options={locationOptions} options={locationOptions}
required={true} required={true}
{...register(`offers.${index}.location`, { {...register(`offers.${index}.location`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -299,7 +313,7 @@ function InternshipOfferDetailsForm({
options={internshipCycleOptions} options={internshipCycleOptions}
required={true} required={true}
{...register(`offers.${index}.job.internshipCycle`, { {...register(`offers.${index}.job.internshipCycle`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
<FormSelect <FormSelect
@ -308,7 +322,7 @@ function InternshipOfferDetailsForm({
options={yearOptions} options={yearOptions}
required={true} required={true}
{...register(`offers.${index}.job.startYear`, { {...register(`offers.${index}.job.startYear`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -316,7 +330,7 @@ function InternshipOfferDetailsForm({
<p className="text-sm">Date received:</p> <p className="text-sm">Date received:</p>
<FormMonthYearPicker <FormMonthYearPicker
{...register(`offers.${index}.monthYearReceived`, { {...register(`offers.${index}.monthYearReceived`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
</div> </div>
@ -329,7 +343,7 @@ function InternshipOfferDetailsForm({
label="Currency" label="Currency"
options={CURRENCY_OPTIONS} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.monthlySalary.currency`, { {...register(`offers.${index}.job.monthlySalary.currency`, {
required: FieldError.required, required: FieldError.Required,
})} })}
/> />
} }
@ -342,7 +356,8 @@ function InternshipOfferDetailsForm({
startAddOnType="label" startAddOnType="label"
type="number" type="number"
{...register(`offers.${index}.job.monthlySalary.value`, { {...register(`offers.${index}.job.monthlySalary.value`, {
required: FieldError.required, min: { message: FieldError.NonNegativeNumber, value: 0 },
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />

Write Preview
Loading…
Cancel
Save