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

[resumes][[feat] add validations for resume form

Browse Source
pull/305/head
Keane Chan 3 years ago
parent 9eb70e501d
commit 79d9c39da9
No known key found for this signature in database
GPG Key ID: 32718398E1E9F87C
1 changed files with 91 additions and 43 deletions
Show Stats Download Patch File Download Diff File

90
apps/portal/src/pages/resumes/submit.tsx
Unescape View File

@ -1,5 +1,7 @@
import Head from 'next/head'; import Head from 'next/head';
import { useState } from 'react'; import { useMemo, useState } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { PaperClipIcon } from '@heroicons/react/24/outline'; import { PaperClipIcon } from '@heroicons/react/24/outline';
import { Button, Select, TextInput } from '@tih/ui'; import { Button, Select, TextInput } from '@tih/ui';
@ -10,7 +12,17 @@ const FILE_UPLOAD_ERROR = 'Please upload a PDF file that is less than 10MB.';
const MAX_FILE_SIZE_LIMIT = 10485760; const MAX_FILE_SIZE_LIMIT = 10485760;
type IFormInput = {
additionalInformation?: string;
experience: string;
file: File;
location: string;
role: string;
title: string;
};
export default function SubmitResumeForm() { export default function SubmitResumeForm() {
// TODO: Use enums instead
const roleItems = [ const roleItems = [
{ {
label: 'Frontend Engineer', label: 'Frontend Engineer',
@ -61,7 +73,21 @@ export default function SubmitResumeForm() {
const [experience, setExperience] = useState(experienceItems[0].label); const [experience, setExperience] = useState(experienceItems[0].label);
const [location, setLocation] = useState(locationItems[0].label); const [location, setLocation] = useState(locationItems[0].label);
const [resumeFile, setResumeFile] = useState<File | null>(null); const [resumeFile, setResumeFile] = useState<File | null>(null);
const [invalidFileUploadError, setInvalidFileUploadError] = useState(''); const [invalidFileUploadError, setInvalidFileUploadError] = useState<
string | null
>(null);
const [additionalInfo, setAdditionalInfo] = useState('');
const {
register,
handleSubmit,
formState: { errors },
} = useForm<IFormInput>();
// TODO: Add Create resume mutation
const onSubmit: SubmitHandler<IFormInput> = (data) => {
alert(JSON.stringify(data));
};
const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => { const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.item(0); const file = event.target.files?.item(0);
@ -76,6 +102,24 @@ export default function SubmitResumeForm() {
setResumeFile(file); setResumeFile(file);
}; };
const fileUploadError = useMemo(() => {
if (invalidFileUploadError != null) {
return invalidFileUploadError;
}
if (errors?.file != null) {
return 'Resume cannot be empty!';
}
}, [errors?.file, invalidFileUploadError]);
const onReset = () => {
setTitle('');
setLocation(locationItems[0].label);
setExperience(experienceItems[0].label);
setRole(roleItems[0].label);
setResumeFile(null);
setAdditionalInfo('');
};
return ( return (
<> <>
<Head> <Head>
@ -86,13 +130,13 @@ export default function SubmitResumeForm() {
aria-labelledby="primary-heading" aria-labelledby="primary-heading"
className="flex h-full min-w-0 flex-1 flex-col lg:order-last"> className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
<div className="mx-20 space-y-4 py-8"> <div className="mx-20 space-y-4 py-8">
<form> <form onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-4 text-2xl font-bold">Upload a resume</h1> <h1 className="mb-4 text-2xl font-bold">Upload a resume</h1>
<div className="mb-4"> <div className="mb-4">
<TextInput <TextInput
id="title" {...register('title', { required: true })}
errorMessage={errors?.title && 'Title cannot be empty!'}
label="Title" label="Title"
name="title"
placeholder={TITLE_PLACEHOLDER} placeholder={TITLE_PLACEHOLDER}
value={title} value={title}
onChange={setTitle} onChange={setTitle}
@ -100,8 +144,8 @@ export default function SubmitResumeForm() {
</div> </div>
<div className="mb-4"> <div className="mb-4">
<Select <Select
{...register('role', { required: true })}
label="Role" label="Role"
name="role"
options={roleItems} options={roleItems}
value={role} value={role}
onChange={setRole} onChange={setRole}
@ -109,8 +153,8 @@ export default function SubmitResumeForm() {
</div> </div>
<div className="mb-4"> <div className="mb-4">
<Select <Select
{...register('experience', { required: true })}
label="Experience Level" label="Experience Level"
name="experience"
options={experienceItems} options={experienceItems}
value={experience} value={experience}
onChange={setExperience} onChange={setExperience}
@ -118,8 +162,9 @@ export default function SubmitResumeForm() {
</div> </div>
<div className="mb-4"> <div className="mb-4">
<Select <Select
{...register('location', { required: true })}
label="Location" label="Location"
name="experience" name="location"
options={locationItems} options={locationItems}
value={location} value={location}
onChange={setLocation} onChange={setLocation}
@ -127,13 +172,9 @@ export default function SubmitResumeForm() {
</div> </div>
<p className="text-sm font-medium text-slate-700"> <p className="text-sm font-medium text-slate-700">
Upload resume (PDF format) Upload resume (PDF format)
{invalidFileUploadError && (
<span className="text-danger-600 ml-4 text-sm font-medium">
{invalidFileUploadError}
</span>
)}
</p> </p>
<div className="mb-4 mt-2 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6"> <div className="mb-4">
<div className="mt-2 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6">
<div className="space-y-1 text-center"> <div className="space-y-1 text-center">
<div className="flex gap-2"> <div className="flex gap-2">
<PaperClipIcon className="m-auto h-8 w-8 text-gray-600" /> <PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
@ -145,6 +186,7 @@ export default function SubmitResumeForm() {
htmlFor="file-upload"> htmlFor="file-upload">
<span>Upload a file</span> <span>Upload a file</span>
<input <input
{...register('file', { required: true })}
className="sr-only" className="sr-only"
id="file-upload" id="file-upload"
name="file-upload" name="file-upload"
@ -157,22 +199,28 @@ export default function SubmitResumeForm() {
<p className="text-xs text-gray-500">PDF up to 10MB</p> <p className="text-xs text-gray-500">PDF up to 10MB</p>
</div> </div>
</div> </div>
<p className="mb-2 text-sm font-medium text-slate-700"> {fileUploadError && (
Additional Information <p className="text-danger-600 text-sm">{fileUploadError}</p>
</p> )}
<textarea </div>
className="w-full rounded-md placeholder:text-slate-400" <div className="mb-4">
name="additonal_information" {/* TODO: Use TextInputArea instead */}
<TextInput
{...register('additionalInformation')}
label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER} placeholder={ADDITIONAL_INFO_PLACEHOLDER}
value={additionalInfo}
onChange={setAdditionalInfo}
/> />
</div>
<div className="mt-4 flex justify-end gap-4"> <div className="mt-4 flex justify-end gap-4">
<Button <Button
addonPosition="start" addonPosition="start"
display="inline" display="inline"
label="Clear" label="Clear"
size="md" size="md"
type="reset"
variant="tertiary" variant="tertiary"
onClick={onReset}
/> />
<Button <Button
addonPosition="start" addonPosition="start"

Write Preview
Loading…
Cancel
Save