@@ -156,7 +183,7 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
{
onConfirm={() => {
confirmDelete(page)
}}
- title={page.title.charAt(0).toUpperCase() + page.title.slice(1)}
+ title={page.title || ""}
/>
)
diff --git a/web/components/routes/page/detail/header.tsx b/web/components/routes/page/detail/header.tsx
index d54bc0df..55e1e20e 100644
--- a/web/components/routes/page/detail/header.tsx
+++ b/web/components/routes/page/detail/header.tsx
@@ -2,20 +2,11 @@
import * as React from "react"
import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbList,
- BreadcrumbPage,
- BreadcrumbSeparator
-} from "@/components/ui/breadcrumb"
-import { useCoState } from "@/lib/providers/jazz-provider"
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb"
import { PersonalPage } from "@/lib/schema/personal-page"
import { ID } from "jazz-tools"
export const DetailPageHeader = ({ pageId }: { pageId: ID
}) => {
- const page = useCoState(PersonalPage, pageId)
-
return (
diff --git a/web/components/routes/topics/detail/Header.tsx b/web/components/routes/topics/detail/Header.tsx
index 8a72ac2d..0b9a9834 100644
--- a/web/components/routes/topics/detail/Header.tsx
+++ b/web/components/routes/topics/detail/Header.tsx
@@ -1,32 +1,98 @@
"use client"
import * as React from "react"
-import { Button } from "@/components/ui/button"
import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
-import { Topic } from "@/lib/schema"
+import { ListOfTopics, Topic } from "@/lib/schema"
+import { LearningStateSelector } from "@/components/custom/learning-state-selector"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { LearningStateValue } from "@/lib/constants"
interface TopicDetailHeaderProps {
topic: Topic
}
export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) {
+ const { me } = useAccount({
+ root: {
+ topicsWantToLearn: [],
+ topicsLearning: [],
+ topicsLearned: []
+ }
+ })
+
+ let p: {
+ index: number
+ topic?: Topic | null
+ learningState: LearningStateValue
+ } | null = null
+
+ const wantToLearnIndex = me?.root.topicsWantToLearn.findIndex(t => t?.id === topic.id) ?? -1
+ if (wantToLearnIndex !== -1) {
+ p = {
+ index: wantToLearnIndex,
+ topic: me?.root.topicsWantToLearn[wantToLearnIndex],
+ learningState: "wantToLearn"
+ }
+ }
+
+ const learningIndex = me?.root.topicsLearning.findIndex(t => t?.id === topic.id) ?? -1
+ if (learningIndex !== -1) {
+ p = {
+ index: learningIndex,
+ topic: me?.root.topicsLearning[learningIndex],
+ learningState: "learning"
+ }
+ }
+
+ const learnedIndex = me?.root.topicsLearned.findIndex(t => t?.id === topic.id) ?? -1
+ if (learnedIndex !== -1) {
+ p = {
+ index: learnedIndex,
+ topic: me?.root.topicsLearned[learnedIndex],
+ learningState: "learned"
+ }
+ }
+
+ const handleAddToProfile = (learningState: LearningStateValue) => {
+ const topicLists: Record
= {
+ wantToLearn: me?.root.topicsWantToLearn,
+ learning: me?.root.topicsLearning,
+ learned: me?.root.topicsLearned
+ }
+
+ const removeFromList = (state: LearningStateValue, index: number) => {
+ topicLists[state]?.splice(index, 1)
+ }
+
+ if (p) {
+ if (learningState === p.learningState) {
+ removeFromList(p.learningState, p.index)
+ return
+ }
+ removeFromList(p.learningState, p.index)
+ }
+
+ topicLists[learningState]?.push(topic)
+ }
+
return (
- <>
-
-
-
-
- {topic.prettyName}
-
+
+
+
+
+ {topic.prettyName}
+
-
+
+
)
})
diff --git a/web/components/routes/topics/detail/TopicDetailRoute.tsx b/web/components/routes/topics/detail/TopicDetailRoute.tsx
index c4d9c331..6843b7c5 100644
--- a/web/components/routes/topics/detail/TopicDetailRoute.tsx
+++ b/web/components/routes/topics/detail/TopicDetailRoute.tsx
@@ -1,108 +1,41 @@
"use client"
import React from "react"
-import Link from "next/link"
-import { useCoState } from "@/lib/providers/jazz-provider"
-import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
-import { ID } from "jazz-tools"
import { TopicDetailHeader } from "./Header"
-import { LaIcon } from "@/components/custom/la-icon"
-import { cn, ensureUrlProtocol } from "@/lib/utils"
-import { Section as SectionSchema, Link as LinkSchema } from "@/lib/schema"
+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"
interface TopicDetailRouteProps {
topicName: string
}
+export const openPopoverForIdAtom = atom
(null)
+
export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
- const topics = useCoState(PublicGlobalGroup, process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID, {
- root: {
- topics: []
- }
- })
+ const { me } = useAccount({ root: { personalLinks: [] } })
+ const { topic, allLinks } = useTopicData(topicName)
+ const { activeIndex, setActiveIndex, containerRef, linkRefs } = useLinkNavigation(allLinks)
- const topic = topics?.root.topics.find(topic => topic?.name === topicName)
-
- if (!topic) {
+ if (!topic || !me) {
return null
}
return (
-
-
-
- {topic.latestGlobalGuide?.sections?.map(
- (section, index) => section?.id &&
- )}
-
-
-
+
)
}
-
-interface SectionProps {
- section: SectionSchema
-}
-
-function Section({ section }: SectionProps) {
- return (
-
-
-
-
- {section.links?.map((link, index) => link?.url && )}
-
-
-
-
-
-
-
- {link.title}
-
-
-
-
- e.stopPropagation()}
- className="text-muted-foreground hover:text-primary text-xs"
- >
- {link.url}
-
-
-
-
-
-
-
+
+
+
+
+
+ e.preventDefault()}
+ >
+ handleSelectLearningState(value as LearningStateValue)}
+ />
+
+
+
+
+
+
+ {link.title}
+
+
+
+
+
+ e.stopPropagation()}
+ className="text-muted-foreground hover:text-primary text-xs"
+ >
+ {link.url}
+
+
+
+
+
+
+
+
+
+
+ {section.links?.map(
+ (link, index) =>
+ link?.url && (
+ {
+ linkRefs.current[startIndex + index] = el
+ }}
+ me={me}
+ personalLinks={personalLinks}
+ />
+ )
+ )}
+
+
+
+
+ {sections?.map(
+ (section, sectionIndex) =>
+ section?.id && (
+ acc + (s?.links?.length || 0), 0)}
+ linkRefs={linkRefs}
+ me={me}
+ personalLinks={personalLinks}
+ />
+ )
+ )}
+
+
+