#69

frontend/src/components/TagSidebar.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { Link, useParams } from 'react-router-dom'
-import { API_BASE_URL } from '@/config'
+import React, { useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+
 import TagSearch from '@/components/TagSearch'
-import SidebarComponent from '@/components/layout/SidebarComponent'
 import SectionTitle from '@/components/common/SectionTitle'
+import SidebarComponent from '@/components/layout/SidebarComponent'
+import { API_BASE_URL } from '@/config'
 
 import type { Post, Tag } from '@/types'
 
@@ -14,6 +15,8 @@ type Props = { posts: Post[] }
 
 
 export default ({ posts }: Props) => {
+  const navigate = useNavigate ()
+
   const [tags, setTags] = useState<TagByCategory> ({ })
   const [tagsCounts, setTagsCounts] = useState<{ [key: number]: number }> ({ })
 
@@ -56,6 +59,13 @@ export default ({ posts }: Props) => {
               </>))}
         </ul>
         <SectionTitle>関聯</SectionTitle>
-        <Link>ランダム</Link>
+        <a href="#"
+           onClick={ev => {
+             ev.preventDefault ()
+             void (axios.get (`${ API_BASE_URL }/posts/random`)
+                   .then (res => navigate (`/posts/${ res.data.id }`)))
+           }}>
+          ランダム
+        </a>
       </SidebarComponent>)
 }