#70 #72

frontend/src/components/TopNav.tsx

@@ -1,11 +1,15 @@
+import axios from 'axios'
+import toCamel from 'camelcase-keys'
 import React, { useState, useEffect } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import SettingsDialogue from './SettingsDialogue'
-import { Button } from './ui/button'
-import { cn } from '@/lib/utils'
-import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 
-import type { User } from '@/types'
+import SettingsDialogue from '@/components/SettingsDialogue'
+import { Button } from '@/components/ui/button'
+import { API_BASE_URL } from '@/config'
+import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import { cn } from '@/lib/utils'
+
+import type { Tag, User, WikiPage } from '@/types'
 
 type Props = { user:    User
                setUser: (user: User) => void }
@@ -23,13 +27,14 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
 
   const [settingsVsbl, setSettingsVsbl] = useState (false)
   const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
-  const [wikiId, setWikiId] = useState (WikiIdBus.get ())
+  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
   const [wikiSearch, setWikiSearch] = useState ('')
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
   const [tagSearch, setTagSearch] = useState ('')
   const [userSearch, setUserSearch] = useState ('')
+  const [postCount, setPostCount] = useState<number | null> (null)
 
   const MyLink = ({ to, title, menu, base }: { to:    string
                                                title: string
@@ -93,7 +98,8 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
   }
 
   useEffect (() => {
-    WikiIdBus.subscribe (setWikiId)
+    const unsubscribe = WikiIdBus.subscribe (setWikiId)
+    return () => unsubscribe ()
   }, [])
 
   useEffect (() => {
@@ -109,6 +115,28 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
       setSelectedMenu (Menu.None)
   }, [location])
 
+  useEffect (() => {
+    if (!(wikiId))
+      return
+
+    void ((async () => {
+      try
+      {
+        const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
+        const wikiPage: WikiPage = toCamel (pageData, { deep: true })
+
+        const { data: tagData } = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
+        const tag: Tag = toCamel (tagData, { deep: true })
+
+        setPostCount (tag.postCount)
+      }
+      catch
+      {
+        setPostCount (0)
+      }
+    }) ())
+  }, [wikiId])
+
   return (
       <>
         <nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
@@ -173,10 +201,10 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
                   <Link to="/wiki/new" className={subClass}>新規</Link>
                   <Link to="/wiki/changes" className={subClass}>全体履歴</Link>
                   <Link to="/wiki/ヘルプ:Wiki" className={subClass}>ヘルプ</Link>
-                  {/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) &&
+                  {(/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId) &&
                       <>
                         <Separator />
-                        <Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>広場</Link>
+                        <Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>広場 ({postCount || 0})</Link>
                         <Link to={`/wiki/changes?id=${ wikiId }`} className={subClass}>履歴</Link>
                         <Link to={`/wiki/${ wikiId || location.pathname.split ('/')[2] }/edit`} className={subClass}>編輯</Link>
                       </>}