Feature/complete onboarding form

app/(app)/alpha/additional-details/_actions.ts → app/(app)/onboarding/_actions.ts

@@ -80,8 +80,16 @@ export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
   }
 
   try {
-    const { professionalOrStudent, course, jobTitle, levelOfStudy, workplace } =
-      slideThreeSchema.parse(dataInput);
+    const {
+      professionalOrStudent,
+      course,
+      jobTitle,
+      levelOfStudy,
+      workplace,
+      yearsOfExperience,
+    } = slideThreeSchema.parse(dataInput);
+
+    const onboardingComplete = new Date().toISOString();
 
     await db
       .update(user)
@@ -91,6 +99,8 @@ export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
         jobTitle,
         levelOfStudy,
         workplace,
+        yearsOfExperience,
+        onboardingComplete,
       })
       .where(eq(user.id, session.user.id));
 

app/(app)/alpha/additional-details/_client.tsx → app/(app)/onboarding/_client.tsx

@@ -21,7 +21,7 @@ import {
   locationOptions,
   levelOfStudyOptions,
   monthsOptions,
-} from "@/app/(app)/alpha/additional-details/selectOptions";
+} from "@/app/(app)/onboarding/selectOptions";
 import {
   slideOneSubmitAction,
   slideThreeSubmitAction,
@@ -51,6 +51,7 @@ type UserDetails = {
   levelOfStudy: string;
   jobTitle: string;
   workplace: string;
+  yearsOfExperience: string;
 };
 
 export default function AdditionalSignUpDetails({
@@ -399,8 +400,14 @@ function SlideTwo({ details }: { details: UserDetails }) {
 function SlideThree({ details }: { details: UserDetails }) {
   const router = useRouter();
 
-  const { professionalOrStudent, workplace, jobTitle, course, levelOfStudy } =
-    details;
+  const {
+    professionalOrStudent,
+    workplace,
+    jobTitle,
+    course,
+    levelOfStudy,
+    yearsOfExperience,
+  } = details;
 
   const {
     register,
@@ -417,6 +424,7 @@ function SlideThree({ details }: { details: UserDetails }) {
       jobTitle,
       course,
       levelOfStudy,
+      yearsOfExperience,
     },
   });
 
@@ -427,7 +435,7 @@ function SlideThree({ details }: { details: UserDetails }) {
     const professionalOrStudent = getValues("professionalOrStudent");
 
     if (isError && professionalOrStudent === "Working professional") {
-      isError = await trigger(["workplace", "jobTitle"]);
+      isError = await trigger(["workplace", "jobTitle", "yearsOfExperience"]);
     }
 
     if (isError && professionalOrStudent === "Current student") {
@@ -449,6 +457,8 @@ 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]">
@@ -512,6 +522,28 @@ function SlideThree({ details }: { details: UserDetails }) {
                   </ErrorMessage>
                 )}
               </Field>
+
+              <Field className="mx-4 my-4">
+                <Label>Years of experience:</Label>
+                <Select
+                  id="years-of-experience"
+                  {...register("yearsOfExperience")}
+                >
+                  <option value="" disabled>
+                    Select range
+                  </option>
+                  {Object.values(yearsOfExperienceOptions).map((range) => (
+                    <option key={range} value={range}>
+                      {range} years
+                    </option>
+                  ))}
+                </Select>
+                {errors.yearsOfExperience && (
+                  <ErrorMessage className="text-red-500">
+                    {errors.yearsOfExperience.message}
+                  </ErrorMessage>
+                )}
+              </Field>
             </>
           )}
 

app/(app)/alpha/additional-details/page.tsx → app/(app)/onboarding/page.tsx

@@ -22,6 +22,7 @@ export default async function Page() {
       levelOfStudy: true,
       jobTitle: true,
       workplace: true,
+      yearsOfExperience: true,
     },
     where: (user, { eq }) => eq(user.id, userId),
   });
@@ -37,6 +38,7 @@ export default async function Page() {
     levelOfStudy: details?.levelOfStudy || "",
     jobTitle: details?.jobTitle || "",
     workplace: details?.workplace || "",
+    yearsOfExperience: details?.yearsOfExperience || "",
   };
 
   return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,31 @@
 "use client";
-import { SessionProvider } from "next-auth/react";
+import { SessionProvider, useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function AuthProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <OnboardingCheck>{children}</OnboardingCheck>
+    </SessionProvider>
+  );
+}
+
+function OnboardingCheck({ children }: { children: React.ReactNode }) {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+
+  console.log("-------------");
+
+  useEffect(() => {
+    if (status === "authenticated" && !session?.user?.isOnboardingComplete) {
+      router.push("/onboarding");
+    }
+  }, [status, session, router]);
+
+  return <>{children}</>;
 }

drizzle/0011_years-experience-user-table.sql

@@ -0,0 +1,3 @@
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" text;--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;