みてるぞ 2 weeks ago
parent
commit
e57ba6b2f0
3 changed files with 30 additions and 10 deletions
  1. +3
    -0
      backend/app/controllers/posts_controller.rb
  2. +1
    -1
      frontend/src/components/TagSearch.tsx
  3. +26
    -9
      frontend/src/components/TagSidebar.tsx

+ 3
- 0
backend/app/controllers/posts_controller.rb View File

@@ -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))


+ 1
- 1
frontend/src/components/TagSearch.tsx View File

@@ -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)


+ 26
- 9
frontend/src/components/TagSidebar.tsx View File

@@ -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>)
}

Loading…
Cancel
Save