Skip to content

Commit 79392ce

Browse files
ruth-avelarruth-avelar
committed
Add all validation in applicant form
1 parent 58f8c9b commit 79392ce

File tree

1 file changed

+64
-53
lines changed

1 file changed

+64
-53
lines changed

‎app/routes/applicationForm.$applicantId._index.tsx

Lines changed: 64 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Header from "../../app/core/layouts/Header";
12
import {
23
Autocomplete,
34
Button,
@@ -19,17 +20,16 @@ import {
1920
useFetcher,
2021
} from "@remix-run/react";
2122
import { withZod } from "@remix-validated-form/with-zod";
22-
import { useEffect, useState } from "react";
23+
import { useState } from "react";
2324
import { ValidatedForm } from "remix-validated-form";
2425
import { z } from "zod";
2526
import { zfd } from "zod-form-data";
2627
import SelectField from "~/core/components/FormFields/SelectField";
2728
import LabeledTextField from "~/core/components/LabeledTextField";
2829
import RegularSelect from "~/core/components/RegularSelect";
30+
import { getApplicantByEmail } from "~/models/applicant.server";
2931
import { getActiveUniversities } from "~/models/university.server";
3032
import { requireProfile } from "~/session.server";
31-
import { getApplicantByEmail } from "~/models/applicant.server";
32-
import Header from "../../app/core/layouts/Header"
3333

3434
export const validator = withZod(
3535
zfd.formData({
@@ -164,7 +164,8 @@ export const loader: LoaderFunction = async ({ request }) => {
164164
};
165165

166166
export default function FormPage() {
167-
const { universities, profile, applicantByEmail } = useLoaderData() as LoaderData;
167+
const { universities, profile, applicantByEmail } =
168+
useLoaderData() as LoaderData;
168169

169170
const [selectedUniversity, setSelectedUniversity] =
170171
useState<UniversityValue | null>({
@@ -194,43 +195,79 @@ export default function FormPage() {
194195
const searchContactsDebounced = debounce(searchContacts, 50);
195196

196197
const [startDate, setStartDate] = useState(getCurrentDate());
197-
const [editMode, setEditMode] = useState(false)
198-
199-
const editForm = async() => {
200-
if (profile.email === applicantByEmail?.email) {
201-
setEditMode(true)
202-
}
203-
}
204-
205-
useEffect( () => {
206-
editForm()
207-
})
208198

209199
return (
210200
<Container>
211-
<Header title="Applicants" applicantId={applicantByEmail?.id.toString()} />
201+
<Header
202+
title="Applicants"
203+
applicantId={applicantByEmail?.id.toString()}
204+
/>
212205
<Paper sx={{ p: 2 }}>
213206
<img src="/HeaderImage.png" alt="Wizeline" style={{ width: "100%" }} />
214207
<Typography component="div" variant="h2">
215208
Application Form
216209
</Typography>
217-
<Typography component="div" variant="body1" style={{ marginBottom: "25px", textAlign:"justify" }}>
210+
<Typography
211+
component="div"
212+
variant="body1"
213+
style={{ marginBottom: "25px", textAlign: "justify" }}
214+
>
218215
Wizeline&rsquo;s Innovation Experience Program is a 3-6 month program
219216
designed to help students transition from the theoretical to the
220217
practical and step into technical specialties. In this program,
221-
participants will immerse in innovation projects with Wizeline industry
222-
experts, where they can make an impact and begin a successful career in
223-
technology.
218+
participants will immerse in innovation projects with Wizeline
219+
industry experts, where they can make an impact and begin a successful
220+
career in technology.
224221
</Typography>
225222
<ValidatedForm
226223
validator={validator}
227-
action="./createapplicant"
224+
//action="./createapplicant"
225+
//TODO: Maybe this is not the correct approach
226+
action={applicantByEmail?.email ? "./editApplicant" : "./createapplicant"}
228227
method="post"
229228
defaultValues={{
230-
//TODO: add the selects info to edit the form
231-
232-
gender: editMode ? applicantByEmail?.gender : ""
233-
229+
personalEmail: profile.email,
230+
fullName: applicantByEmail?.fullName
231+
? applicantByEmail?.fullName
232+
: profile.name,
233+
nationality: applicantByEmail?.nationality ? applicantByEmail.nationality : "",
234+
dayOfBirth: applicantByEmail?.dayOfBirth ? new Date(applicantByEmail.dayOfBirth).toISOString().split('T')[0] : '',
235+
gender: applicantByEmail?.gender ? applicantByEmail?.gender : "",
236+
country: applicantByEmail?.country ? applicantByEmail.country : "",
237+
homeAddress: applicantByEmail?.homeAddress ? applicantByEmail?.homeAddress : "",
238+
phone: applicantByEmail?.phone ? applicantByEmail?.phone : "",
239+
university: applicantByEmail?.universityName
240+
? { id: applicantByEmail?.universityId ?? '', name: applicantByEmail?.universityName }
241+
: { id: '', name: '' },
242+
universityContactId: applicantByEmail?.universityPointOfContactId ? applicantByEmail?.universityPointOfContactId : "",
243+
universityEmail: applicantByEmail?.universityEmail ? applicantByEmail?.universityEmail : "",
244+
emergencyContactName: applicantByEmail?.emergencyContactName ? applicantByEmail?.emergencyContactName : "",
245+
emergencyRelationship: applicantByEmail?.emergencyRelationship ? applicantByEmail?.emergencyRelationship : "",
246+
emergencyContactPhone: applicantByEmail?.emergencyContactPhone ? applicantByEmail?.emergencyContactPhone : "",
247+
experience: applicantByEmail?.experience ? applicantByEmail?.experience : "",
248+
englishLevel: applicantByEmail?.englishLevel ? applicantByEmail?.englishLevel : "",
249+
major: applicantByEmail?.major ? applicantByEmail?.major : "",
250+
graduationDate: applicantByEmail?.graduationDate ? new Date(applicantByEmail.graduationDate).toISOString().split('T')[0] : '',
251+
semester: applicantByEmail?.semester ? applicantByEmail?.semester : "",
252+
interest: applicantByEmail?.interest ? applicantByEmail?.interest : "",
253+
cvLink: applicantByEmail?.cvLink ? applicantByEmail?.cvLink : "",
254+
interestedRoles: applicantByEmail?.interestedRoles ? applicantByEmail?.interestedRoles : "",
255+
preferredTools: applicantByEmail?.preferredTools ? applicantByEmail?.preferredTools : "",
256+
startDate: applicantByEmail?.startDate ? new Date(applicantByEmail.startDate).toISOString().split('T')[0] : '',
257+
endDate: applicantByEmail?.endDate ? new Date(applicantByEmail.endDate).toISOString().split('T')[0] : '',
258+
hoursPerWeek: applicantByEmail?.hoursPerWeek
259+
? applicantByEmail?.hoursPerWeek !== undefined && applicantByEmail?.hoursPerWeek !== null
260+
? applicantByEmail?.hoursPerWeek.toString()
261+
: ""
262+
: "",
263+
howDidYouHearAboutUs: applicantByEmail?.howDidYouHearAboutUs ? applicantByEmail?.howDidYouHearAboutUs : "",
264+
participatedAtWizeline : applicantByEmail?.participatedAtWizeline !== undefined
265+
? applicantByEmail.participatedAtWizeline
266+
? 'Yes'
267+
: 'No'
268+
: '',
269+
wizelinePrograms: applicantByEmail?.wizelinePrograms ? applicantByEmail?.wizelinePrograms : "",
270+
comments: applicantByEmail?.comments ? applicantByEmail?.comments : "",
234271
}}
235272
>
236273
<Grid container spacing={10}>
@@ -242,14 +279,12 @@ export default function FormPage() {
242279
fullWidth
243280
type="email"
244281
style={{ marginBottom: "20px" }}
245-
defaultValue={profile?.email}
246282
/>
247283
<SelectField
248284
name="gender"
249285
label="I identify as:"
250286
options={["Male", "Female", "Non-binary", "Prefer not to say"]}
251287
style={{ width: "100%", marginBottom: "20px" }}
252-
253288
/>
254289
<LabeledTextField
255290
label="Full Name"
@@ -258,7 +293,6 @@ export default function FormPage() {
258293
fullWidth
259294
type="text"
260295
style={{ marginBottom: "20px" }}
261-
defaultValue={profile.name}
262296
/>
263297
<LabeledTextField
264298
label="Nationality"
@@ -267,7 +301,6 @@ export default function FormPage() {
267301
fullWidth
268302
type="text"
269303
style={{ marginBottom: "20px" }}
270-
defaultValue={editMode ? applicantByEmail?.nationality : ''}
271304
/>
272305
<SelectField
273306
name="country"
@@ -281,15 +314,13 @@ export default function FormPage() {
281314
"Vietnam",
282315
]}
283316
style={{ width: "100%", marginBottom: "20px" }}
284-
// value={editMode ? applicantByEmail?.country : ''}
285317
/>
286318
<LabeledTextField
287-
name="dayOfBirth"
288319
label="Date of birth"
320+
name="dayOfBirth"
289321
fullWidth
290322
type="date"
291323
style={{ marginBottom: "20px" }}
292-
293324
/>
294325
<LabeledTextField
295326
label="Home adress"
@@ -298,7 +329,6 @@ export default function FormPage() {
298329
fullWidth
299330
type="text"
300331
style={{ marginBottom: "20px" }}
301-
defaultValue={editMode ? applicantByEmail?.homeAddress : ''}
302332
/>
303333
<LabeledTextField
304334
label="Phone number"
@@ -307,7 +337,6 @@ export default function FormPage() {
307337
fullWidth
308338
type="text"
309339
style={{ marginBottom: "20px" }}
310-
defaultValue={editMode ? applicantByEmail?.phone : ''}
311340
/>
312341
<Typography
313342
component="div"
@@ -324,7 +353,6 @@ export default function FormPage() {
324353
label="University or organization you belong to"
325354
onChange={handleSelectUniversity}
326355
style={{ width: "100%", marginBottom: "20px" }}
327-
328356
/>
329357

330358
<input
@@ -370,7 +398,6 @@ export default function FormPage() {
370398
fullWidth
371399
type="email"
372400
style={{ marginBottom: "20px" }}
373-
defaultValue={editMode ? (applicantByEmail?.universityEmail ?? '') : ''}
374401
/>
375402
<LabeledTextField
376403
label="Name of contact in case of emergency"
@@ -379,7 +406,6 @@ export default function FormPage() {
379406
fullWidth
380407
type="text"
381408
style={{ marginBottom: "20px" }}
382-
defaultValue={editMode ? (applicantByEmail?.emergencyContactName ?? '') : ''}
383409
/>
384410
<SelectField
385411
name="emergencyRelationship"
@@ -397,7 +423,6 @@ export default function FormPage() {
397423
"Wife",
398424
]}
399425
style={{ width: "100%", marginBottom: "20px" }}
400-
// value={editMode ? (applicantByEmail?.emergencyRelationship ?? '') : ''}
401426
/>
402427
<LabeledTextField
403428
label="Emergency phone number"
@@ -406,7 +431,6 @@ export default function FormPage() {
406431
fullWidth
407432
type="text"
408433
style={{ marginBottom: "20px" }}
409-
defaultValue={editMode ? (applicantByEmail?.emergencyContactPhone ?? '') : ''}
410434
/>
411435
<LabeledTextField
412436
label="Professional Experience"
@@ -417,7 +441,6 @@ export default function FormPage() {
417441
multiline
418442
rows={2}
419443
style={{ marginBottom: "20px" }}
420-
defaultValue={editMode ? applicantByEmail?.experience : ''}
421444
/>
422445
</Grid>
423446
<Grid item xs={6}>
@@ -431,7 +454,6 @@ export default function FormPage() {
431454
"Proficient (C1,C2)",
432455
]}
433456
style={{ width: "100%", marginBottom: "20px" }}
434-
// value={editMode ? applicantByEmail?.englishLevel : ''}
435457
/>
436458
<LabeledTextField
437459
label="Degree and field you are studying"
@@ -440,7 +462,6 @@ export default function FormPage() {
440462
fullWidth
441463
type="text"
442464
style={{ marginBottom: "20px" }}
443-
defaultValue={editMode ? applicantByEmail?.major : ''}
444465
/>
445466
<LabeledTextField
446467
label="Semester or period you will be studying while this program runs"
@@ -449,7 +470,6 @@ export default function FormPage() {
449470
fullWidth
450471
type="text"
451472
style={{ marginBottom: "20px" }}
452-
defaultValue={editMode ? applicantByEmail?.semester : ''}
453473
/>
454474
<LabeledTextField
455475
label="Graduation date"
@@ -467,7 +487,6 @@ export default function FormPage() {
467487
multiline
468488
rows={2}
469489
style={{ marginBottom: "20px" }}
470-
defaultValue={editMode ? applicantByEmail?.interest : ''}
471490
/>
472491
<LabeledTextField
473492
label="Link to your CV or LinkedIn profile"
@@ -476,7 +495,6 @@ export default function FormPage() {
476495
fullWidth
477496
type="text"
478497
style={{ marginBottom: "20px" }}
479-
defaultValue={editMode ? applicantByEmail?.cvLink : ''}
480498
/>
481499
<SelectField
482500
name="interestedRoles"
@@ -492,7 +510,6 @@ export default function FormPage() {
492510
"Project Management",
493511
]}
494512
style={{ width: "100%", marginBottom: "20px" }}
495-
// value={editMode ? (applicantByEmail?.interestedRoles ?? '') : ''}
496513
/>
497514
<LabeledTextField
498515
label="Preferred tools, programs, frameworks, programming languages or libraries"
@@ -503,7 +520,6 @@ export default function FormPage() {
503520
multiline
504521
rows={2}
505522
style={{ marginBottom: "20px" }}
506-
defaultValue={editMode ? (applicantByEmail?.preferredTools ?? '') : ''}
507523
/>
508524
<LabeledTextField
509525
label="Preferred start date"
@@ -536,7 +552,6 @@ export default function FormPage() {
536552
fullWidth
537553
type="number"
538554
style={{ marginBottom: "20px" }}
539-
defaultValue={editMode ? (applicantByEmail?.hoursPerWeek !== undefined && applicantByEmail?.hoursPerWeek !== null ? applicantByEmail?.hoursPerWeek.toString() : '') : ''}
540555
/>
541556
<SelectField
542557
name="howDidYouHearAboutUs"
@@ -548,14 +563,12 @@ export default function FormPage() {
548563
"University talk",
549564
]}
550565
style={{ width: "100%", marginBottom: "20px" }}
551-
// value={editMode ? applicantByEmail?.howDidYouHearAboutUs : ''}
552566
/>
553567
<SelectField
554568
name="participatedAtWizeline"
555569
label="Have you participated in any program at Wizeline before?"
556-
options={["Yes", "No"]}
570+
options={['Yes', 'No']}
557571
style={{ width: "100%", marginBottom: "20px" }}
558-
// value={editMode ? (applicantByEmail?.participatedAtWizeline ? 'true' : 'false') : ''}
559572
/>
560573
<SelectField
561574
name="wizelinePrograms"
@@ -568,7 +581,6 @@ export default function FormPage() {
568581
"Does not apply",
569582
]}
570583
style={{ width: "100%", marginBottom: "20px" }}
571-
// value={editMode ? (applicantByEmail?.wizelinePrograms ?? '') : ''}
572584
/>
573585
<LabeledTextField
574586
label="Any additional comments?"
@@ -578,7 +590,6 @@ export default function FormPage() {
578590
multiline
579591
rows={2}
580592
style={{ marginBottom: "20px" }}
581-
defaultValue={editMode ? (applicantByEmail?.comments ?? '') : ''}
582593
/>
583594
<FormControlLabel
584595
control={<Checkbox name="confirmRegistration" required />}

0 commit comments

Comments
 (0)