created pages, topics header fixed

This commit is contained in:
marshennikovaolga
2024-08-11 15:40:45 +03:00
parent 6fd030a313
commit 9aad4a3603
2 changed files with 23 additions and 11 deletions

View File

@@ -16,7 +16,7 @@ export const ContentHeader = React.forwardRef<HTMLDivElement, ContentHeaderProps
return (
<header
className={cn(
"flex min-h-10 min-w-0 max-w-[100vw] shrink-0 items-center gap-3 border border-b pl-8 pr-6 transition-opacity max-lg:pl-4 max-lg:pr-5",
"flex min-h-20 min-w-0 max-w-[100vw] shrink-0 items-center gap-3 pl-8 pr-6 transition-opacity max-lg:pl-4 max-lg:pr-5",
className
)}
ref={ref}

View File

@@ -11,7 +11,7 @@ import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { useState } from "react"
import { useState, useEffect, useCallback } from "react"
import { useRouter } from "next/navigation"
const createPageSchema = z.object({
@@ -22,7 +22,20 @@ type PageFormValues = z.infer<typeof createPageSchema>
export const PageSection: React.FC = () => {
const { me } = useAccount()
const personalPages = me.root?.personalPages || []
const [personalPages, setPersonalPages] = useState<PersonalPage[]>([])
useEffect(() => {
if (me.root?.personalPages) {
setPersonalPages(prevPages => {
const newPages = Array.from(me.root?.personalPages ?? []).filter((page): page is PersonalPage => page !== null)
return [...prevPages, ...newPages.filter(newPage => !prevPages.some(prevPage => prevPage.id === newPage.id))]
})
}
}, [me.root?.personalPages])
const onPageCreated = useCallback((newPage: PersonalPage) => {
setPersonalPages(prevPages => [...prevPages, newPage])
}, [])
return (
<div className="-ml-2">
@@ -33,22 +46,22 @@ export const PageSection: React.FC = () => {
className="text-muted-foreground hover:bg-muted/50 flex h-6 grow cursor-default items-center justify-between gap-x-0.5 self-start rounded-md px-1 text-xs font-medium"
>
<span className="group-hover:text-muted-foreground">Pages</span>
<CreatePageForm />
<CreatePageForm onPageCreated={onPageCreated} />
</div>
</div>
<div className="relative shrink-0">
<div aria-hidden="false" className="ml-2 shrink-0 pb-2">
{personalPages.map(
page => page && <SidebarItem key={page.id} url={`/pages/${page.id}`} label={page.title} />
)}
<div aria-hidden="false" className="ml-2 flex shrink-0 flex-col space-y-1 pb-2">
{personalPages.map(page => (
<SidebarItem key={page.id} url={`/pages/${page.id}`} label={page.title} />
))}
</div>
</div>
</div>
)
}
const CreatePageForm: React.FC = () => {
const CreatePageForm: React.FC<{ onPageCreated: (page: PersonalPage) => void }> = ({ onPageCreated }) => {
const [open, setOpen] = useState(false)
const { me } = useAccount()
const route = useRouter()
@@ -75,13 +88,12 @@ const CreatePageForm: React.FC = () => {
)
me.root?.personalPages?.push(newPersonalPage)
onPageCreated(newPersonalPage)
form.reset()
setOpen(false)
route.push(`/pages/${newPersonalPage.id}`)
// toast.success("Page created successfully")
} catch (error) {
console.error(error)
toast.error("Failed to create page")