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

[offers][fix] Fix minor issues in form

Browse Source
pull/398/head
Ai Ling 3 years ago
parent 4fa350964f
commit e3995be147
4 changed files with 65 additions and 86 deletions
Show Stats Download Patch File Download Diff File

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

@ -104,8 +104,8 @@ export const yearOptions = [
export const educationLevelOptions = Object.entries( export const educationLevelOptions = Object.entries(
EducationBackgroundType, EducationBackgroundType,
).map(([key, value]) => ({ ).map(([, value]) => ({
label: key, label: value,
value, value,
})); }));

79
apps/portal/src/components/offers/forms/BackgroundForm.tsx
Unescape View File

@ -5,6 +5,8 @@ import {
companyOptions, companyOptions,
educationFieldOptions, educationFieldOptions,
educationLevelOptions, educationLevelOptions,
emptyOption,
FieldError,
locationOptions, locationOptions,
titleOptions, titleOptions,
} from '~/components/offers/constants'; } from '~/components/offers/constants';
@ -28,44 +30,44 @@ function YoeSection() {
<FormTextInput <FormTextInput
label="Total YOE" label="Total YOE"
placeholder="0" placeholder="0"
required={true}
type="number" type="number"
{...register(`background.totalYoe`, { {...register(`background.totalYoe`, {
required: FieldError.Required,
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
</div> </div>
<div className="grid grid-cols-1 space-x-3"> <Collapsible label="Add specific YOEs by domain">
<Collapsible label="Add specific YOEs by domain"> <div className="mb-5 grid grid-cols-2 space-x-3">
<div className="mb-5 grid grid-cols-2 space-x-3"> <FormTextInput
<FormTextInput label="Specific YOE 1"
label="Specific YOE 1" type="number"
type="number" {...register(`background.specificYoes.0.yoe`, {
{...register(`background.specificYoes.0.yoe`, { valueAsNumber: true,
valueAsNumber: true, })}
})} />
/> <FormTextInput
<FormTextInput label="Specific Domain 1"
label="Specific Domain 1" placeholder="e.g. Frontend"
placeholder="e.g. Frontend" {...register(`background.specificYoes.0.domain`)}
{...register(`background.specificYoes.0.domain`)} />
/> </div>
</div> <div className="mb-5 grid grid-cols-2 space-x-3">
<div className="mb-5 grid grid-cols-2 space-x-3"> <FormTextInput
<FormTextInput label="Specific YOE 2"
label="Specific YOE 2" type="number"
type="number" {...register(`background.specificYoes.1.yoe`, {
{...register(`background.specificYoes.1.yoe`, { valueAsNumber: true,
valueAsNumber: true, })}
})} />
/> <FormTextInput
<FormTextInput label="Specific Domain 2"
label="Specific Domain 2" placeholder="e.g. Backend"
placeholder="e.g. Backend" {...register(`background.specificYoes.1.domain`)}
{...register(`background.specificYoes.1.domain`)} />
/> </div>
</div> </Collapsible>
</Collapsible>
</div>
</div> </div>
</> </>
); );
@ -80,12 +82,14 @@ function FullTimeJobFields() {
display="block" display="block"
label="Title" label="Title"
options={titleOptions} options={titleOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.title`)} {...register(`background.experiences.0.title`)}
/> />
<FormSelect <FormSelect
display="block" display="block"
label="Company" label="Company"
options={companyOptions} options={companyOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.companyId`)} {...register(`background.experiences.0.companyId`)}
/> />
</div> </div>
@ -155,12 +159,14 @@ function InternshipJobFields() {
display="block" display="block"
label="Title" label="Title"
options={titleOptions} options={titleOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.title`)} {...register(`background.experiences.0.title`)}
/> />
<FormSelect <FormSelect
display="block" display="block"
label="Company" label="Company"
options={companyOptions} options={companyOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.company`)} {...register(`background.experiences.0.company`)}
/> />
</div> </div>
@ -195,6 +201,7 @@ function InternshipJobFields() {
display="block" display="block"
label="Location" label="Location"
options={locationOptions} options={locationOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.location`)} {...register(`background.experiences.0.location`)}
/> />
</div> </div>
@ -258,12 +265,14 @@ function EducationSection() {
display="block" display="block"
label="Education Level" label="Education Level"
options={educationLevelOptions} options={educationLevelOptions}
placeholder={emptyOption}
{...register(`background.educations.0.type`)} {...register(`background.educations.0.type`)}
/> />
<FormSelect <FormSelect
display="block" display="block"
label="Field" label="Field"
options={educationFieldOptions} options={educationFieldOptions}
placeholder={emptyOption}
{...register(`background.educations.0.field`)} {...register(`background.educations.0.field`)}
/> />
</div> </div>
@ -287,9 +296,9 @@ export default function BackgroundForm() {
<h5 className="mb-2 text-center text-4xl font-bold text-gray-900"> <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
Help us better gauge your offers Help us better gauge your offers
</h5> </h5>
<h6 className="mx-10 mb-8 text-center text-lg font-light text-gray-600"> <h6 className="text-md mx-10 mb-8 text-center font-light text-gray-600">
This section is optional, but your background information helps us This section is mostly optional, but your background information helps
benchmark your offers. us benchmark your offers.
</h6> </h6>
<div> <div>
<YoeSection /> <YoeSection />

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

@ -1,5 +1,9 @@
import { useEffect, useState } from 'react'; 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 { 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';
@ -35,12 +39,12 @@ import { CURRENCY_OPTIONS } from '../../../utils/offers/currency/CurrencyEnum';
type FullTimeOfferDetailsFormProps = Readonly<{ type FullTimeOfferDetailsFormProps = Readonly<{
index: number; index: number;
setDialogOpen: (isOpen: boolean) => void; remove: UseFieldArrayRemove;
}>; }>;
function FullTimeOfferDetailsForm({ function FullTimeOfferDetailsForm({
index, index,
setDialogOpen, remove,
}: FullTimeOfferDetailsFormProps) { }: FullTimeOfferDetailsFormProps) {
const { register, formState, setValue } = useFormContext<{ const { register, formState, setValue } = useFormContext<{
offers: Array<FullTimeOfferDetailsFormData>; offers: Array<FullTimeOfferDetailsFormData>;
@ -103,7 +107,7 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </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 <FormSelect
display="block" display="block"
errorMessage={offerFields?.location?.message} errorMessage={offerFields?.location?.message}
@ -254,7 +258,7 @@ function FullTimeOfferDetailsForm({
icon={TrashIcon} icon={TrashIcon}
label="Delete" label="Delete"
variant="secondary" variant="secondary"
onClick={() => setDialogOpen(true)} onClick={() => remove(index)}
/> />
)} )}
</div> </div>
@ -264,12 +268,12 @@ function FullTimeOfferDetailsForm({
type InternshipOfferDetailsFormProps = Readonly<{ type InternshipOfferDetailsFormProps = Readonly<{
index: number; index: number;
setDialogOpen: (isOpen: boolean) => void; remove: UseFieldArrayRemove;
}>; }>;
function InternshipOfferDetailsForm({ function InternshipOfferDetailsForm({
index, index,
setDialogOpen, remove,
}: InternshipOfferDetailsFormProps) { }: InternshipOfferDetailsFormProps) {
const { register, formState } = useFormContext<{ const { register, formState } = useFormContext<{
offers: Array<InternshipOfferDetailsFormData>; offers: Array<InternshipOfferDetailsFormData>;
@ -410,7 +414,7 @@ function InternshipOfferDetailsForm({
label="Delete" label="Delete"
variant="secondary" variant="secondary"
onClick={() => { onClick={() => {
setDialogOpen(true); remove(index);
}} }}
/> />
)} )}
@ -429,7 +433,6 @@ function OfferDetailsFormArray({
jobType, jobType,
}: OfferDetailsFormArrayProps) { }: OfferDetailsFormArrayProps) {
const { append, remove, fields } = fieldArrayValues; const { append, remove, fields } = fieldArrayValues;
const [isDialogOpen, setDialogOpen] = useState(false);
return ( return (
<div> <div>
@ -437,44 +440,10 @@ function OfferDetailsFormArray({
return ( return (
<div key={item.id}> <div key={item.id}>
{jobType === JobType.FullTime ? ( {jobType === JobType.FullTime ? (
<FullTimeOfferDetailsForm <FullTimeOfferDetailsForm index={index} remove={remove} />
index={index}
setDialogOpen={setDialogOpen}
/>
) : ( ) : (
<InternshipOfferDetailsForm <InternshipOfferDetailsForm index={index} remove={remove} />
index={index}
setDialogOpen={setDialogOpen}
/>
)} )}
<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> </div>
); );
})} })}
@ -501,15 +470,16 @@ export default function OfferDetailsForm() {
const [isDialogOpen, setDialogOpen] = useState(false); const [isDialogOpen, setDialogOpen] = useState(false);
const { control } = useFormContext(); const { control } = useFormContext();
const fieldArrayValues = useFieldArray({ control, name: 'offers' }); const fieldArrayValues = useFieldArray({ control, name: 'offers' });
const { append, remove } = fieldArrayValues;
const toggleJobType = () => { const toggleJobType = () => {
fieldArrayValues.remove(); remove();
if (jobType === JobType.FullTime) { if (jobType === JobType.FullTime) {
setJobType(JobType.Internship); setJobType(JobType.Internship);
fieldArrayValues.append(defaultInternshipOfferValues); append(defaultInternshipOfferValues);
} else { } else {
setJobType(JobType.FullTime); setJobType(JobType.FullTime);
fieldArrayValues.append(defaultFullTimeOfferValues); append(defaultFullTimeOfferValues);
} }
}; };

2
apps/portal/src/components/offers/types.ts
Unescape View File

@ -20,7 +20,7 @@ export enum EducationBackgroundType {
Masters = 'Masters', Masters = 'Masters',
PhD = 'PhD', PhD = 'PhD',
Professional = 'Professional', Professional = 'Professional',
Seconday = 'Secondary', Secondary = 'Secondary',
SelfTaught = 'Self-taught', SelfTaught = 'Self-taught',
} }

Write Preview
Loading…
Cancel
Save