Merge pull request #149 from aryasaatvik/has-onboarded

fix(web): users should be onboarded once

6 files changed, 72 insertions, 21 deletions

diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx
index c402c560..9728d107 100644
--- a/apps/web/app/(auth)/onboarding/page.tsx
+++ b/apps/web/app/(auth)/onboarding/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import Link from "next/link";
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
@@ -11,7 +10,7 @@ import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { createMemory } from "@repo/web/app/actions/doers";
+import { completeOnboarding, createMemory } from "@repo/web/app/actions/doers";
 import { useRouter } from "next/navigation";
 import Logo from "../../../public/logo.svg";
 import Image from "next/image";
@@ -23,8 +22,13 @@ export default function Home() {
 	const { push } = useRouter();
 
 	useEffect(() => {
+		const updateDb = async () => {
+			await completeOnboarding();
+		}
 		if (currStep > 3) {
-			push("/home?q=what%20is%20supermemory");
+			updateDb().then(() => {
+				push("/home?q=what%20is%20supermemory");
+			});
 		}
 	}, [currStep]);
 
@@ -182,7 +186,7 @@ function StepIndicator({
 				/>
 				<p>Step: {currStep}/3</p>
 				<ChevronRightIcon
-					className="h-6"
+					className="h-6 cursor-pointer"
 					onClick={() => currStep <= 3 && setCurrStep(currStep + 1)}
 				/>
 			</div>
@@ -381,6 +385,12 @@ function StepTwo({ currStep }: { currStep: number }) {
 }
 
 function Navbar() {
+	const router = useRouter();
+	const handleSkip = async () => {
+		await completeOnboarding();
+		router.push("/home?q=what%20is%20supermemory");
+	}
+
 	return (
 		<div className="flex items-center justify-between p-4 fixed top-0 left-0 w-full">
 			<Image
@@ -389,9 +399,7 @@ function Navbar() {
 				className="hover:brightness-125 duration-200 size-12"
 			/>
 
-			<Link href="/home">
-				<button className="text-sm">Skip</button>
-			</Link>
+			<button className="text-sm" onClick={handleSkip}>Skip</button>
 		</div>
 	);
 }
diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx
index a31343cd..3b563b90 100644
--- a/apps/web/app/(auth)/signin/page.tsx
+++ b/apps/web/app/(auth)/signin/page.tsx
@@ -18,7 +18,7 @@ async function Signin({
 	const user = await auth();
 
 	if (user) {
-		await redirect("/home");
+		redirect("/home");
 	}
 
 	return (
@@ -64,7 +64,7 @@ async function Signin({
 								action={async () => {
 									"use server";
 									await signIn("google", {
-										redirectTo: "/home?firstTime=true",
+										redirectTo: "/home",
 									});
 								}}
 							>
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index ebd4d84b..416428e7 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -3,13 +3,12 @@
 import React, { useEffect, useState } from "react";
 import QueryInput from "./queryinput";
 import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers";
-import { redirect, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
 import { toast } from "sonner";
 import { motion } from "framer-motion";
 import { ChromeIcon, GithubIcon, TwitterIcon } from "lucide-react";
 import Link from "next/link";
-import { homeSearchParamsCache } from "@/lib/searchParams";
 import History from "./history";
 
 const slap = {
@@ -26,15 +25,7 @@ const slap = {
 };
 
 function Page({ searchParams }: { searchParams: Record<string, string> }) {
-	// TODO: use this to show a welcome page/modal
-	const firstTime = searchParams.firstTime === "true";
-
 	const query = searchParams.q || "";
-
-	if (firstTime) {
-		redirect("/onboarding");
-	}
-
 	const [queryPresent, setQueryPresent] = useState<boolean>(false);
 
 	const [telegramUser, setTelegramUser] = useState<string | undefined>(
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index b2b27a4f..c6174945 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { auth } from "../../server/auth";
 import { Toaster } from "@repo/ui/shadcn/sonner";
 import BackgroundPlus from "../(landing)/GridPatterns/PlusGrid";
+import { getUser } from "../actions/fetchers";
 
 async function Layout({ children }: { children: React.ReactNode }) {
 	const info = await auth();
@@ -12,6 +13,13 @@ async function Layout({ children }: { children: React.ReactNode }) {
 		return redirect("/signin");
 	}
 
+	const user = await getUser();
+	const hasOnboarded = user.data?.hasOnboarded;
+
+	if (!hasOnboarded) {
+		redirect("/onboarding");
+	}
+
 	return (
 		<main className="h-screen flex flex-col">
 			<div className="fixed top-0 left-0 w-full z-40">
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index a2cdb4f5..61ada695 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -23,6 +23,33 @@ import { decipher } from "@/server/encrypt";
 import { redirect } from "next/navigation";
 import { tweetToMd } from "@repo/shared-types/utils";
 
+export const completeOnboarding = async (): ServerActionReturnType<boolean> => {
+	const data = await auth();
+
+	if (!data || !data.user || !data.user.id) {
+		redirect("/signin");
+		return { error: "Not authenticated", success: false };
+	}
+
+	try {
+		const res = await db
+		.update(users)
+		.set({ hasOnboarded: true })
+		.where(eq(users.id, data.user.id))
+		.returning({ hasOnboarded: users.hasOnboarded });
+
+		if (res.length === 0 || !res[0]?.hasOnboarded) {
+			return { success: false, data: false, error: "Failed to update user" };
+		}
+
+		return { success: true, data: res[0].hasOnboarded };
+	} catch (e) {
+		return { success: false, data: false, error: (e as Error).message };
+	}
+
+
+}
+
 export const createSpace = async (
 	input: string | FormData,
 ): ServerActionReturnType<number> => {
diff --git a/apps/web/app/actions/fetchers.ts b/apps/web/app/actions/fetchers.ts
index 688fe7f5..8d6802a7 100644
--- a/apps/web/app/actions/fetchers.ts
+++ b/apps/web/app/actions/fetchers.ts
@@ -1,6 +1,6 @@
 "use server";
 
-import { and, asc, eq, exists, inArray, not, or, sql } from "drizzle-orm";
+import { and, asc, eq, exists, not, or } from "drizzle-orm";
 import { db } from "../../server/db";
 import {
 	canvas,
@@ -13,15 +13,32 @@ import {
 	spacesAccess,
 	storedContent,
 	StoredSpace,
+	User,
 	users,
 } from "../../server/db/schema";
-import { ServerActionReturnType, Space } from "./types";
+import { ServerActionReturnType } from "./types";
 import { auth } from "../../server/auth";
 import { ChatHistory, SourceZod } from "@repo/shared-types";
 import { z } from "zod";
 import { redirect } from "next/navigation";
 import { cookies, headers } from "next/headers";
 
+export const getUser = async (): ServerActionReturnType<User> => {
+	const data = await auth();
+
+	if (!data || !data.user || !data.user.id) {
+		redirect("/signin");
+		return { error: "Not authenticated", success: false };
+	}
+
+	console.log("data.user.id", data.user.id);
+	const user = await db.query.users.findFirst({
+		where: eq(users.id, data.user.id),
+	});
+
+	return { success: true, data: user };
+};
+
 export const getSpaces = async (): ServerActionReturnType<StoredSpace[]> => {
 	const data = await auth();