fix: topic for guest auth (#149)

* wip

* chore: redirect instead of toast

* refactor: remove useRouter

web/components/custom/sidebar/partial/link-section.tsx

@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
 import { useQueryState, parseAsStringLiteral } from "nuqs"
 import { LEARNING_STATES } from "@/lib/constants"
-import { useRouter } from "next/navigation"
 
 export const LinkSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 	const { me } = useAccount({

web/components/custom/sidebar/partial/profile-section.tsx

@@ -1,7 +1,6 @@
-import { useAccount } from "@/lib/providers/jazz-provider"
+import { LaIcon } from "@/components/custom/la-icon"
-import { LaIcon } from "../../la-icon"
 import { useState } from "react"
-import { useAuth } from "@clerk/nextjs"
+import { SignInButton, useAuth, useUser } from "@clerk/nextjs"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -11,97 +10,68 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Avatar, AvatarImage } from "@/components/ui/avatar"
 import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { usePathname } from "next/navigation"
 
-const MenuItem = ({
+export const ProfileSection: React.FC = () => {
-	icon,
+	const { user, isSignedIn } = useUser()
-	text,
+	const { signOut } = useAuth()
-	href,
+	const [menuOpen, setMenuOpen] = useState(false)
-	onClick,
+	const pathname = usePathname()
-	onClose
-}: {
-	icon: string
-	text: string
-	href?: string
-	onClick?: () => void
-	onClose: () => void
-}) => {
-	const handleClick = () => {
-		onClose()
-		if (onClick) {
-			onClick()
-		}
-	}
 
+	if (!isSignedIn) {
 		return (
-		<div className="relative flex flex-1 items-center gap-2">
+			<div className="flex flex-col gap-px border-t border-transparent px-3 py-2 pb-3 pt-1.5">
-			<LaIcon name={icon as any} />
+				<SignInButton mode="modal" forceRedirectUrl={pathname}>
-			{href ? (
+					<Button variant="outline" className="flex w-full items-center gap-2">
-				<Link href={href} onClick={onClose}>
+						<LaIcon name="LogIn" />
-					<span className="line-clamp-1 flex-1">{text}</span>
+						Sign in
-				</Link>
+					</Button>
-			) : (
+				</SignInButton>
-				<span className="line-clamp-1 flex-1" onClick={handleClick}>
-					{text}
-				</span>
-			)}
 			</div>
 		)
-}
+	}
-export const ProfileSection: React.FC = () => {
-	const { me } = useAccount({
-		profile: true
-	})
-	const { signOut, isSignedIn } = useAuth()
-	const [menuOpen, setMenuOpen] = useState(false)
-
-	const closeMenu = () => setMenuOpen(false)
 
 	return (
-		<div className="visible absolute inset-x-0 bottom-0 z-10 flex gap-8 p-2.5">
+		<div className="flex flex-col gap-px border-t border-transparent px-3 py-2 pb-3 pt-1.5">
 			<div className="flex h-10 min-w-full items-center">
 				<div className="flex min-w-0">
 					<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
 						<DropdownMenuTrigger asChild>
-							<button
+							<Button
+								variant="ghost"
 								aria-label="Profile"
-								className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex items-center gap-1.5 truncate rounded pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
+								className="hover:bg-accent focus-visible:ring-ring hover:text-accent-foreground flex h-auto items-center gap-1.5 truncate rounded py-1 pl-1 pr-1.5 focus-visible:outline-none focus-visible:ring-1"
 							>
-								{isSignedIn ? (
 								<Avatar className="size-6">
-										<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+									<AvatarImage src={user.imageUrl} alt={user.fullName || ""} />
 								</Avatar>
-								) : (
+								<span className="truncate text-left text-sm font-medium -tracking-wider">{user.fullName}</span>
-									<LaIcon name="User" />
-								)}
-								<span className="truncate text-left text-sm font-medium -tracking-wider">
-									{isSignedIn ? me?.profile?.name : "guest"}
-								</span>
 								<LaIcon
 									name="ChevronDown"
-									className={`size-4 shrink-0 transition-transform duration-300 ${menuOpen ? "rotate-180" : ""}`}
+									className={cn("size-4 shrink-0 transition-transform duration-300", {
+										"rotate-180": menuOpen
+									})}
 								/>
-							</button>
+							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent className="w-56" align="start" side="top">
-							{isSignedIn ? (
+							<DropdownMenuItem asChild>
-								<>
+								<Link href="/profile">
-									<DropdownMenuItem>
+									<div className="relative flex flex-1 items-center gap-2">
-										<MenuItem icon="CircleUser" text="My profile" href="/profile" onClose={closeMenu} />
+										<LaIcon name="CircleUser" />
+										<span className="line-clamp-1 flex-1">My profile</span>
+									</div>
+								</Link>
 							</DropdownMenuItem>
 							<DropdownMenuSeparator />
-									<DropdownMenuItem>
+							<DropdownMenuItem onClick={() => signOut()}>
-										<MenuItem icon="LogOut" text="Log out" onClick={signOut} onClose={closeMenu} />
+								<div className="relative flex flex-1 items-center gap-2">
+									<LaIcon name="LogOut" />
+									<span className="line-clamp-1 flex-1">Log out</span>
+								</div>
 							</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuItem>
-										<MenuItem icon="CircleUser" text="Tauri" href="/tauri" onClose={closeMenu} />
-									</DropdownMenuItem>
-								</>
-							) : (
-								<DropdownMenuItem>
-									<MenuItem icon="LogIn" text="Sign in" href="/sign-in" onClose={closeMenu} />
-								</DropdownMenuItem>
-							)}
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</div>
@@ -109,7 +79,3 @@ export const ProfileSection: React.FC = () => {
 		</div>
 	)
 }
-
-/* <DropdownMenuItem>
-								<MenuItem icon="Settings" text="Settings" href="/settings" onClose={closeMenu} />
-							</DropdownMenuItem> */

web/components/custom/sidebar/sidebar.tsx

@@ -15,7 +15,6 @@ import { PageSection } from "./partial/page-section"
 import { TopicSection } from "./partial/topic-section"
 import { ProfileSection } from "./partial/profile-section"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
-import { SignInButton } from "@clerk/nextjs"
 
 interface SidebarContextType {
 	isCollapsed: boolean
@@ -126,15 +125,9 @@ const SidebarContent: React.FC = React.memo(() => {
 					{me._type === "Account" && <PageSection pathname={pathname} />}
 					{me._type === "Account" && <TopicSection pathname={pathname} />}
 				</div>
-			</nav>
 
-			{me._type === "Account" ? (
 				<ProfileSection />
-			) : (
+			</nav>
-				<div className="visible absolute inset-x-0 bottom-0 z-10 flex gap-8 p-2.5">
-					<SignInButton>Fake profile section</SignInButton>
-				</div>
-			)}
 		</>
 	)
 })

web/components/routes/topics/detail/Header.tsx

@@ -6,13 +6,16 @@ import { ListOfTopics, Topic } from "@/lib/schema"
 import { LearningStateSelector } from "@/components/custom/learning-state-selector"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { LearningStateValue } from "@/lib/constants"
-import { toast } from "sonner"
+import { useClerk } from "@clerk/nextjs"
+import { usePathname } from "next/navigation"
 
 interface TopicDetailHeaderProps {
 	topic: Topic
 }
 
 export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) {
+	const clerk = useClerk()
+	const pathname = usePathname()
 	const { me } = useAccountOrGuest({
 		root: {
 			topicsWantToLearn: [],
@@ -32,7 +35,6 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 	if (wantToLearnIndex !== -1) {
 		p = {
 			index: wantToLearnIndex,
-			// TODO: fix this type error by doing better conditionals on both index and p
 			topic: me && me._type !== "Anonymous" ? me.root.topicsWantToLearn[wantToLearnIndex] : undefined,
 			learningState: "wantToLearn"
 		}
@@ -60,9 +62,9 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 
 	const handleAddToProfile = (learningState: LearningStateValue) => {
 		if (me?._type === "Anonymous") {
-			// TODO: handle better
+			return clerk.redirectToSignIn({
-			toast.error("You need to sign in to add links to your personal list.")
+				redirectUrl: pathname
-			return
+			})
 		}
 
 		const topicLists: Record<LearningStateValue, (ListOfTopics | null) | undefined> = {

web/components/routes/topics/detail/partials/link-item.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react"
 import Link from "next/link"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useAtom } from "jotai"
 import { toast } from "sonner"
 
@@ -10,10 +10,11 @@ import { Button } from "@/components/ui/button"
 import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"
 
 import { cn, ensureUrlProtocol, generateUniqueSlug } from "@/lib/utils"
-import { LaAccount, Link as LinkSchema, PersonalLink, PersonalLinkLists, Topic, UserRoot } from "@/lib/schema"
+import { Link as LinkSchema, PersonalLink, Topic } from "@/lib/schema"
 import { openPopoverForIdAtom } from "../TopicDetailRoute"
 import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
+import { useClerk } from "@clerk/nextjs"
 
 interface LinkItemProps {
 	topic: Topic
@@ -24,16 +25,17 @@ interface LinkItemProps {
 }
 
 export const LinkItem = React.memo(
-	React.forwardRef<HTMLLIElement, LinkItemProps>(
+	React.forwardRef<HTMLLIElement, LinkItemProps>(({ topic, link, isActive, index, setActiveIndex }, ref) => {
-		({ topic, link, isActive, index, setActiveIndex }, ref) => {
+		const clerk = useClerk()
+		const pathname = usePathname()
 		const router = useRouter()
 		const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
 		const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
-			const { me } = useAccountOrGuest({ root: { personalLinks: [] } });
+		const { me } = useAccountOrGuest({ root: { personalLinks: [] } })
 
 		const personalLinks = useMemo(() => {
-				if (!me || me._type === "Anonymous") return undefined;
+			if (!me || me._type === "Anonymous") return undefined
 			return me?.root?.personalLinks || []
 		}, [me])
 
@@ -56,12 +58,10 @@ export const LinkItem = React.memo(
 		const handleSelectLearningState = useCallback(
 			(learningState: LearningStateValue) => {
 				if (!personalLinks || !me || me?._type === "Anonymous") {
-						if (me?._type === "Anonymous") {
+					return clerk.redirectToSignIn({
-							// TODO: handle better
+						redirectUrl: pathname
-							toast.error("You need to sign in to add links to your personal list.")
+					})
 				}
-						return
-					};
 
 				const defaultToast = {
 					duration: 5000,
@@ -201,8 +201,7 @@ export const LinkItem = React.memo(
 				</div>
 			</li>
 		)
-		}
+	})
-	)
 )
 
 LinkItem.displayName = "LinkItem"