Merge pull request #26 from mlhiter/dev

fix: data title error

Author: mlhiter

app/(main)/(routes)/documents/[documentId]/page.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { debounce } from 'lodash'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import Cover from '@/components/cover'
 import Toolbar from '@/components/toolbar'
 import { Skeleton } from '@/components/ui/skeleton'
 import { EditorWrapper } from '@/components/editor/editor-wrapper'
 
 import { useDocument } from '@/stores/use-document'
-import { Doc, getById, update } from '@/api/document'
+import { getById, update } from '@/api/document'
 
 interface DocumentIdPageProps {
   params: {
@@ -18,9 +18,7 @@ interface DocumentIdPageProps {
 }
 
 const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
-  const { onSetDocument } = useDocument()
-  const [document, setDocument] = useState<Doc>()
-
+  const { document, onSetDocument } = useDocument()
   const onChange = async (content: string) => {
     await update({
       _id: params.documentId,
@@ -34,13 +32,11 @@ const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
     const fetchDocument = async () => {
       const response = await getById(params.documentId)
       const document = response.data
-      console.log('fetchDocument', document)
       onSetDocument(document)
-      setDocument(document)
     }
 
     fetchDocument()
-  }, [])
+  }, [params.documentId])
 
   if (document === undefined) {
     return (
@@ -62,12 +58,11 @@ const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
     return <div>Not found</div>
   }
 
-  // FIXME: data will disappear when we navigate to another page.
   return (
     <div className="pb-40">
       <Cover url={document.coverImage} />
       <div className="mx-auto md:max-w-3xl lg:max-w-4xl">
-        <Toolbar initialData={document} />
+        <Toolbar />
         <EditorWrapper
           onChange={debounceOnChange}
           documentId={params.documentId}

app/(main)/components/document-list.tsx

@@ -1,14 +1,13 @@
 'use client'
 
-import useSWR from 'swr'
 import { useState } from 'react'
 import { FileIcon } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 
 import Item from './item'
-import axios from '@/lib/axios'
 import { cn } from '@/lib/utils'
 import { Doc } from '@/api/document'
+import { useSidebar } from '@/hooks/use-sidebar'
 
 interface DocumentListProps {
   parentDocumentId?: string
@@ -36,12 +35,7 @@ const DocumentList = ({
 
   parentDocumentId = parentDocumentId ? parentDocumentId : ''
 
-  const fetcher = (url: string) => axios.get(url).then((res) => res.data)
-
-  const { data: documents } = useSWR(
-    `/api/document/sidebar?parentDocument=${parentDocumentId}&type=${type}`,
-    fetcher
-  )
+  const { documents } = useSidebar(parentDocumentId, type)
 
   // function: 点击重定向到文档详情页
   const onRedirect = (documentId: string) => {

components/toolbar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { mutate } from 'swr'
 import { ImageIcon, Smile, X } from 'lucide-react'
 import { ElementRef, useRef, useState } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
@@ -8,38 +9,39 @@ import { Button } from './ui/button'
 import IconPicker from './icon-picker'
 import { useDocument } from '@/stores/use-document'
 import { useCoverImage } from '@/stores/use-cover-image'
-import { Doc, removeIcon, update } from '@/api/document'
+import { removeIcon, update } from '@/api/document'
 
 interface ToolbarProps {
-  initialData: Doc
   preview?: boolean
 }
 
-const Toolbar = ({ initialData, preview }: ToolbarProps) => {
+const Toolbar = ({ preview }: ToolbarProps) => {
   const inputRef = useRef<ElementRef<'textarea'>>(null)
   const [isEditing, setIsEditing] = useState(false)
-  const [value, setValue] = useState(initialData.title)
-  const { onSetDocument } = useDocument()
+  const { document, onSetDocument } = useDocument()
 
   const coverImage = useCoverImage()
   const enableInput = () => {
     if (preview) return
     setIsEditing(true)
 
     setTimeout(() => {
-      setValue(initialData.title)
       inputRef.current?.focus()
     }, 0)
   }
 
   const disableInput = async () => {
     setIsEditing(false)
     const response = await update({
-      _id: initialData._id,
-      title: value || 'Untitled',
+      _id: document?._id!,
+      title: document?.title || 'Untitled',
     })
     const newDocument = response.data
     onSetDocument(newDocument)
+    mutate(
+      (key) =>
+        typeof key === 'string' && key.startsWith('/api/document/sidebar')
+    )
   }
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -50,27 +52,27 @@ const Toolbar = ({ initialData, preview }: ToolbarProps) => {
   }
   const onIconSelect = async (icon: string) => {
     const response = await update({
-      _id: initialData._id,
+      _id: document?._id!,
       icon,
     })
     const newDocument = response.data
     onSetDocument(newDocument)
   }
 
   const onRemoveIcon = async () => {
-    const response = await removeIcon(initialData._id)
+    const response = await removeIcon(document?._id!)
     const newDocument = response.data
     onSetDocument(newDocument)
   }
 
   return (
     <div className="group relative pl-[54px]">
-      {!!initialData.icon && !preview && (
+      {!!document?.icon && !preview && (
         <div className="group/icon flex items-center gap-x-2 pt-6">
           <IconPicker onChange={onIconSelect}>
             {/* FIXME:浏览器无法正确渲染emoji */}
             <p className="text-6xl transition hover:opacity-75">
-              {initialData.icon}
+              {document?.icon}
             </p>
           </IconPicker>
           <Button
@@ -82,11 +84,11 @@ const Toolbar = ({ initialData, preview }: ToolbarProps) => {
           </Button>
         </div>
       )}
-      {!!initialData.icon && preview && (
-        <p className="pt-6 text-6xl">{initialData.icon}</p>
+      {!!document?.icon && preview && (
+        <p className="pt-6 text-6xl">{document?.icon}</p>
       )}
       <div className="flex items-center gap-x-1 py-4 opacity-0 group-hover:opacity-100">
-        {!initialData.icon && !preview && (
+        {!document?.icon && !preview && (
           <IconPicker asChild onChange={onIconSelect}>
             <Button
               className="text-xs text-muted-foreground"
@@ -97,7 +99,7 @@ const Toolbar = ({ initialData, preview }: ToolbarProps) => {
             </Button>
           </IconPicker>
         )}
-        {!initialData.coverImage && !preview && (
+        {!document?.coverImage && !preview && (
           <Button
             onClick={coverImage.onOpen}
             className="text-xs text-muted-foreground"
@@ -113,15 +115,17 @@ const Toolbar = ({ initialData, preview }: ToolbarProps) => {
           ref={inputRef}
           onBlur={disableInput}
           onKeyDown={onKeyDown}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
+          value={document?.title}
+          onChange={(e) =>
+            onSetDocument({ ...document!, title: e.target.value })
+          }
           className="resize-none break-words bg-transparent text-5xl font-bold text-[#3F3F3F] outline-none dark:text-[#CFCFCF]"
         />
       ) : (
         <div
           onClick={enableInput}
           className="break-words pb-[11.5px] text-5xl font-bold text-[#3F3F3F] outline-none dark:text-[#CFCFCF]">
-          {value}
+          {document?.title}
         </div>
       )}
     </div>

hooks/use-sidebar.tsx

@@ -0,0 +1,18 @@
+import useSWR from 'swr'
+
+import axios from '@/lib/axios'
+import { Doc } from '@/api/document'
+
+const fetcher = (url: string) => axios.get(url).then((res) => res.data)
+
+export const useSidebar = (parentDocumentId: string, type: string) => {
+  const { data: documents, mutate } = useSWR<Doc[]>(
+    `/api/document/sidebar?parentDocument=${parentDocumentId}&type=${type}`,
+    fetcher
+  )
+
+  return {
+    documents,
+    mutate,
+  }
+}