Skip to content

Commit

Permalink
Collapse row
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickbar01234
nickbar01234 committed Apr 16, 2024
1 parent 3a65d8f commit 0664847
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 133 deletions.
35 changes: 26 additions & 9 deletions src/app/api/chapter-request/route.schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,38 @@ import { z } from "zod";
questions String
*/
export const ChapterRequest = z.object({
firstName: z.string().min(1, "Please provide a first name"),
lastName: z.string().min(1, "Please provide a last name"),
universityEmail: z.string().email("This is not a valid email"),
firstName: z
.string()
.min(1, "Please provide a first name")
.max(100, "You can provide at most 100 characters"),
lastName: z
.string()
.min(1, "Please provide a last name")
.max(100, "You can provide at most 100 characters"),
universityEmail: z.string().max(100).email("Please provide a valid email"),
phoneNumber: z.string().length(10, "Phone number must be 10 digits"),
university: z.string().min(1, "Please provide a university"),
universityAddress: z.string().min(1, "Please provide an address"),
university: z
.string()
.min(1, "Please provide a university")
.max(100, "You can provide at most 100 characters"),
universityAddress: z
.string()
.min(1, "Please provide an address")
.max(100, "You can provide at most 100 characters"),
leadershipExperience: z
.string()
.min(1, "Please state some leadership experience"),
.min(1, "Please state some leadership experience")
.max(250, "You can provide at most 250 characters"),
motivation: z
.string()
.min(1, "Please describe your motivation in joining the legacy project"),
.min(1, "Please describe your motivation in joining the Legacy Project")
.max(250, "You can provide at most 250 characters"),
// TODO: Figure out if availabilities should have a better type
availabilities: z.string().min(1, "Please provide some times"),
questions: z.string(),
availabilities: z
.string()
.min(1, "Please provide some availability")
.max(100, "You can provide at most 100 characters"),
questions: z.string().max(100, "You can provide at most 100 characters"),
}) satisfies z.ZodType<Prisma.ChapterRequestCreateInput>;

export const ChapterRequestResponse = z.discriminatedUnion("code", [
Expand Down
2 changes: 1 addition & 1 deletion src/app/public/start-chapter/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const StartChapter = () => {
<p className="py-3">
{" "}
For additional information, feel free to reach out at{" "}
<strong> [email protected] </strong>
<strong> [email protected].</strong>
</p>
</div>
<NewChapterForm />
Expand Down
265 changes: 142 additions & 123 deletions src/components/NewChapterForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { ErrorMessage } from "@hookform/error-message";
import { createChapterRequest } from "@api/chapter-request/route.client";
import { useApiThrottle } from "@hooks";
import { Spinner } from "./skeleton";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAsterisk } from "@fortawesome/free-solid-svg-icons";

type ValidationSchema = z.infer<typeof ChapterRequest>;

Expand Down Expand Up @@ -56,167 +58,182 @@ const NewChapterForm = () => {
<div className="w-full rounded-md bg-dark-teal px-9 py-10 text-lg text-white">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="grid grid-cols-2 gap-x-10 gap-y-5">
<div className="w-full ">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>First Name</div>
<input
{...register("firstName", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="firstName"
render={({ message }) => (
<p>
{" "}
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="firstName"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="w-full">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>Last Name</div>
<input
{...register("lastName", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="lastName"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="lastName"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="w-full">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>University Email</div>
<input
{...register("universityEmail", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="universityEmail"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="universityEmail"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="w-full">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>Phone Number</div>
<input
{...register("phoneNumber", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="phoneNumber"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="phoneNumber"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="w-full">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>College / University</div>
<input
{...register("university", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="w-full">
<div className="col-span-2 flex w-full flex-col gap-y-1 md:col-span-1">
<div>College / University Address</div>
<input
{...register("universityAddress", { onChange: resetForm })}
className="h-8 w-full rounded-md px-2 py-2 text-black"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="universityAddress"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
</div>
<div className="pt-5">
<div>
<div className="flex flex-col gap-y-1">
<div>
Do you have any experience in student leadership / club
organization / storytelling?{" "}
organization / storytelling?
</div>
<textarea
{...register("leadershipExperience", { onChange: resetForm })}
className="h-18 w-full resize-y rounded-md px-2 py-2 align-top text-black"
className="h-18 w-full resize-none rounded-md px-2 py-2 align-top text-black"
/>
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="leadershipExperience"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
</div>
<div className="pt-5">
<div className="flex flex-col gap-y-1 pt-5">
<div>
What motivates you to start this initiative in your community?{" "}
</div>
<textarea
{...register("motivation", { onChange: resetForm })}
className="h-18 w-full resize-y rounded-md px-2 py-2 align-top text-black"
className="h-18 w-full resize-none rounded-md px-2 py-2 align-top text-black"
/>
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="motivation"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
</div>
<div className="pt-5">
<div className="flex flex-col gap-y-1 pt-5">
<div>
Please list three 1 hour time blocks with your avalibility in
the next week{" "}
Expand All @@ -226,24 +243,26 @@ const NewChapterForm = () => {
className="h-8 w-full rounded-md px-2 py-2 text-black"
placeholder="Include the date (mm-dd-yyyy), time (hh:mm am/pm), and your timezone"
/>
<div className="text-sm">
<ErrorMessage
errors={errors}
name="availabilities"
render={({ message }) => (
<p>
<span className="text-sunset-orange">* </span>
{message}
</p>
)}
/>
</div>
<ErrorMessage
errors={errors}
name="university"
render={({ message }) => (
<p className="flex items-center gap-x-1 text-sm">
<FontAwesomeIcon
icon={faAsterisk}
className="text-sunset-orange"
size="xs"
/>
<p>{message}</p>
</p>
)}
/>
</div>
<div className="pt-5">
<div className="flex flex-col gap-y-1 pt-5">
<div>What questions do you have for us? </div>
<textarea
{...register("questions", { onChange: resetForm })}
className="h-8 w-full resize-y rounded-md px-2 py-1 align-top text-black"
className="h-12 w-full resize-none rounded-md px-2 py-1 align-top text-black"
/>
</div>
</div>
Expand Down

0 comments on commit 0664847

Please sign in to comment.