#69

backend/app/controllers/posts_controller.rb

@@ -11,7 +11,10 @@ class PostsController < ApplicationController
 
   def random
     post = filtered_posts.order('RAND()').first
+    return head :not_found unless post
+
     viewed = current_user&.viewed?(post) || false
+
     render json: (post
                   .as_json(include: { tags: { only: [:id, :name, :category] } })
                   .merge(viewed: viewed))

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>
+        {posts.length && (
             <a href="#"
                onClick={ev => {
                  ev.preventDefault ()
-             void (axios.get (`${ API_BASE_URL }/posts/random`)
+                 void ((async () => {
-                   .then (res => navigate (`/posts/${ res.data.id }`)))
+                   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>
+            </a>)}
       </SidebarComponent>)
 }