Subscribe change events

.vscode/settings.json

@@ -6,6 +6,7 @@
     "Gapcursor",
     "lowlight",
     "orenotion",
-    "signin"
+    "signin",
+    "unsub"
   ]
 }

src/components/uis/Sidebar/PageItem/PageItem.tsx

@@ -1,33 +1,36 @@
 import Link from 'next/link'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import { usePage } from '@/hooks'
+import { Unsubscribe } from 'firebase/auth'
 
 import { IconButton } from '@/components/uis/Icon/IconButton/IconButton'
 
-import { Menu } from '../../Menu'
+import { Page } from '@/models/page'
 
-type PageType = {
-  id: string
-  emoji?: string
-  title: string
-}
+import { Menu } from '../../Menu'
 
 type Props = {
-  page: PageType
-  childPages?: PageType[]
+  page: Page
+  // childPages?: PageType[]
+  onDelete: (id: string) => void
+  unsubscribe: (id: string) => Unsubscribe
 }
 
-export const PageItem = ({ page }: Props) => {
-  const { deletePage } = usePage()
-
+export const PageItem = ({ page, onDelete, unsubscribe }: Props) => {
   const [isHover, setIsHover] = useState(false)
   const [isOpenedMenu, setIsOpenedMenu] = useState(false)
 
   const handleCopyLink = (pageId: string) => {
     console.log('copy', pageId)
   }
 
+  useEffect(() => {
+    const unsub = unsubscribe(page.id)
+    return () => unsub()
+  }, [page, unsubscribe])
+
+  if (!page) return <></>
+
   // TODO: フルロードしてる
   return (
     <Link
@@ -38,7 +41,9 @@ export const PageItem = ({ page }: Props) => {
     >
       <div className="truncate">
         <span className="mr-1">{page.emoji}</span>
-        <span>{page.title}</span>
+        <span className={page.title ? undefined : 'text-slate-400'}>
+          {page.title || 'Untitled'}
+        </span>
       </div>
 
       {(isHover || isOpenedMenu) && (
@@ -59,7 +64,7 @@ export const PageItem = ({ page }: Props) => {
                 type: 'default',
                 icon: 'trash',
                 title: '削除',
-                onClick: () => deletePage(page.id),
+                onClick: () => onDelete(page.id),
                 isDanger: true,
               },
             ]}

src/components/uis/Sidebar/Sidebar.tsx

@@ -18,11 +18,17 @@ export const Sidebar = () => {
   const router = useRouter()
 
   const { pages, refetchPages } = usePages()
-  const { addPage } = usePage()
+  const { addPage, deletePage, unsubscribePage } = usePage()
   const { currentUser } = useCurrentUser()
 
   const handleAddPage = async () => {
-    await addPage({ emoji: '🚀', title: '宇宙旅行', content: { hoge: 'hoge', fuga: 123 } })
+    await addPage({ emoji: '📝', title: '' })
+    refetchPages()
+  }
+
+  const handleDeletePage = async (pageId: string) => {
+    await deletePage(pageId)
+    refetchPages()
   }
 
   useEffect(() => {
@@ -41,8 +47,13 @@ export const Sidebar = () => {
         </div>
         {/* // TODO:  */}
         {pages ? (
-          pages.map((page: { id: string; emoji?: string | undefined; title: string }) => (
-            <PageItem key={page.id} page={page} />
+          pages.map((page) => (
+            <PageItem
+              key={page.id}
+              page={page}
+              onDelete={handleDeletePage}
+              unsubscribe={unsubscribePage}
+            />
           ))
         ) : (
           <SidebarSkeleton />

src/hooks/usePage/usePage.ts

@@ -35,5 +35,10 @@ export const usePage = () => {
     await pageRepo.delete(id).catch((e) => console.error(e))
   }, [])
 
-  return { page, fetchPage, addPage, updatePage, deletePage }
+  const unsubscribePage = useCallback(
+    (id: string) => pageRepo.unsubscribe(id, (page) => setPage(page)),
+    []
+  )
+
+  return { page, fetchPage, addPage, updatePage, deletePage, unsubscribePage }
 }

src/libs/firebase.ts

@@ -11,9 +11,10 @@ export {
   deleteDoc,
   updateDoc,
   FirestoreError,
+  onSnapshot,
 } from 'firebase/firestore'
 
-export type { DocumentData, FirestoreErrorCode } from 'firebase/firestore'
+export type { DocumentData, FirestoreErrorCode, Unsubscribe } from 'firebase/firestore'
 
 export { initializeApp } from 'firebase/app'
 export { getAnalytics } from 'firebase/analytics'

src/models/__common__/error.ts

@@ -17,3 +17,13 @@ export class AuthError extends Error {
     this.moduleError = error
   }
 }
+
+export class NotFoundError extends Error {
+  private moduleError: Error | undefined
+
+  constructor(message: string, error?: Error) {
+    super()
+    this.message = message
+    this.moduleError = error
+  }
+}

src/models/page/page.ts

@@ -1,10 +1,12 @@
+import { JSONContent } from '@tiptap/core'
+
 import { Entity } from '../__common__/entity'
 
 export class Page extends Entity {
-  emoji?: string
+  emoji: string
   title: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  content: any
+
+  content?: JSONContent
 
   constructor(init: Page) {
     super(init)

src/pages/[pageId]/index.tsx

@@ -22,6 +22,7 @@ type QueryType = {
   pageId: string
 }
 
+// TODO: ここからsubscribeして、ページがないエラーをキャッチしたらrootに理レンダリングすればいい気がする
 export default function PageDetail() {
   const router = useRouter()
   const { page, fetchPage, updatePage } = usePage()

src/repository/db/page/page.repository.ts

@@ -1,7 +1,8 @@
-import { doc, getDoc, setDoc, deleteDoc, updateDoc } from '@/libs/firebase'
+import { doc, getDoc, setDoc, deleteDoc, updateDoc, onSnapshot } from '@/libs/firebase'
 
 import { db } from '@/config/firebase'
 
+import { NotFoundError } from '@/models/__common__/error'
 import { Page } from '@/models/page'
 
 import { DBRepository } from '../__common__/dbRepository'
@@ -22,8 +23,7 @@ export class PageRepository extends DBRepository<Page> {
     const document = await getDoc(ref)
 
     if (!document.exists()) {
-      // TODO: エラーインスタンスのカスタム
-      throw new Error('ページが見つかりませんでした')
+      throw new NotFoundError('ページが見つかりませんでした')
     } else {
       return new Page(this.docToObject(document))
     }
@@ -41,4 +41,11 @@ export class PageRepository extends DBRepository<Page> {
   delete = async (id: Page['id']) => {
     return await deleteDoc(doc(db, this.PATH, id))
   }
+
+  unsubscribe = (id: Page['id'], onUpdate: (page: Page) => void) =>
+    onSnapshot(doc(db, this.PATH, id), (doc) => {
+      if (doc.exists()) {
+        onUpdate(new Page(this.docToObject(doc)))
+      }
+    })
 }