fix: topic for guest auth (#149)

* wip * chore: redirect instead of toast * refactor: remove useRouter
2026-01-12 12:20:23 +01:00 · 2024-09-08 04:30:11 +07:00
parent 9e4544894c
commit cb9e8f46da
5 changed files with 215 additions and 256 deletions
--- a/web/components/routes/topics/detail/Header.tsx
+++ b/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
-			toast.error("You need to sign in to add links to your personal list.")
-			return
+			return clerk.redirectToSignIn({
+				redirectUrl: pathname
+			})
 		}

 		const topicLists: Record<LearningStateValue, (ListOfTopics | null) | undefined> = {
--- a/web/components/routes/topics/detail/partials/link-item.tsx
+++ b/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,185 +25,183 @@ interface LinkItemProps {
 }

 export const LinkItem = React.memo(
-	React.forwardRef<HTMLLIElement, LinkItemProps>(
-		({ topic, link, isActive, index, setActiveIndex }, ref) => {
-			const router = useRouter()
-			const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
-			const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+	React.forwardRef<HTMLLIElement, LinkItemProps>(({ 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;
-				return me?.root?.personalLinks || []
-			}, [me])
+		const personalLinks = useMemo(() => {
+			if (!me || me._type === "Anonymous") return undefined
+			return me?.root?.personalLinks || []
+		}, [me])

-			const personalLink = useMemo(() => {
-				return personalLinks?.find(pl => pl?.link?.id === link.id)
-			}, [personalLinks, link.id])
+		const personalLink = useMemo(() => {
+			return personalLinks?.find(pl => pl?.link?.id === link.id)
+		}, [personalLinks, link.id])

-			const selectedLearningState = useMemo(() => {
-				return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
-			}, [personalLink?.learningState])
+		const selectedLearningState = useMemo(() => {
+			return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
+		}, [personalLink?.learningState])

-			const handleClick = useCallback(
-				(e: React.MouseEvent) => {
-					e.preventDefault()
-					setActiveIndex(index)
-				},
-				[index, setActiveIndex]
-			)
+		const handleClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.preventDefault()
+				setActiveIndex(index)
+			},
+			[index, setActiveIndex]
+		)

-			const handleSelectLearningState = useCallback(
-				(learningState: LearningStateValue) => {
-					if (!personalLinks || !me || me?._type === "Anonymous") {
-						if (me?._type === "Anonymous") {
-							// TODO: handle better
-							toast.error("You need to sign in to add links to your personal list.")
-						}
-						return
-					};
+		const handleSelectLearningState = useCallback(
+			(learningState: LearningStateValue) => {
+				if (!personalLinks || !me || me?._type === "Anonymous") {
+					return clerk.redirectToSignIn({
+						redirectUrl: pathname
+					})
+				}

-					const defaultToast = {
-						duration: 5000,
-						position: "bottom-right" as const,
-						closeButton: true,
-						action: {
-							label: "Go to list",
-							onClick: () => router.push("/")
-						}
+				const defaultToast = {
+					duration: 5000,
+					position: "bottom-right" as const,
+					closeButton: true,
+					action: {
+						label: "Go to list",
+						onClick: () => router.push("/")
 					}
+				}

-					if (personalLink) {
-						if (personalLink.learningState === learningState) {
-							personalLink.learningState = undefined
-							toast.error("Link learning state removed", defaultToast)
-						} else {
-							personalLink.learningState = learningState
-							toast.success("Link learning state updated", defaultToast)
-						}
+				if (personalLink) {
+					if (personalLink.learningState === learningState) {
+						personalLink.learningState = undefined
+						toast.error("Link learning state removed", defaultToast)
 					} else {
-						const slug = generateUniqueSlug(personalLinks.toJSON(), link.title)
-						const newPersonalLink = PersonalLink.create(
-							{
-								url: link.url,
-								title: link.title,
-								slug,
-								link,
-								learningState,
-								sequence: personalLinks.length + 1,
-								completed: false,
-								topic,
-								createdAt: new Date(),
-								updatedAt: new Date()
-							},
-							{ owner: me }
-						)
-
-						personalLinks.push(newPersonalLink)
-
-						toast.success("Link added.", {
-							...defaultToast,
-							description: `${link.title} has been added to your personal link.`
-						})
+						personalLink.learningState = learningState
+						toast.success("Link learning state updated", defaultToast)
 					}
+				} else {
+					const slug = generateUniqueSlug(personalLinks.toJSON(), link.title)
+					const newPersonalLink = PersonalLink.create(
+						{
+							url: link.url,
+							title: link.title,
+							slug,
+							link,
+							learningState,
+							sequence: personalLinks.length + 1,
+							completed: false,
+							topic,
+							createdAt: new Date(),
+							updatedAt: new Date()
+						},
+						{ owner: me }
+					)

-					setOpenPopoverForId(null)
-					setIsPopoverOpen(false)
-				},
-				[personalLink, personalLinks, me, link, router, setOpenPopoverForId, topic]
-			)
+					personalLinks.push(newPersonalLink)

-			const handlePopoverOpenChange = useCallback(
-				(open: boolean) => {
-					setIsPopoverOpen(open)
-					setOpenPopoverForId(open ? link.id : null)
-				},
-				[link.id, setOpenPopoverForId]
-			)
+					toast.success("Link added.", {
+						...defaultToast,
+						description: `${link.title} has been added to your personal link.`
+					})
+				}

-			return (
-				<li
-					ref={ref}
-					tabIndex={0}
-					onClick={handleClick}
-					className={cn("relative flex h-14 cursor-pointer items-center outline-none xl:h-11", {
-						"bg-muted-foreground/10": isActive,
-						"hover:bg-muted/50": !isActive
-					})}
-				>
-					<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
-						<div className="flex min-w-0 items-center gap-x-4">
-							<Popover open={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
-								<PopoverTrigger asChild>
-									<Button
-										size="sm"
-										type="button"
-										role="combobox"
-										variant="secondary"
-										className={cn("size-7 shrink-0 p-0", "hover:bg-accent-foreground/10")}
-										onClick={e => e.stopPropagation()}
-									>
-										{selectedLearningState?.icon ? (
-											<LaIcon name={selectedLearningState.icon} className={selectedLearningState.className} />
-										) : (
-											<LaIcon name="Circle" />
-										)}
-									</Button>
-								</PopoverTrigger>
-								<PopoverContent
-									className="w-52 rounded-lg p-0"
-									side="bottom"
-									align="start"
-									onCloseAutoFocus={e => e.preventDefault()}
+				setOpenPopoverForId(null)
+				setIsPopoverOpen(false)
+			},
+			[personalLink, personalLinks, me, link, router, setOpenPopoverForId, topic]
+		)
+
+		const handlePopoverOpenChange = useCallback(
+			(open: boolean) => {
+				setIsPopoverOpen(open)
+				setOpenPopoverForId(open ? link.id : null)
+			},
+			[link.id, setOpenPopoverForId]
+		)
+
+		return (
+			<li
+				ref={ref}
+				tabIndex={0}
+				onClick={handleClick}
+				className={cn("relative flex h-14 cursor-pointer items-center outline-none xl:h-11", {
+					"bg-muted-foreground/10": isActive,
+					"hover:bg-muted/50": !isActive
+				})}
+			>
+				<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
+					<div className="flex min-w-0 items-center gap-x-4">
+						<Popover open={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
+							<PopoverTrigger asChild>
+								<Button
+									size="sm"
+									type="button"
+									role="combobox"
+									variant="secondary"
+									className={cn("size-7 shrink-0 p-0", "hover:bg-accent-foreground/10")}
+									onClick={e => e.stopPropagation()}
 								>
-									<LearningStateSelectorContent
-										showSearch={false}
-										searchPlaceholder="Search state..."
-										value={personalLink?.learningState}
-										onSelect={(value: string) => handleSelectLearningState(value as LearningStateValue)}
+									{selectedLearningState?.icon ? (
+										<LaIcon name={selectedLearningState.icon} className={selectedLearningState.className} />
+									) : (
+										<LaIcon name="Circle" />
+									)}
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent
+								className="w-52 rounded-lg p-0"
+								side="bottom"
+								align="start"
+								onCloseAutoFocus={e => e.preventDefault()}
+							>
+								<LearningStateSelectorContent
+									showSearch={false}
+									searchPlaceholder="Search state..."
+									value={personalLink?.learningState}
+									onSelect={(value: string) => handleSelectLearningState(value as LearningStateValue)}
+								/>
+							</PopoverContent>
+						</Popover>
+
+						<div className="w-full min-w-0 flex-auto">
+							<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
+								<p
+									className={cn(
+										"text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate",
+										isActive && "font-bold"
+									)}
+								>
+									{link.title}
+								</p>
+
+								<div className="group flex items-center gap-x-1">
+									<LaIcon
+										name="Link"
+										aria-hidden="true"
+										className="text-muted-foreground group-hover:text-primary flex-none"
 									/>
-								</PopoverContent>
-							</Popover>

-							<div className="w-full min-w-0 flex-auto">
-								<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-									<p
-										className={cn(
-											"text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate",
-											isActive && "font-bold"
-										)}
+									<Link
+										href={ensureUrlProtocol(link.url)}
+										passHref
+										prefetch={false}
+										target="_blank"
+										onClick={e => e.stopPropagation()}
+										className="text-muted-foreground hover:text-primary text-xs"
 									>
-										{link.title}
-									</p>
-
-									<div className="group flex items-center gap-x-1">
-										<LaIcon
-											name="Link"
-											aria-hidden="true"
-											className="text-muted-foreground group-hover:text-primary flex-none"
-										/>
-
-										<Link
-											href={ensureUrlProtocol(link.url)}
-											passHref
-											prefetch={false}
-											target="_blank"
-											onClick={e => e.stopPropagation()}
-											className="text-muted-foreground hover:text-primary text-xs"
-										>
-											<span className="xl:truncate">{link.url}</span>
-										</Link>
-									</div>
+										<span className="xl:truncate">{link.url}</span>
+									</Link>
 								</div>
 							</div>
 						</div>
-						<div className="flex shrink-0 items-center gap-x-4"></div>
 					</div>
-				</li>
-			)
-		}
-	)
+					<div className="flex shrink-0 items-center gap-x-4"></div>
+				</div>
+			</li>
+		)
+	})
 )

 LinkItem.displayName = "LinkItem"