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

[resumes][fix] fix unauthenticated issue on submit form

Browse Source
pull/422/head
Keane Chan 2 years ago
parent 8e50cc7313
commit 70b102f87e
No known key found for this signature in database
GPG Key ID: 32718398E1E9F87C
1 changed files with 180 additions and 177 deletions
Show Stats Download Patch File Download Diff File

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

@ -74,8 +74,7 @@ export default function SubmitResumeForm({
>(null); >(null);
const [isDialogShown, setIsDialogShown] = useState(false); const [isDialogShown, setIsDialogShown] = useState(false);
const { data: session, status } = useSession(); const { status } = useSession();
const isSessionLoading = status === 'loading';
const router = useRouter(); const router = useRouter();
const trpcContext = trpc.useContext(); const trpcContext = trpc.useContext();
const resumeUpsertMutation = trpc.useMutation('resumes.resume.user.upsert'); const resumeUpsertMutation = trpc.useMutation('resumes.resume.user.upsert');
@ -124,12 +123,10 @@ export default function SubmitResumeForm({
// Route user to sign in if not logged in // Route user to sign in if not logged in
useEffect(() => { useEffect(() => {
if (isSessionLoading) { if (status === 'unauthenticated') {
if (session?.user?.id == null) { router.push('/api/auth/signin');
router.push('/api/auth/signin');
}
} }
}, [isSessionLoading, router, session]); }, [router, status]);
const onSubmit: SubmitHandler<IFormInput> = async (data) => { const onSubmit: SubmitHandler<IFormInput> = async (data) => {
setIsLoading(true); setIsLoading(true);
@ -228,196 +225,202 @@ export default function SubmitResumeForm({
return ( return (
<> <>
{isSessionLoading && ( <Head>
<title>Upload a Resume</title>
</Head>
{status === 'loading' && (
<div className="w-full pt-4"> <div className="w-full pt-4">
{' '} {' '}
<Spinner display="block" size="lg" />{' '} <Spinner display="block" size="lg" />{' '}
</div> </div>
)} )}
<Head> {status === 'authenticated' && (
<title>Upload a Resume</title> <main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto">
</Head> <section
<main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto"> aria-labelledby="primary-heading"
<section className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
aria-labelledby="primary-heading" {/* Reset Dialog component */}
className="flex h-full min-w-0 flex-1 flex-col lg:order-last"> <Dialog
{/* Reset Dialog component */} isShown={isDialogShown}
<Dialog primaryButton={
isShown={isDialogShown} <Button
primaryButton={ display="block"
<Button label="OK"
display="block" variant="primary"
label="OK" onClick={onClickResetDialog}
variant="primary" />
onClick={onClickResetDialog}
/>
}
secondaryButton={
<Button
display="block"
label="Cancel"
variant="tertiary"
onClick={() => setIsDialogShown(false)}
/>
}
title={
isNewForm
? 'Are you sure you want to clear?'
: 'Are you sure you want to leave?'
}
onClose={() => setIsDialogShown(false)}>
Note that your current input will not be saved!
</Dialog>
<form
className="mt-8 w-full max-w-screen-lg space-y-6 self-center rounded-lg bg-white p-10 shadow-lg"
onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-4 text-center text-2xl font-semibold">
{isNewForm ? 'Upload a resume' : 'Update details'}
</h1>
{/* Title Section */}
<TextInput
{...(register('title', { required: true }), {})}
defaultValue={initFormDetails?.title}
disabled={isLoading}
errorMessage={
errors.title?.message != null
? 'Title cannot be empty'
: undefined
} }
label="Title" secondaryButton={
placeholder={TITLE_PLACEHOLDER} <Button
required={true} display="block"
onChange={(val) => onValueChange('title', val)} label="Cancel"
/> variant="tertiary"
<div className="flex gap-8"> onClick={() => setIsDialogShown(false)}
<Select />
{...register('role', { required: true })} }
defaultValue={undefined} title={
isNewForm
? 'Are you sure you want to clear?'
: 'Are you sure you want to leave?'
}
onClose={() => setIsDialogShown(false)}>
Note that your current input will not be saved!
</Dialog>
<form
className="mt-8 w-full max-w-screen-lg space-y-6 self-center rounded-lg bg-white p-10 shadow-lg"
onSubmit={handleSubmit(onSubmit)}>
<h1 className="mb-4 text-center text-2xl font-semibold">
{isNewForm ? 'Upload a resume' : 'Update details'}
</h1>
{/* Title Section */}
<TextInput
{...(register('title', { required: true }), {})}
defaultValue={initFormDetails?.title}
disabled={isLoading} disabled={isLoading}
label="Role" errorMessage={
options={ROLES} errors.title?.message != null
placeholder=" " ? 'Title cannot be empty'
: undefined
}
label="Title"
placeholder={TITLE_PLACEHOLDER}
required={true} required={true}
onChange={(val) => setValue('role', val)} onChange={(val) => onValueChange('title', val)}
/> />
<div className="flex gap-8">
<Select
{...register('role', { required: true })}
defaultValue={undefined}
disabled={isLoading}
label="Role"
options={ROLES}
placeholder=" "
required={true}
onChange={(val) => setValue('role', val)}
/>
<Select
{...register('experience', { required: true })}
disabled={isLoading}
label="Experience Level"
options={EXPERIENCES}
placeholder=" "
required={true}
onChange={(val) => setValue('experience', val)}
/>
</div>
<Select <Select
{...register('experience', { required: true })} {...register('location', { required: true })}
disabled={isLoading} disabled={isLoading}
label="Experience Level" label="Location"
options={EXPERIENCES} options={LOCATIONS}
placeholder=" " placeholder=" "
required={true} required={true}
onChange={(val) => setValue('experience', val)} onChange={(val) => setValue('location', val)}
/> />
</div> {/* Upload resume form */}
<Select {isNewForm && (
{...register('location', { required: true })} <div className="space-y-2">
disabled={isLoading} <p className="text-sm font-medium text-slate-700">
label="Location" Upload resume (PDF format)
options={LOCATIONS} <span aria-hidden="true" className="text-danger-500">
placeholder=" " {' '}
required={true} *
onChange={(val) => setValue('location', val)} </span>
/> </p>
{/* Upload resume form */} <div
{isNewForm && ( {...getRootProps()}
<div className="space-y-2"> className={clsx(
<p className="text-sm font-medium text-slate-700"> fileUploadError
Upload resume (PDF format) ? 'border-danger-600'
<span aria-hidden="true" className="text-danger-500"> : 'border-slate-300',
{' '} 'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
* )}>
</span> <div className="space-y-1 text-center">
</p> {resumeFile == null ? (
<div <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
{...getRootProps()} ) : (
className={clsx( <p
fileUploadError ? 'border-danger-600' : 'border-slate-300', className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4', onClick={onClickDownload}>
)}> {resumeFile.name}
<div className="space-y-1 text-center"> </p>
{resumeFile == null ? ( )}
<ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" /> <div className="flex items-center text-sm">
) : ( <label
<p className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
className="hover:text-primary-600 cursor-pointer underline underline-offset-1" htmlFor="file-upload">
onClick={onClickDownload}> <span className="font-medium">Drop file here</span>
{resumeFile.name} <span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
{resumeFile == null
? 'Select file'
: 'Replace file'}
</span>
<input
{...register('file', { required: true })}
{...getInputProps()}
accept="application/pdf"
className="sr-only"
disabled={isLoading}
id="file-upload"
name="file-upload"
type="file"
/>
</label>
</div>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p> </p>
)}
<div className="flex items-center text-sm">
<label
className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload">
<span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'}
</span>
<input
{...register('file', { required: true })}
{...getInputProps()}
accept="application/pdf"
className="sr-only"
disabled={isLoading}
id="file-upload"
name="file-upload"
type="file"
/>
</label>
</div> </div>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p>
</div> </div>
{fileUploadError && (
<p className="text-danger-600 text-sm">{fileUploadError}</p>
)}
</div> </div>
{fileUploadError && ( )}
<p className="text-danger-600 text-sm">{fileUploadError}</p> {/* Additional Info Section */}
)} <TextArea
</div> {...(register('additionalInfo'),
)} { defaultValue: initFormDetails?.additionalInfo })}
{/* Additional Info Section */}
<TextArea
{...(register('additionalInfo'),
{ defaultValue: initFormDetails?.additionalInfo })}
disabled={isLoading}
label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER}
onChange={(val) => onValueChange('additionalInfo', val)}
/>
{/* Submission Guidelines */}
{isNewForm && (
<>
<SubmissionGuidelines />
<CheckboxInput
{...register('isChecked', { required: true })}
disabled={isLoading}
label="I have read and will follow the guidelines stated."
onChange={(val) => setValue('isChecked', val)}
/>
</>
)}
{/* Clear and Submit Buttons */}
<div className="flex justify-end gap-4">
<Button
addonPosition="start"
disabled={isLoading} disabled={isLoading}
label={isNewForm ? 'Clear' : 'Cancel'} label="Additional Information"
variant="tertiary" placeholder={ADDITIONAL_INFO_PLACEHOLDER}
onClick={onClickClear} onChange={(val) => onValueChange('additionalInfo', val)}
/> />
<Button {/* Submission Guidelines */}
addonPosition="start" {isNewForm && (
disabled={isLoading} <>
isLoading={isLoading} <SubmissionGuidelines />
label="Submit" <CheckboxInput
type="submit" {...register('isChecked', { required: true })}
variant="primary" disabled={isLoading}
/> label="I have read and will follow the guidelines stated."
</div> onChange={(val) => setValue('isChecked', val)}
</form> />
</section> </>
</main> )}
{/* Clear and Submit Buttons */}
<div className="flex justify-end gap-4">
<Button
addonPosition="start"
disabled={isLoading}
label={isNewForm ? 'Clear' : 'Cancel'}
variant="tertiary"
onClick={onClickClear}
/>
<Button
addonPosition="start"
disabled={isLoading}
isLoading={isLoading}
label="Submit"
type="submit"
variant="primary"
/>
</div>
</form>
</section>
</main>
)}
</> </>
); );
} }

Write Preview
Loading…
Cancel
Save