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

[offers][refactor] refactor types and constants

Browse Source
pull/348/head
Ai Ling 3 years ago
parent 26b833b88b
commit 0b13faa5e1
9 changed files with 293 additions and 264 deletions
Show Stats Download Patch File Download Diff File

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

@ -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',
},
];

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

@ -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>

3
apps/portal/src/components/offers/forms/FormRadioList.tsx
Unescape View File

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

5
apps/portal/src/components/offers/forms/FormSelect.tsx
Unescape View File

@ -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)}
/>

3
apps/portal/src/components/offers/forms/FormTextArea.tsx
Unescape View File

@ -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)}

3
apps/portal/src/components/offers/forms/FormTextInput.tsx
Unescape View File

@ -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)}

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

@ -13,98 +13,16 @@ import { Button } from '@tih/ui';
import FormSelect from './FormSelect';
import FormTextArea from './FormTextArea';
import FormTextInput from './FormTextInput';
// eslint-disable-next-line no-shadow
export enum JobType {
FullTime = 'Full-time',
Internship = 'Internship',
}
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',
},
];
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',
},
];
import {
companyOptions,
currencyOptions,
internshipCycleOptions,
locationOptions,
titleOptions,
yearOptions,
} from '../constants';
import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types';
import { JobType } from '../types';
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">

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

@ -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>;
};

160
apps/portal/src/pages/offers/submit.tsx
Unescape View File

@ -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';
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>;
};
import type { SubmitOfferFormData } from '~/components/offers/types';
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: {
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: '',
},
],
},
defaultValues: defaultOfferValues,
});
const nextStep = () => setFormStep(formStep + 1);
const previousStep = () => setFormStep(formStep - 1);
const formComponents = [
<OfferDetailsForm key={0} />,
<BackgroundForm key={1} />,

Write Preview
Loading…
Cancel
Save