refactor /home

3 files changed, 63 insertions, 58 deletions

diff --git a/apps/web/app/(dash)/home/heading.tsx b/apps/web/app/(dash)/home/heading.tsx
new file mode 100644
index 00000000..1a120684
--- /dev/null
+++ b/apps/web/app/(dash)/home/heading.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { headings } from "./headingVariants";
+import { motion } from "framer-motion"; 
+
+const slap = {
+	initial: {
+		opacity: 0,
+		scale: 1.1,
+	},
+	whileInView: { opacity: 1, scale: 1 },
+	transition: {
+		duration: 0.5,
+		ease: "easeInOut",
+	},
+	viewport: { once: true },
+};
+
+export function Heading() {
+	const [showHeading, setShowHeading] = useState<number>(0);
+
+	useEffect(()=> {
+		setShowHeading(Math.floor(Math.random() * headings.length));
+	})
+	return (
+		<motion.h1
+			{...{
+				...slap,
+				transition: { ...slap.transition, delay: 0.2 },
+			}}
+			className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-5xl"
+		>
+			{headings[showHeading]!.map((v, i) => {
+				return (
+					<span
+						key={i}
+						className={
+							v.type === "highlighted"
+								? "bg-gradient-to-r to-blue-200 from-zinc-300 text-transparent bg-clip-text"
+								: ""
+						}
+					>
+						{v.content}
+					</span>
+				);
+			})}
+		</motion.h1>
+	);
+}
\ No newline at end of file
diff --git a/apps/web/app/(dash)/home/homeVariants.ts b/apps/web/app/(dash)/home/headingVariants.ts
index 1b44bab9..578b87c4 100644
--- a/apps/web/app/(dash)/home/homeVariants.ts
+++ b/apps/web/app/(dash)/home/headingVariants.ts
@@ -1,4 +1,4 @@
-export const variants = [
+export const headings = [
 	[
 		{
 			type: "text",
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index 7ef8e65d..68a14d53 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -6,20 +6,16 @@ import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers";
 import { useRouter } from "next/navigation";
 import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
 import { toast } from "sonner";
-import { motion } from "framer-motion";
-import { variants } from "./homeVariants";
-
-const slap = {
-	initial: {
-		opacity: 0,
-		scale: 1.1,
-	},
-	whileInView: { opacity: 1, scale: 1 },
-	transition: {
-		duration: 0.5,
-		ease: "easeInOut",
-	},
-	viewport: { once: true },
+import { Heading } from "./heading";
+
+const linkTelegram = async (telegramUser: string) => {
+	const response = await linkTelegramToUser(telegramUser);
+
+	if (response.success) {
+		toast.success("Your telegram has been linked successfully.");
+	} else {
+		toast.error("Failed to link telegram. Please try again.");
+	}
 };
 
 function Page({
@@ -27,9 +23,6 @@ function Page({
 }: {
 	searchParams: Record<string, string | string[] | undefined>;
 }) {
-	// TODO: use this to show a welcome page/modal
-	// const { firstTime } = homeSearchParamsCache.parse(searchParams);
-
 	const [telegramUser, setTelegramUser] = useState<string | undefined>(
 		searchParams.telegramUser as string,
 	);
@@ -41,27 +34,18 @@ function Page({
 
 	const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
 
-	const [showVariant, setShowVariant] = useState<number>(0);
 
 	useEffect(() => {
+		// telegram bot
 		if (telegramUser) {
-			const linkTelegram = async () => {
-				const response = await linkTelegramToUser(telegramUser);
-
-				if (response.success) {
-					toast.success("Your telegram has been linked successfully.");
-				} else {
-					toast.error("Failed to link telegram. Please try again.");
-				}
-			};
-
-			linkTelegram();
+			linkTelegram(telegramUser);
 		}
 
 		if (extensionInstalled) {
 			toast.success("Extension installed successfully");
 		}
 
+		// fetch spaces
 		getSpaces().then((res) => {
 			if (res.success && res.data) {
 				setSpaces(res.data);
@@ -70,8 +54,6 @@ function Page({
 			// TODO: HANDLE ERROR
 		});
 
-		setShowVariant(Math.floor(Math.random() * variants.length));
-
 		getSessionAuthToken().then((token) => {
 			if (typeof window === "undefined") return;
 			window.postMessage({ token: token.data }, "*");
@@ -80,32 +62,7 @@ function Page({
 
 	return (
 		<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
-			{/* all content goes here */}
-			{/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
-
-			<motion.h1
-				{...{
-					...slap,
-					transition: { ...slap.transition, delay: 0.2 },
-				}}
-				className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-5xl"
-			>
-				{variants[showVariant]!.map((v, i) => {
-					return (
-						<span
-							key={i}
-							className={
-								v.type === "highlighted"
-									? "bg-gradient-to-r to-blue-200 from-zinc-300 text-transparent bg-clip-text"
-									: ""
-							}
-						>
-							{v.content}
-						</span>
-					);
-				})}
-			</motion.h1>
-
+			<Heading />
 			<div className="w-full pb-20 mt-12">
 				<QueryInput
 					handleSubmit={async (q, spaces) => {