#69

frontend/src/components/TagSearch.tsx

@@ -61,7 +61,7 @@ const TagSearch: React.FC = () => {
       setSuggestionsVsbl (false)
       break
     }
-    if (e.key === 'Enter' && search.length && (!(suggestionsVsbl) || activeIndex < 0))
+    if (e.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
       {
         navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`)
         setSuggestionsVsbl (false)

frontend/src/components/TagSidebar.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import React, { useEffect, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import TagSearch from '@/components/TagSearch'
 import SectionTitle from '@/components/common/SectionTitle'
@@ -20,6 +20,11 @@ export default ({ posts }: Props) => {
 
   const [tags, setTags] = useState<TagByCategory> ({ })
 
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagsQuery = query.get ('tags') ?? ''
+  const anyFlg = query.get ('match') === 'any'
+
   useEffect (() => {
     const tagsTmp: TagByCategory = { }
     for (const post of posts)
@@ -54,13 +59,25 @@ export default ({ posts }: Props) => {
               </>))}
         </ul>
         <SectionTitle>関聯</SectionTitle>
-        <a href="#"
-           onClick={ev => {
-             ev.preventDefault ()
-             void (axios.get (`${ API_BASE_URL }/posts/random`)
-                   .then (res => navigate (`/posts/${ res.data.id }`)))
-           }}>
-          ランダム
-        </a>
+        {posts.length && (
+            <a href="#"
+               onClick={ev => {
+                 ev.preventDefault ()
+                 void ((async () => {
+                   try
+                   {
+                     const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
+                         { params: { tags:  tagsQuery.split (' ').filter (e => e !== '').join (','),
+                                     match: (anyFlg ? 'any' : 'all') } })
+                     navigate (`/posts/${ (data as Post).id }`)
+                   }
+                   catch
+                   {
+                     ;
+                   }
+                 }) ())
+               }}>
+              ランダム
+            </a>)}
       </SidebarComponent>)
 }