linsa-io · nikivdev · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024
diff --git a/web/.env.example b/web/.env.example
@@ -1,4 +1,10 @@
 NEXT_PUBLIC_APP_NAME="Learn Anything"
 NEXT_PUBLIC_APP_URL=http://localhost:3000
 
-NEXT_PUBLIC_JAZZ_GLOBAL_GROUP=""
+NEXT_PUBLIC_JAZZ_GLOBAL_GROUP=""
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
diff --git a/web/app/(auth)/layout.tsx b/web/app/(auth)/layout.tsx
@@ -0,0 +1,7 @@
+export default function AuthLayout({
+	children
+}: Readonly<{
+	children: React.ReactNode
+}>) {
+	return <main className="h-full">{children}</main>
+}
diff --git a/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/web/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignInClient } from "@/components/custom/clerk/sign-in-client"
+
+export default async function Page() {
+	return (
+		<div className="flex justify-center py-24">
+			<SignInClient />
+		</div>
+	)
+}
diff --git a/web/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/web/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,9 @@
+import { SignUpClient } from "@/components/custom/clerk/sign-up-client"
+
+export default async function Page() {
+	return (
+		<div className="flex justify-center py-24">
+			<SignUpClient />
+		</div>
+	)
+}
diff --git a/web/app/(pages)/layout.tsx b/web/app/(pages)/layout.tsx
@@ -1,22 +1,31 @@
+import { SignedInClient } from "@/components/custom/clerk/signed-in-client"
 import { Sidebar } from "@/components/custom/sidebar/sidebar"
-import PublicHomeRoute from "@/components/routes/PublicHomeRoute"
+import { PublicHomeRoute } from "@/components/routes/PublicHomeRoute"
+import { JazzClerkAuth, JazzProvider } from "@/lib/providers/jazz-provider"
+import { currentUser } from "@clerk/nextjs/server"
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-	// TODO: get it from jazz/clerk
-	const loggedIn = true
+export default async function PageLayout({ children }: { children: React.ReactNode }) {
+	const user = await currentUser()
 
-	if (loggedIn) {
-		return (
-			<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
-				<Sidebar />
-
-				<div className="flex min-w-0 flex-1 flex-col">
-					<main className="relative flex flex-auto flex-col place-items-stretch overflow-auto lg:my-2 lg:mr-2 lg:rounded-md lg:border">
-						{children}
-					</main>
-				</div>
-			</div>
-		)
+	if (!user) {
+		return <PublicHomeRoute />
 	}
-	return <PublicHomeRoute />
+
+	return (
+		<JazzClerkAuth>
+			<SignedInClient>
+				<JazzProvider>
+					<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
+						<Sidebar />
+
+						<div className="flex min-w-0 flex-1 flex-col">
+							<main className="relative flex flex-auto flex-col place-items-stretch overflow-auto lg:my-2 lg:mr-2 lg:rounded-md lg:border">
+								{children}
+							</main>
+						</div>
+					</div>
+				</JazzProvider>
+			</SignedInClient>
+		</JazzClerkAuth>
+	)
 }
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -3,7 +3,8 @@ import { Inter as FontSans } from "next/font/google"
 import { cn } from "@/lib/utils"
 import { ThemeProvider } from "@/lib/providers/theme-provider"
 import "./globals.css"
-import { JazzProvider } from "@/lib/providers/jazz-provider"
+
+import { ClerkProviderClient } from "@/components/custom/clerk/clerk-provider-client"
 import { JotaiProvider } from "@/lib/providers/jotai-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { ConfirmProvider } from "@/lib/providers/confirm-provider"
@@ -25,8 +26,8 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="en" className="h-full w-full" suppressHydrationWarning>
-			<body className={cn("h-full w-full font-sans antialiased", fontSans.variable)}>
-				<JazzProvider>
+			<ClerkProviderClient>
+				<body className={cn("h-full w-full font-sans antialiased", fontSans.variable)}>
 					<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
 						<JotaiProvider>
 							<ConfirmProvider>
@@ -35,8 +36,8 @@ export default function RootLayout({
 							</ConfirmProvider>
 						</JotaiProvider>
 					</ThemeProvider>
-				</JazzProvider>
-			</body>
+				</body>
+			</ClerkProviderClient>
 		</html>
 	)
 }
diff --git a/web/components/custom/auth-ui.tsx b/web/components/custom/auth-ui.tsx
diff --git a/web/components/custom/clerk/clerk-provider-client.tsx b/web/components/custom/clerk/clerk-provider-client.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { ClerkProvider } from "@clerk/nextjs"
+
+export const ClerkProviderClient = ({ children }: { children: React.ReactNode }) => {
+	return <ClerkProvider>{children}</ClerkProvider>
+}
diff --git a/web/components/custom/clerk/sign-in-client.tsx b/web/components/custom/clerk/sign-in-client.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { SignIn } from "@clerk/nextjs"
+
+export const SignInClient = () => {
+	return <SignIn />
+}
diff --git a/web/components/custom/clerk/sign-up-client.tsx b/web/components/custom/clerk/sign-up-client.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { SignUp } from "@clerk/nextjs"
+
+export const SignUpClient = () => {
+	return <SignUp />
+}
diff --git a/web/components/custom/clerk/signed-in-client.tsx b/web/components/custom/clerk/signed-in-client.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { SignedIn } from "@clerk/nextjs"
+
+export const SignedInClient = ({ children }: { children: React.ReactNode }) => {
+	return <SignedIn>{children}</SignedIn>
+}
diff --git a/web/components/custom/sidebar/partial/page-section.tsx b/web/components/custom/sidebar/partial/page-section.tsx
@@ -72,7 +72,7 @@ const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({ pageCount }) => (
 		>
 			<p className="flex items-center text-xs font-medium">
 				Pages
-				{pageCount && <span className="text-muted-foreground ml-1">{pageCount}</span>}
+				{pageCount > 0 && <span className="text-muted-foreground ml-1">{pageCount}</span>}
 			</p>
 		</Button>
 		<div className={cn("flex items-center gap-px pr-2")}>
@@ -86,6 +86,8 @@ const NewPageButton: React.FC = () => {
 	const { me } = useAccount()
 	const router = useRouter()
 
+	if (!me) return null
+
 	const handleClick = () => {
 		try {
 			const newPersonalPage = PersonalPage.create(

diff --git a/web/components/custom/sidebar/partial/profile-section.tsx b/web/components/custom/sidebar/partial/profile-section.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import Link from "next/link"
+import { useAuth } from "@clerk/nextjs"
 
 const MenuItem = ({
 	icon,
@@ -48,9 +49,10 @@ const MenuItem = ({
 	)
 }
 export const ProfileSection: React.FC = () => {
-	const { me, logOut } = useAccount({
+	const { me } = useAccount({
 		profile: true
 	})
+	const { signOut } = useAuth()
 	const [menuOpen, setMenuOpen] = useState(false)
 
 	const closeMenu = () => setMenuOpen(false)
@@ -86,7 +88,7 @@ export const ProfileSection: React.FC = () => {
 							</DropdownMenuItem>
 							<DropdownMenuSeparator />
 							<DropdownMenuItem>
-								<MenuItem icon="LogOut" text="Log out" onClick={logOut} onClose={closeMenu} />
+								<MenuItem icon="LogOut" text="Log out" onClick={signOut} onClose={closeMenu} />
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>

diff --git a/web/components/custom/sidebar/partial/topic-section.tsx b/web/components/custom/sidebar/partial/topic-section.tsx
@@ -50,7 +50,7 @@ const TopicSectionHeader: React.FC<TopicSectionHeaderProps> = ({ topicCount }) =
 		>
 			<p className="flex items-center text-xs font-medium">
 				Topics
-				{topicCount && <span className="text-muted-foreground ml-1">{topicCount}</span>}
+				{topicCount > 0 && <span className="text-muted-foreground ml-1">{topicCount}</span>}
 			</p>
 		</Button>
 	</div>

diff --git a/web/components/routes/PublicHomeRoute.tsx b/web/components/routes/PublicHomeRoute.tsx
@@ -1,31 +1,19 @@
 "use client"
-import { useCoState } from "@/lib/providers/jazz-provider"
-import { PublicGlobalGroup } from "@/lib/schema/global-topic-graph"
-import { glob } from "fs"
-import { ID } from "jazz-tools"
-import { useMemo } from "react"
 
-export default function PublicHomeRoute() {
-	// const globalGroup = useCoState(PublicGlobalGroup, "co_z6Tmg1sZTfwkPd4pV6qBV9T5SFU" as ID<PublicGlobalGroup>, {
-	// 	root: { topicGraph: [{ connectedTopics: [{}] }] }
-	// })
+import Link from "next/link"
+import { buttonVariants } from "../ui/button"
+import { cn } from "@/lib/utils"
 
-	// const graph = useMemo(() => {
-	// 	return globalGroup?.root.topicGraph?.map(
-	// 		topic =>
-	// 			({
-	// 				name: topic.name,
-	// 				prettyName: topic.prettyName,
-	// 				connectedTopics: topic.connectedTopics.map(connected => connected?.name)
-	// 			}) || []
-	// 	)
-	// }, [globalGroup?.root.topicGraph])
-	// const [{}]
-	// console.log(globalGroup, "graph")
+export const PublicHomeRoute: React.FC = () => {
 	return (
-		<>
-			<h1>I want to learn</h1>
-			<input type="text" />
-		</>
+		<div className="flex min-h-full flex-col justify-center">
+			<div className="mx-auto w-full max-w-2xl p-4 text-center">
+				<h1 className="text-center text-3xl font-bold">Welcome to the Public Home Route</h1>
+				<p className="text-muted-foreground text-center">This is a public route that anyone can access</p>
+				<Link href="/1password" className={cn("mt-4", buttonVariants({ variant: "default" }))}>
+					Go to random topic
+				</Link>
+			</div>
+		</div>
 	)
 }