diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx index feb96535..c10bf2f1 100644 --- a/apps/portal/src/pages/resumes/submit.tsx +++ b/apps/portal/src/pages/resumes/submit.tsx @@ -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(null); - const [invalidFileUploadError, setInvalidFileUploadError] = useState(''); + const [invalidFileUploadError, setInvalidFileUploadError] = useState< + string | null + >(null); + const [additionalInfo, setAdditionalInfo] = useState(''); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + + // TODO: Add Create resume mutation + const onSubmit: SubmitHandler = (data) => { + alert(JSON.stringify(data)); + }; const onUploadFile = (event: React.ChangeEvent) => { 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 ( <> @@ -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">
-
+

Upload a resume

- -

or drag and drop

+
+
+
+
+ + {resumeFile &&

{resumeFile.name}

} +
+
+ +

or drag and drop

+
+

PDF up to 10MB

-

PDF up to 10MB

+ {fileUploadError && ( +

{fileUploadError}

+ )} +
+
+ {/* TODO: Use TextInputArea instead */} +
-

- Additional Information -

-