From 476a3bfb48dbde2808db338153671dde37b6e1eb Mon Sep 17 00:00:00 2001
From: Nick Doan <nickbar01234@gmail.com>
Date: Tue, 16 Apr 2024 13:53:10 -0400
Subject: [PATCH] Collapse row (#165)

* Collapse row

* Fix test

* corrected error messages

---------

Co-authored-by: Johnny Tan <jonnytan0818@gmail.com>
---
 src/app/api/chapter-request/route.schema.ts |  35 ++-
 src/app/api/chapter-request/route.spec.ts   |   2 +-
 src/app/public/start-chapter/page.tsx       |   2 +-
 src/components/NewChapterForm.tsx           | 265 +++++++++++---------
 4 files changed, 170 insertions(+), 134 deletions(-)

diff --git a/src/app/api/chapter-request/route.schema.ts b/src/app/api/chapter-request/route.schema.ts
index f14a8dde..9c85cae6 100644
--- a/src/app/api/chapter-request/route.schema.ts
+++ b/src/app/api/chapter-request/route.schema.ts
@@ -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", [
diff --git a/src/app/api/chapter-request/route.spec.ts b/src/app/api/chapter-request/route.spec.ts
index 2eff5c25..7b0fdbf1 100644
--- a/src/app/api/chapter-request/route.spec.ts
+++ b/src/app/api/chapter-request/route.spec.ts
@@ -16,6 +16,6 @@ describe("ChapterRequest", () => {
         availabilities: "I am available",
         questions: "I have a question",
       })
-    ).toThrowError("This is not a valid email");
+    ).toThrowError("Please provide a valid email");
   });
 });
diff --git a/src/app/public/start-chapter/page.tsx b/src/app/public/start-chapter/page.tsx
index 679c2658..73102778 100644
--- a/src/app/public/start-chapter/page.tsx
+++ b/src/app/public/start-chapter/page.tsx
@@ -35,7 +35,7 @@ const StartChapter = () => {
         <p className="py-3">
           {" "}
           For additional information, feel free to reach out at{" "}
-          <strong> exec@thelegacyproject.org </strong>
+          <strong> exec@thelegacyproject.org.</strong>
         </p>
       </div>
       <NewChapterForm />
diff --git a/src/components/NewChapterForm.tsx b/src/components/NewChapterForm.tsx
index d92023f4..b8edffd6 100644
--- a/src/components/NewChapterForm.tsx
+++ b/src/components/NewChapterForm.tsx
@@ -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>;
 
@@ -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="universityAddress"
+                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="leadershipExperience"
+                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="motivation"
+                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{" "}
@@ -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="availabilities"
+                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>