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

[resumes][chore] Remove tracking of state in submit form ()

Browse Source 
* [resumes][chore] remove tracking of state

* [feat][resumes] make value in Select optional

* [resumes][chore] remove default value for textinput

* [resumes][feat] use primary button for submit
pull/310/head
Keane Chan 3 years ago committed by GitHub
parent 64c5275062
commit 4d92a70321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 27 deletions

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

@ -68,25 +68,23 @@ export default function SubmitResumeForm() {
}, },
]; ];
const [title, setTitle] = useState(''); const [resumeFile, setResumeFile] = useState<File | null>();
const [role, setRole] = useState(roleItems[0].label);
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 string | null
>(null); >(null);
const [additionalInfo, setAdditionalInfo] = useState('');
const { const {
register, register,
handleSubmit, handleSubmit,
setValue,
reset,
formState: { errors }, formState: { errors },
} = useForm<IFormInput>(); } = useForm<IFormInput>();
// TODO: Add Create resume mutation // TODO: Add Create resume mutation
const onSubmit: SubmitHandler<IFormInput> = (data) => { const onSubmit: SubmitHandler<IFormInput> = (data) => {
alert(JSON.stringify(data)); alert(JSON.stringify(data));
onClickReset();
}; };
const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => { const onUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -102,6 +100,11 @@ export default function SubmitResumeForm() {
setResumeFile(file); setResumeFile(file);
}; };
const onClickReset = () => {
reset();
setResumeFile(null);
};
const fileUploadError = useMemo(() => { const fileUploadError = useMemo(() => {
if (invalidFileUploadError != null) { if (invalidFileUploadError != null) {
return invalidFileUploadError; return invalidFileUploadError;
@ -111,15 +114,6 @@ export default function SubmitResumeForm() {
} }
}, [errors?.file, invalidFileUploadError]); }, [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>
@ -138,8 +132,7 @@ export default function SubmitResumeForm() {
errorMessage={errors?.title && 'Title cannot be empty!'} errorMessage={errors?.title && 'Title cannot be empty!'}
label="Title" label="Title"
placeholder={TITLE_PLACEHOLDER} placeholder={TITLE_PLACEHOLDER}
value={title} onChange={(val) => setValue('title', val)}
onChange={setTitle}
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4">
@ -147,8 +140,7 @@ export default function SubmitResumeForm() {
{...register('role', { required: true })} {...register('role', { required: true })}
label="Role" label="Role"
options={roleItems} options={roleItems}
value={role} onChange={(val) => setValue('role', val)}
onChange={setRole}
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4">
@ -156,8 +148,7 @@ export default function SubmitResumeForm() {
{...register('experience', { required: true })} {...register('experience', { required: true })}
label="Experience Level" label="Experience Level"
options={experienceItems} options={experienceItems}
value={experience} onChange={(val) => setValue('experience', val)}
onChange={setExperience}
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4">
@ -166,8 +157,7 @@ export default function SubmitResumeForm() {
label="Location" label="Location"
name="location" name="location"
options={locationItems} options={locationItems}
value={location} onChange={(val) => setValue('location', val)}
onChange={setLocation}
/> />
</div> </div>
<p className="text-sm font-medium text-slate-700"> <p className="text-sm font-medium text-slate-700">
@ -209,8 +199,7 @@ export default function SubmitResumeForm() {
{...register('additionalInformation')} {...register('additionalInformation')}
label="Additional Information" label="Additional Information"
placeholder={ADDITIONAL_INFO_PLACEHOLDER} placeholder={ADDITIONAL_INFO_PLACEHOLDER}
value={additionalInfo} onChange={(val) => setValue('additionalInformation', val)}
onChange={setAdditionalInfo}
/> />
</div> </div>
<div className="mt-4 flex justify-end gap-4"> <div className="mt-4 flex justify-end gap-4">
@ -220,7 +209,7 @@ export default function SubmitResumeForm() {
label="Clear" label="Clear"
size="md" size="md"
variant="tertiary" variant="tertiary"
onClick={onReset} onClick={onClickReset}
/> />
<Button <Button
addonPosition="start" addonPosition="start"
@ -228,7 +217,7 @@ export default function SubmitResumeForm() {
label="Submit" label="Submit"
size="md" size="md"
type="submit" type="submit"
variant="tertiary" variant="primary"
/> />
</div> </div>
</form> </form>

Write Preview
Loading…
Cancel
Save