use enum for years of experience field

Author: John-Paul-Larkin

app/(app)/onboarding/_client.tsx

@@ -39,6 +39,7 @@ import { Select } from "@/components/ui-components/select";
 import { Button } from "@/components/ui-components/button";
 import { Heading, Subheading } from "@/components/ui-components/heading";
 import { Divider } from "@/components/ui-components/divider";
+import { experienceRangeEnum } from "@/server/db/schema";
 
 type UserDetails = {
   username: string;
@@ -51,7 +52,7 @@ type UserDetails = {
   levelOfStudy: string;
   jobTitle: string;
   workplace: string;
-  yearsOfExperience: string;
+  yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -358,7 +359,7 @@ function SlideTwo({ details }: { details: UserDetails }) {
                 id="day"
                 aria-label="day"
                 value={day ? day : ""}
-                disabled={!month || undefined}
+                disabled={month === undefined || year === undefined}
                 required
                 onChange={(e) => setDay(Number(e.target.value))}
               >
@@ -424,7 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
       jobTitle,
       course,
       levelOfStudy,
-      yearsOfExperience,
+      yearsOfExperience: yearsOfExperience as
+        | "0-1"
+        | "1-3"
+        | "3-5"
+        | "5-8"
+        | "12+"
+        | undefined,
     },
   });
 
@@ -457,8 +464,6 @@ function SlideThree({ details }: { details: UserDetails }) {
     }
   };
 
-  const yearsOfExperienceOptions = ["0-1", "1-3", "3-5", "5-8", "12+"] as const;
-
   return (
     <form className="mx-auto max-w-sm" onSubmit={handleSubmit(onFormSubmit)}>
       <div className="min-h-[32rem]">
@@ -528,11 +533,12 @@ function SlideThree({ details }: { details: UserDetails }) {
                 <Select
                   id="years-of-experience"
                   {...register("yearsOfExperience")}
+                  defaultValue=""
                 >
                   <option value="" disabled>
-                    Select range
+                    Select years of experience
                   </option>
-                  {Object.values(yearsOfExperienceOptions).map((range) => (
+                  {experienceRangeEnum.enumValues.map((range) => (
                     <option key={range} value={range}>
                       {range} years
                     </option>

app/(app)/onboarding/page.tsx

@@ -38,7 +38,7 @@ export default async function Page() {
     levelOfStudy: details?.levelOfStudy || "",
     jobTitle: details?.jobTitle || "",
     workplace: details?.workplace || "",
-    yearsOfExperience: details?.yearsOfExperience || "",
+    yearsOfExperience: details?.yearsOfExperience || undefined,
   };
 
   return <Content details={detailsWithNullsRemoved} />;

schema/additionalUserDetails.ts

@@ -1,5 +1,8 @@
+import { experienceRangeEnum } from "@/server/db/schema";
 import z from "zod";
 
+export const experienceRangeValues = experienceRangeEnum.enumValues;
+
 export const slideOneSchema = z.object({
   name: z
     .string()
@@ -30,55 +33,50 @@ export const slideThreeSchema = z
     jobTitle: z.string().max(30, "Max length is 30 characters."),
     levelOfStudy: z.string(),
     course: z.string().max(30, "Max name length is 30 characters."),
-    yearsOfExperience: z.string(),
+    yearsOfExperience: z
+      .enum(experienceRangeValues, {
+        errorMap: () => ({ message: "Please select a valid experience range" }),
+      })
+      .optional(),
   })
   .superRefine((val, ctx) => {
-    if (
-      val.professionalOrStudent === "Current student" &&
-      val.levelOfStudy === ""
-    ) {
-      ctx.addIssue({
-        path: ["levelOfStudy"],
-        code: "custom",
-        message: "required",
-      });
-    }
-    if (val.professionalOrStudent === "Current student" && val.course === "") {
-      ctx.addIssue({
-        path: ["course"],
-        code: "custom",
-        message: "required",
-      });
-    }
-    if (
-      val.professionalOrStudent === "Working professional" &&
-      val.workplace === ""
-    ) {
-      ctx.addIssue({
-        path: ["workplace"],
-        code: "custom",
-        message: "required",
-      });
-    }
-    if (
-      val.professionalOrStudent === "Working professional" &&
-      val.jobTitle === ""
-    ) {
-      ctx.addIssue({
-        path: ["jobTitle"],
-        code: "custom",
-        message: "required",
-      });
-    }
-    if (
-      val.professionalOrStudent === "Working professional" &&
-      val.yearsOfExperience === ""
-    ) {
-      ctx.addIssue({
-        path: ["yearsOfExperience"],
-        code: "custom",
-        message: "required",
-      });
+    if (val.professionalOrStudent === "Current student") {
+      if (val.levelOfStudy === "") {
+        ctx.addIssue({
+          path: ["levelOfStudy"],
+          code: "custom",
+          message: "required",
+        });
+      }
+      if (val.course === "") {
+        ctx.addIssue({
+          path: ["course"],
+          code: "custom",
+          message: "required",
+        });
+      }
+    } else if (val.professionalOrStudent === "Working professional") {
+      if (val.workplace === "") {
+        ctx.addIssue({
+          path: ["workplace"],
+          code: "custom",
+          message: "required",
+        });
+      }
+      if (val.jobTitle === "") {
+        ctx.addIssue({
+          path: ["jobTitle"],
+          code: "custom",
+          message: "required",
+        });
+      }
+      if (val.yearsOfExperience === undefined) {
+        ctx.addIssue({
+          path: ["yearsOfExperience"],
+          code: "custom",
+          message: "required",
+        });
+      }
     }
   });