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

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

@ -1,5 +1,7 @@
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 { 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;
type IFormInput = {
additionalInformation?: string;
experience: string;
file: File;
location: string;
role: string;
title: string;
};
export default function SubmitResumeForm() {
// TODO: Use enums instead
const roleItems = [
{
label: 'Frontend Engineer',
@ -61,7 +73,21 @@ export default function SubmitResumeForm() {
const [experience, setExperience] = useState(experienceItems[0].label);
const [location, setLocation] = useState(locationItems[0].label);
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 file = event.target.files?.item(0);
@ -76,6 +102,24 @@ export default function SubmitResumeForm() {
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 (
<>
<Head>
@ -86,13 +130,13 @@ export default function SubmitResumeForm() {
aria-labelledby="primary-heading"
className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
<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>
<div className="mb-4">
<TextInput
id="title"
{...register('title', { required: true })}
errorMessage={errors?.title && 'Title cannot be empty!'}
label="Title"
name="title"
placeholder={TITLE_PLACEHOLDER}
value={title}
onChange={setTitle}
@ -100,8 +144,8 @@ export default function SubmitResumeForm() {
</div>
<div className="mb-4">
<Select
{...register('role', { required: true })}
label="Role"
name="role"
options={roleItems}
value={role}
onChange={setRole}
@ -109,8 +153,8 @@ export default function SubmitResumeForm() {
</div>
<div className="mb-4">
<Select
{...register('experience', { required: true })}
label="Experience Level"
name="experience"
options={experienceItems}
value={experience}
onChange={setExperience}
@ -118,8 +162,9 @@ export default function SubmitResumeForm() {
</div>
<div className="mb-4">
<Select
{...register('location', { required: true })}
label="Location"
name="experience"
name="location"
options={locationItems}
value={location}
onChange={setLocation}
@ -127,52 +172,55 @@ export default function SubmitResumeForm() {
</div>
<p className="text-sm font-medium text-slate-700">
Upload resume (PDF format)
{invalidFileUploadError && (
<span className="text-danger-600 ml-4 text-sm font-medium">
{invalidFileUploadError}
</span>
)}
</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="space-y-1 text-center">
<div className="flex gap-2">
<PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
{resumeFile && <p>{resumeFile.name}</p>}
</div>
<div className="flex text-sm text-gray-600">
<label
className="relative cursor-pointer rounded-md bg-white font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
htmlFor="file-upload">
<span>Upload a file</span>
<input
className="sr-only"
id="file-upload"
name="file-upload"
type="file"
onChange={onUploadFile}
/>
</label>
<p className="pl-1">or drag and drop</p>
<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="flex gap-2">
<PaperClipIcon className="m-auto h-8 w-8 text-gray-600" />
{resumeFile && <p>{resumeFile.name}</p>}
</div>
<div className="flex text-sm text-gray-600">
<label
className="relative cursor-pointer rounded-md bg-white font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
htmlFor="file-upload">
<span>Upload a file</span>
<input
{...register('file', { required: true })}
className="sr-only"
id="file-upload"
name="file-upload"
type="file"
onChange={onUploadFile}
/>
</label>
<p className="pl-1">or drag and drop</p>
</div>
<p className="text-xs text-gray-500">PDF up to 10MB</p>
</div>
<p className="text-xs text-gray-500">PDF up to 10MB</p>
</div>
{fileUploadError && (
<p className="text-danger-600 text-sm">{fileUploadError}</p>
)}
</div>
<div className="mb-4">
{/* TODO: Use TextInputArea instead */}
<TextInput
{...register('additionalInformation')}
label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
value={additionalInfo}
onChange={setAdditionalInfo}
/>
</div>
<p className="mb-2 text-sm font-medium text-slate-700">
Additional Information
</p>
<textarea
className="w-full rounded-md placeholder:text-slate-400"
name="additonal_information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
/>
<div className="mt-4 flex justify-end gap-4">
<Button
addonPosition="start"
display="inline"
label="Clear"
size="md"
type="reset"
variant="tertiary"
onClick={onReset}
/>
<Button
addonPosition="start"

Write Preview
Loading…
Cancel
Save