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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;

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,
@@ -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,6 +52,7 @@ type UserDetails = {
  levelOfStudy: string;
  jobTitle: string;
  workplace: string;
+ yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,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))}
  >
@@ -399,8 +401,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 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
  jobTitle,
  course,
  levelOfStudy,
+ yearsOfExperience: yearsOfExperience as
+ | "0-1"
+ | "1-3"
+ | "3-5"
+ | "5-8"
+ | "12+"
+ | undefined,
  },
  });
 
@@ -427,7 +442,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") {
@@ -512,6 +527,29 @@ 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")}
+ defaultValue=""
+ >
+ <option value="" disabled>
+ Select years of experience
+ </option>
+ {experienceRangeEnum.enumValues.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 || undefined,
  };
 
  return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "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();
+
+ 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,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;