Implemented onboarding page

Author: ladunjexa

app/(auth)/layout.tsx

@@ -12,7 +12,7 @@ export default function AuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="flex min-h-screen w-full items-center justify-center">
+    <main className="flex min-h-screen w-full items-center justify-center bg-auth-light bg-cover bg-center bg-no-repeat dark:bg-auth-dark">
       {children}
     </main>
   );

app/(auth)/onboarding/page.tsx

@@ -0,0 +1,31 @@
+import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
+
+import Profile from "@/components/forms/Profile";
+
+import { getUserById } from "@/lib/actions/user.action";
+
+const Page = async () => {
+  const { userId } = auth();
+  if (!userId) return null;
+
+  const mongoUser = await getUserById({ userId });
+  if (mongoUser?.onboarded) redirect("/");
+
+  return (
+    <>
+      <main className="mx-auto flex max-w-3xl flex-col justify-start px-10 py-20">
+        <h1 className="h1-bold text-dark100_light900">Onboarding</h1>
+        <p className="base-medium text-dark100_light900 mt-3">
+          Complete your profile now to use DevOverflow
+        </p>
+
+        <div className="background-light850_dark100 mt-9 p-10">
+          <Profile clerkId={userId} user={JSON.stringify(mongoUser)} />
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Page;

app/(root)/ask-question/page.tsx

@@ -1,4 +1,5 @@
 import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
 
 import Question from "@/components/forms/Question";
 
@@ -17,6 +18,7 @@ const Page = async (props: Props) => {
   if (!userId) return null;
 
   const mongoUser = await getUserById({ userId });
+  if (!mongoUser?.onboarded) redirect("/onboarding");
 
   return (
     <div>

app/(root)/collection/page.tsx

@@ -1,12 +1,13 @@
 import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
 
 import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
 import Filter from "@/components/shared/Filter";
 import NoResult from "@/components/shared/NoResult";
 import Pagination from "@/components/shared/Pagination";
 import QuestionCard from "@/components/cards/QuestionCard";
 
-import { getSavedQuestions } from "@/lib/actions/user.action";
+import { getSavedQuestions, getUserById } from "@/lib/actions/user.action";
 
 import { QuestionFilters } from "@/constants/filters";
 
@@ -22,6 +23,9 @@ export default async function Collection({ searchParams }: SearchParamsProps) {
 
   if (!clerkId) return null;
 
+  const mongoUser = await getUserById({ userId: clerkId });
+  if (!mongoUser?.onboarded) redirect("/onboarding");
+
   const result = await getSavedQuestions({
     clerkId,
     searchQuery: searchParams.q,

app/(root)/edit-answer/[id]/page.tsx

@@ -1,9 +1,9 @@
-import { redirect } from "next/navigation";
-
 import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
 
 import Answer from "@/components/forms/Answer";
 
+import { getUserById } from "@/lib/actions/user.action";
 import { getAnswerById } from "@/lib/actions/answer.action";
 
 import type { ParamsProps } from "@/types";
@@ -18,6 +18,9 @@ const Page = async ({ params }: ParamsProps) => {
 
   if (!userId) return null;
 
+  const mongoUser = await getUserById({ userId });
+  if (!mongoUser?.onboarded) redirect("/onboarding");
+
   const result = await getAnswerById({ answerId: params.id });
 
   if (userId !== result.author.clerkId) redirect("/");

app/(root)/profile/edit/page.tsx

@@ -1,4 +1,5 @@
 import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
 
 import Profile from "@/components/forms/Profile";
 
@@ -17,6 +18,7 @@ const Page = async ({ params }: ParamsProps) => {
   if (!userId) return null;
 
   const mongoUser = await getUserById({ userId });
+  if (!mongoUser?.onboarded) redirect("/onboarding");
 
   return (
     <>

app/(root)/question/edit/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
 
 import Question from "@/components/forms/Question";
 
@@ -18,6 +19,7 @@ const Page = async ({ params }: ParamsProps) => {
   if (!userId) return null;
 
   const mongoUser = await getUserById({ userId });
+  if (!mongoUser?.onboarded) redirect("/onboarding");
 
   const result = await getQuestionById({ questionId: params.id });
 

middleware.ts

@@ -4,8 +4,17 @@ import { authMiddleware } from "@clerk/nextjs";
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
-  publicRoutes: ["/", "/api/webhook/clerk"],
-  ignoredRoutes: ["/api/webhook/clerk"],
+  publicRoutes: [
+    "/",
+    "/api/webhook/clerk",
+    "/question/:id",
+    "/tags",
+    "/tags/:id",
+    "/profile/:id",
+    "/community",
+    "/jobs",
+  ],
+  ignoredRoutes: ["/api/webhook/clerk", "/api/openai"],
 });
 
 export const config = {