-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add application form procedure
- Loading branch information
1 parent
82b03db
commit 510d452
Showing
2 changed files
with
204 additions
and
0 deletions.
There are no files selected for viewing
164 changes: 164 additions & 0 deletions
164
apps/hackathon/src/app/_components/userInformation/ApplicationForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
'use client' | ||
import type { FormEvent } from 'react' | ||
import React, { useState } from 'react' | ||
import type { UserInformation } from '@prisma/client' | ||
import { api } from '~/trpc/react' | ||
|
||
interface ApplicationFormProps { | ||
session: { | ||
user: { | ||
id: string | ||
} | ||
} | ||
} | ||
|
||
export function ApplicationForm(props: ApplicationFormProps) { | ||
const [subscribe, setSubscribe] = useState<boolean>(false) | ||
const [formData, setFormData] = useState<UserInformation>({ | ||
id: '1', | ||
email: '', | ||
first_name: '', | ||
last_name: '', | ||
levels_of_study: '', | ||
major: '', | ||
date_of_birth: new Date(0), | ||
gender: '', | ||
phone_number: '', | ||
school: '', | ||
userId: props.session?.user.id || '', | ||
}) | ||
|
||
const submitApplicationForm = api.userInformation.useMutation() | ||
const subscribeToNewsletter = api.subscribeToNewsletter.useMutation() | ||
const handleSubmit = async (e: FormEvent) => { | ||
e.preventDefault() | ||
try { | ||
if (subscribe && formData.email) { | ||
subscribeToNewsletter.mutateAsync({ email: formData.email }) | ||
} | ||
await submitApplicationForm.mutateAsync(formData) | ||
} | ||
catch (error) { | ||
console.error('Error submitting form:', error) | ||
} | ||
} | ||
|
||
const handleSubscribe = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
if (e.target && formData.email) { | ||
setSubscribe(!subscribe) | ||
} | ||
else { | ||
e.target.checked = false | ||
} | ||
} | ||
|
||
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
if (e.target) { | ||
setFormData({ | ||
...formData, | ||
[e.target.name]: e.target.value, | ||
}) | ||
if (e.target.name === 'email' && subscribe) { | ||
handleSubscribe(e) | ||
} | ||
} | ||
} | ||
|
||
return ( | ||
<form onSubmit={handleSubmit}> | ||
<label htmlFor="firstName">First Name</label> | ||
<input | ||
type="text" | ||
id="firstName" | ||
name="first_name" | ||
value={formData.first_name || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="lastName">Last Name</label> | ||
<input | ||
type="text" | ||
id="lastName" | ||
name="last_name" | ||
value={formData.last_name || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="email">Email</label> | ||
<input | ||
type="email" | ||
id="email" | ||
name="email" | ||
value={formData.email || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<input | ||
type="checkbox" | ||
id="subscribe" | ||
name="subscribe" | ||
value={subscribe ? 'true' : 'false'} | ||
checked={subscribe} | ||
onChange={handleSubscribe} | ||
/> | ||
subscribe to newsletter with email | ||
|
||
<label htmlFor="school">School</label> | ||
<input | ||
type="text" | ||
id="school" | ||
value={formData.school || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="major">Major</label> | ||
<input | ||
type="text" | ||
id="major" | ||
name="major" | ||
value={formData.major || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="yearOfStudy">Year of Study</label> | ||
<input | ||
type="text" | ||
id="yearOfStudy" | ||
name="levels_of_study" | ||
value={formData.levels_of_study || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="gender">Gender</label> | ||
<input | ||
type="text" | ||
id="gender" | ||
name="gender" | ||
value={formData.gender || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="dateOfBirth">Date of Birth</label> | ||
<input | ||
type="date" | ||
id="dateOfBirth" | ||
name="date_of_birth" | ||
value={formData.date_of_birth ? formData.date_of_birth.toISOString().split('T')[0] : ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<label htmlFor="phoneNumber">Phone Number</label> | ||
<input | ||
type="tel" | ||
id="phoneNumber" | ||
name="phone_number" | ||
value={formData.phone_number || ''} | ||
onChange={handleOnChange} | ||
/> | ||
|
||
<button type="submit">Submit</button> | ||
</form> | ||
) | ||
}; | ||
|
||
export default ApplicationForm |
40 changes: 40 additions & 0 deletions
40
apps/hackathon/src/server/api/routers/applicationForm/procedures/setUserInformation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { z } from 'zod' | ||
|
||
import { | ||
protectedProcedure, | ||
} from '~/server/api/trpc' | ||
|
||
export const userInformationRouter = protectedProcedure | ||
.input( | ||
z.object({ | ||
id: z.string(), | ||
email: z.string().email().nullable(), | ||
first_name: z.string().nullable(), | ||
last_name: z.string().nullable(), | ||
levels_of_study: z.string().nullable(), | ||
major: z.string().nullable(), | ||
date_of_birth: z.date().nullable(), | ||
gender: z.string().nullable(), | ||
phone_number: z.string().nullable(), | ||
school: z.string().nullable(), | ||
userId: z.string(), | ||
}), | ||
) | ||
.mutation(async ({ ctx, input }) => { | ||
const data = await ctx.db.userInformation.create({ | ||
data: { | ||
id: input.id, | ||
email: input.email, | ||
first_name: input.first_name, | ||
last_name: input.last_name, | ||
levels_of_study: input.levels_of_study, | ||
major: input.major, | ||
date_of_birth: input.date_of_birth, | ||
gender: input.gender, | ||
phone_number: input.phone_number, | ||
school: input.school, | ||
userId: input.userId, | ||
}, | ||
}) | ||
return data | ||
}) |