#13 完了

frontend/src/components/TagSearch.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
 
 
 const TagSearch: React.FC = () => {
   const navigate = useNavigate ()
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagsQuery = query.get ('tags') ?? ''
 
-  const [search, setSearch] = useState ('')
+  const [search, setSearch] = useState (tagsQuery)
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' && search.length > 0)

frontend/src/components/TagSidebar.tsx

@@ -4,15 +4,33 @@ import { Link } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
 import TagSearch from './TagSearch'
 
+type Tag = { id:    number
+             name:  string }
+type TagByCategory = { [key: string]: Tag[] }
+type OriginalTag = { id: number
+                     name: string
+                     category: string }
+
+const tagNameMap: { [key: string]: string } = {
+    general:    '一般',
+    deerjikist: 'ニジラー',
+    nico:       'ニコニコタグ' }
 
 const TagSidebar: React.FC = () => {
-  const [tags, setTags] = useState<Array<{ id: number, name: string, category: string }>>([])
+  const [tags, setTags] = useState<TagByCategory> ({ })
 
   useEffect(() => {
     const fetchTags = async () => {
       try {
         const response = await axios.get (`${API_BASE_URL}/tags`)
-        setTags(response.data)
+        const tagsTmp: TagByCategory = { }
+        for (const tag of response.data)
+          {
+            if (!(tag.category in tagsTmp))
+              tagsTmp[tag.category] = []
+            tagsTmp[tag.category].push ({ id: tag.id, name: tag.name })
+          }
+        setTags (tagsTmp)
       } catch (error) {
         console.error('Failed to fetch tags:', error)
       }
@@ -22,22 +40,27 @@ const TagSidebar: React.FC = () => {
   }, [])
 
   return (
-    <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
-      <TagSearch />
-      <ul>
-        {tags.map (tag => (
-          <li key={tag.id} className="mb-2">
-            <Link
-              to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
-              className="text-blue-600 hover:underline"
-            >
-              {tag.name}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+      <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
+        <TagSearch />
+        {['general', 'deerjikist', 'nico'].map (cat => (cat in tags) ? (
+            <>
+              <h2>{tagNameMap[cat]}</h2>
+              <ul>
+                {tags[cat].map (tag => (
+                    <li key={tag.id} className="mb-2">
+                      <Link
+                        to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        {tag.name}
+                      </Link>
+                    </li>
+                    ))}
+              </ul>
+            </>
+            ) : <></>)}
+      </div>
+      )
 }
 
 export default TagSidebar