wip

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

@@ -1,23 +1,53 @@
 "use client"
 
-import React from "react"
+import React, { useMemo } from "react"
 import { TopicDetailHeader } from "./Header"
 import { TopicSections } from "./partials/topic-sections"
 import { useLinkNavigation } from "./use-link-navigation"
 import { useTopicData } from "@/hooks/use-topic-data"
 import { atom } from "jotai"
-import { useAccount } from "@/lib/providers/jazz-provider"
+import { useAccount, useCoState } from "@/lib/providers/jazz-provider"
+import { Link, Topic } from "@/lib/schema"
+import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
+import { ID } from "jazz-tools"
+import { LinkItem } from "./partials/link-item"
 
 interface TopicDetailRouteProps {
 	topicName: string
 }
 
 export const openPopoverForIdAtom = atom<string | null>(null)
+const GLOBAL_GROUP_ID = process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID<PublicGlobalGroup>
 
 export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
 	const { me } = useAccount({ root: { personalLinks: [] } })
-	const { topic, allLinks } = useTopicData(topicName)
-	const { activeIndex, setActiveIndex, containerRef, linkRefs } = useLinkNavigation(allLinks)
+
+	// const { topic, allLinks, transformedData } = useTopicData(topicName, me)
+
+	// const findTopic = useMemo(() => me && Topic.findUnique({ topicName }, GLOBAL_GROUP_ID, me), [me])
+	// const topic = useCoState(Topic, findTopic, { latestGlobalGuide: { sections: [{ links: [] }] } })
+	const topic = useCoState(Topic, "co_z729EvE8fQEgMGNGaR4HKa1Jfir" as ID<Topic>, {})
+
+	const transformedData = useMemo(() => {
+		if (!topic?.latestGlobalGuide?.sections) return []
+
+		return topic.latestGlobalGuide.sections.flatMap(section => [
+			{ type: "section", data: section },
+			...(section?.links?.filter(link => !!link?.url).map(link => ({ type: "link", data: link })) || [])
+		])
+	}, [topic?.latestGlobalGuide?.sections])
+
+	// console.log({ transformedData}, "transformedData")
+
+	// const allLinks = useMemo(() => {
+	// 	if (!topic?.latestGlobalGuide?.sections) return []
+
+	// 	return topic.latestGlobalGuide.sections.flatMap(
+	// 		section => section?.links?.filter((link): link is Link => !!link?.url) ?? []
+	// 	)
+	// }, [topic?.latestGlobalGuide?.sections])
+
+	// const { activeIndex, setActiveIndex, containerRef, linkRefs } = useLinkNavigation(allLinks)
 
 	if (!topic || !me) {
 		return null
@@ -26,7 +56,7 @@ export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
 	return (
 		<div className="flex h-full flex-auto flex-col">
 			<TopicDetailHeader topic={topic} />
-			<TopicSections
+			{/* <TopicSections
 				topic={topic}
 				sections={topic.latestGlobalGuide?.sections}
 				activeIndex={activeIndex}
@@ -35,7 +65,45 @@ export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
 				containerRef={containerRef}
 				me={me}
 				personalLinks={me.root.personalLinks}
-			/>
+			/> */}
+
+			<div className="flex w-full flex-1 flex-col overflow-y-auto [scrollbar-gutter:stable]">
+				<div tabIndex={-1} className="outline-none">
+					<div className="flex flex-1 flex-col gap-4" role="listbox" aria-label="Topic sections">
+						{transformedData?.map((data, index) =>
+							data.type === "section" ? (
+								<Section
+									key={index}
+									section={data.data}
+									// key={sectionIndex}
+									// topic={topic}
+									// section={section}
+									// activeIndex={activeIndex}
+									// setActiveIndex={setActiveIndex}
+									// startIndex={sections.slice(0, sectionIndex).reduce((acc, s) => acc + (s?.links?.length || 0), 0)}
+									// linkRefs={linkRefs}
+									// me={me}
+									// personalLinks={personalLinks}
+								/>
+							) : (
+								<LinkItem
+									key={index}
+									link={link}
+									topic={topic}
+									isActive={activeIndex === startIndex + index}
+									index={startIndex + index}
+									setActiveIndex={setActiveIndex}
+									ref={el => {
+										linkRefs.current[startIndex + index] = el
+									}}
+									me={me}
+									personalLinks={personalLinks}
+								/>
+							)
+						)}
+					</div>
+				</div>
+			</div>
 		</div>
 	)
 }