[resumes][refactor] clean up submit form

pull/415/head
Keane Chan 3 years ago
parent 7bd6b0eeac
commit 00bad17f36
No known key found for this signature in database
GPG Key ID: 32718398E1E9F87C

@ -1,22 +1,21 @@
export default function SubmissionGuidelines() { export default function SubmissionGuidelines() {
return ( return (
<div className="mb-4 text-left text-sm text-slate-700"> <div className="text-left text-sm text-slate-700">
<h2 className="mb-2 text-xl font-medium">Submission Guidelines</h2> <h2 className="mb-2 text-xl font-medium">Submission Guidelines</h2>
<p> <p>
Before you submit, please review and acknolwedge our Before you submit, please review and acknowledge our
<span className="font-bold"> submission guidelines </span> <span className="font-bold"> submission guidelines </span>
stated below. stated below.
</p> </p>
<p> <p>
<span className="text-lg font-bold"> </span> <span className="text-lg font-bold"> </span>
Ensure that you do not divulge any of your Ensure that you do not divulge any of your{' '}
<span className="font-bold">personal particulars</span>. <span className="font-bold">personal particulars</span>.
</p> </p>
<p> <p>
<span className="text-lg font-bold"> </span> <span className="text-lg font-bold"> </span>
Ensure that you do not divulge any Ensure that you do not divulge any{' '}
<span className="font-bold"> <span className="font-bold">
{' '}
company's proprietary and confidential information company's proprietary and confidential information
</span> </span>
. .

@ -46,6 +46,8 @@ type IFormInput = {
title: string; title: string;
}; };
type InputKeys = keyof IFormInput;
type InitFormDetails = { type InitFormDetails = {
additionalInfo?: string; additionalInfo?: string;
experience: string; experience: string;
@ -218,6 +220,10 @@ export default function SubmitResumeForm({
} }
}, [errors?.file, invalidFileUploadError]); }, [errors?.file, invalidFileUploadError]);
const onValueChange = (section: InputKeys, value: string) => {
setValue(section, value.trim(), { shouldTouch: false });
};
return ( return (
<> <>
<Head> <Head>
@ -269,7 +275,7 @@ export default function SubmitResumeForm({
required={true} required={true}
onChange={(val) => setValue('title', val)} onChange={(val) => setValue('title', val)}
/> />
<div className="flex gap-12"> <div className="flex gap-8">
<Select <Select
{...register('role', { required: true })} {...register('role', { required: true })}
defaultValue={undefined} defaultValue={undefined}
@ -301,7 +307,7 @@ export default function SubmitResumeForm({
/> />
{/* Upload resume form */} {/* Upload resume form */}
{isNewForm && ( {isNewForm && (
<> <div className="space-y-2">
<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)
<span aria-hidden="true" className="text-danger-500"> <span aria-hidden="true" className="text-danger-500">
@ -309,12 +315,11 @@ export default function SubmitResumeForm({
* *
</span> </span>
</p> </p>
<div className="mb-4">
<div <div
{...getRootProps()} {...getRootProps()}
className={clsx( className={clsx(
fileUploadError ? 'border-danger-600' : 'border-gray-300', fileUploadError ? 'border-danger-600' : 'border-gray-300',
'mt-2 flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 px-6 pt-5 pb-6', 'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 py-4',
)}> )}>
<div className="space-y-1 text-center"> <div className="space-y-1 text-center">
{resumeFile == null ? ( {resumeFile == null ? (
@ -330,14 +335,10 @@ export default function SubmitResumeForm({
<label <label
className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2" className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
htmlFor="file-upload"> htmlFor="file-upload">
<span className="mt-2 font-medium"> <span className="font-medium">Drop file here</span>
Drop file here
</span>
<span className="mr-1 ml-1 font-light">or</span> <span className="mr-1 ml-1 font-light">or</span>
<span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400"> <span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
{resumeFile == null {resumeFile == null ? 'Select file' : 'Replace file'}
? 'Select file'
: 'Replace file'}
</span> </span>
<input <input
{...register('file', { required: true })} {...register('file', { required: true })}
@ -360,15 +361,14 @@ export default function SubmitResumeForm({
<p className="text-danger-600 text-sm">{fileUploadError}</p> <p className="text-danger-600 text-sm">{fileUploadError}</p>
)} )}
</div> </div>
</>
)} )}
{/* Additional Info Section */} {/* Additional Info Section */}
<TextArea <TextArea
{...register('additionalInfo')} {...(register('additionalInfo'), {})}
disabled={isLoading} disabled={isLoading}
label="Additional Information" label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER} placeholder={ADDITIONAL_INFO_PLACEHOLDER}
onChange={(val) => setValue('additionalInfo', val)} onChange={(val) => onValueChange('additionalInfo', val)}
/> />
{/* Submission Guidelines */} {/* Submission Guidelines */}
{isNewForm && ( {isNewForm && (

Loading…
Cancel
Save