#23

frontend/src/pages/posts/PostDetailPage.tsx

@@ -51,7 +51,7 @@ export default ({ user }: Props) => {
     if (!(id))
       return
 
-    void (async () => {
+    const fetchPost = async () => {
       try
       {
 	const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
@@ -63,7 +63,8 @@ export default ({ user }: Props) => {
 	if (axios.isAxiosError (err))
 	  setStatus (err.status ?? 200)
       }
-    }) ()
+    }
+    fetchPost ()
   }, [id])
 
   useEffect (() => {

frontend/src/pages/posts/PostListPage.tsx

@@ -93,16 +93,16 @@ export default () => {
 	    <Tab name="広場">
 	      {posts.length
 	       ? (
-		  <div className="flex flex-wrap gap-4 gap-y-8 p-4 justify-between">
-		  {posts.map (post => (
-		      <Link to={`/posts/${ post.id }`}
-			    key={post.id}
-			    className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-			<img src={post.thumbnail || post.thumbnailBase || undefined}
-			     alt={post.title || post.url}
-			     title={post.title || post.url || undefined}
-			     className="object-none w-full h-full" />
-		      </Link>))}
+		  <div className="flex flex-wrap gap-6 p-4">
+		    {posts.map ((post, i) => (
+			<Link to={`/posts/${ post.id }`}
+			      key={i}
+			      className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
+			  <img src={post.thumbnail || post.thumbnailBase || undefined}
+			       alt={post.title || post.url}
+			       title={post.title || post.url || undefined}
+			       className="object-none w-full h-full" />
+			</Link>))}
 		  </div>)
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
@@ -112,7 +112,7 @@ export default () => {
 		<Tab name="Wiki" init={!(posts.length)}>
 		  <WikiBody body={wikiPage.body} />
 		  <div className="my-2">
-		    <Link to={`/wiki/${ wikiPage.title }`}>Wiki を見る</Link>
+		    <Link to={`/wiki/${ encodeURIComponent (wikiPage.title) }`}>Wiki を見る</Link>
 		  </div>
 		</Tab>)}
 	  </TabGroup>

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -3,6 +3,7 @@ import toCamel from 'camelcase-keys'
 import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
+import TagLink from '@/components/TagLink'
 import SectionTitle from '@/components/common/SectionTitle'
 import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
@@ -15,10 +16,10 @@ type Props = { user: User | null }
 
 
 export default ({ user }: Props) => {
-  const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
   const [cursor, setCursor] = useState ('')
-  const [loading, setLoading] = useState (false)
   const [editing, setEditing] = useState<{ [key: number]: boolean }> ({ })
+  const [loading, setLoading] = useState (false)
+  const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
   const [rawTags, setRawTags] = useState<{ [key: number]: string }> ({ })
 
   const loaderRef = useRef<HTMLDivElement | null> (null)
@@ -56,6 +57,10 @@ export default ({ user }: Props) => {
 	    'Content-Type':     'multipart/form-data',
 	    'X-Transfer-Code':  localStorage.getItem ('user_code') ?? '' } })
 	const data = toCamel (res.data as any, { deep: true }) as Tag[]
+	setNicoTags (nicoTags => {
+	  nicoTags.find (t => t.id === id).linkedTags = data
+	  return [...nicoTags]
+	})
 	setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
 
 	toast ({ title: '更新しました．' })
@@ -106,13 +111,10 @@ export default ({ user }: Props) => {
 		  </tr>
 		</thead>
 		<tbody>
-		  {nicoTags.map (tag => (
-		      <tr key={tag.id}>
+		  {nicoTags.map ((tag, i) => (
+		      <tr key={i}>
 			<td className="p-2">
-			  <a href={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-			     target="_blank">
-			    {tag.name}
-			  </a>
+			  <TagLink tag={tag} withWiki={false} withCount={false} />
 			</td>
 			<td className="p-2">
 			  {editing[tag.id]
@@ -120,7 +122,12 @@ export default ({ user }: Props) => {
 			      <TextArea value={rawTags[tag.id]} onChange={ev => {
 				setRawTags (rawTags => ({ ...rawTags, [tag.id]: ev.target.value }))
 			      }} />)
-			   : rawTags[tag.id]}
+			   : tag.linkedTags.map((lt, j) => (
+			      <span key={j} className="mr-2">
+				<TagLink tag={lt}
+					 linkFlg={false}
+					 withCount={false} />
+			      </span>))}
 			</td>
 			{memberFlg && (
 			    <td>