#71

frontend/src/pages/wiki/WikiDetailPage.tsx

@@ -4,13 +4,16 @@ import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 
+import PostList from '@/components/PostList'
+import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
 import PageTitle from '@/components/common/PageTitle'
+import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 
-import type { WikiPage } from '@/types'
+import type { Post, Tag, WikiPage } from '@/types'
 
 
 export default () => {
@@ -20,6 +23,10 @@ export default () => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
+  const defaultTag = { name: title, category: 'general' } as Tag
+
+  const [posts, setPosts] = useState<Post[]> ([])
+  const [tag, setTag] = useState (defaultTag)
   const [wikiPage, setWikiPage] = useState<WikiPage | null | undefined> (undefined)
 
   const query = new URLSearchParams (location.search)
@@ -33,14 +40,16 @@ export default () => {
 	  const data = res.data as WikiPage
 	  navigate (`/wiki/${ data.title }`, { replace: true })
 	}) ()
+
 	return
       }
 
     void (async () => {
       try
       {
-	const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`,
-				     { params: { ...(version ? { version } : { }) } })
+	const res = await axios.get (
+	    `${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`,
+	    { params: version ? { version } : { } })
 	const data = toCamel (res.data as any, { deep: true }) as WikiPage
 	setWikiPage (data)
 	WikiIdBus.set (data.id)
@@ -51,6 +60,36 @@ export default () => {
       }
     }) ()
 
+    void (async () => {
+      try
+      {
+	const res = await axios.get (
+	    `${ API_BASE_URL }/posts?${ new URLSearchParams ({ tags:  title,
+							       limit: '8' }) }`)
+	const data = toCamel (res.data as any,
+			      { deep: true }) as { posts:       Post[]
+						   nextCursor:  string }
+	setPosts (data.posts)
+      }
+      catch
+      {
+	setPosts ([])
+      }
+    }) ()
+
+    void (async () => {
+      try
+      {
+	const res = await axios.get (
+	    `${ API_BASE_URL }/tags/name/${ encodeURIComponent (title) }`)
+	setTag (toCamel (res.data as any, { deep: true }) as Tag)
+      }
+      catch
+      {
+	setTag (defaultTag)
+      }
+    }) ()
+
     return () => WikiIdBus.set (null)
   }, [title, location.search])
 
@@ -59,6 +98,7 @@ export default () => {
 	<Helmet>
 	  <title>{`${ title } Wiki | ${ SITE_TITLE }`}</title>
 	</Helmet>
+
 	{(wikiPage && version) && (
 	    <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
 	      {wikiPage.pred ? (
@@ -73,11 +113,21 @@ export default () => {
 		    新 &gt;
 		  </Link>) : <>(最新)</>}
 	    </div>)}
-	<PageTitle>{title}</PageTitle>
+
+	<PageTitle>
+	  <TagLink tag={tag} withWiki={false} withCount={false} />
+	</PageTitle>
 	<div className="prose mx-auto p-4">
 	  {wikiPage === undefined
 	   ? 'Loading...'
-	   : <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ title })。`} />}
+	   : <WikiBody body={wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`} />}
 	</div>
+
+	{posts.length > 0 && (
+	    <TabGroup>
+	      <Tab name="広場">
+		<PostList posts={posts} />
+	      </Tab>
+	    </TabGroup>)}
       </MainArea>)
 }