Browse Source

#9 完了

#23
みてるぞ 1 month ago
parent
commit
643080ef76
3 changed files with 14 additions and 5 deletions
  1. +5
    -1
      backend/app/controllers/tags_controller.rb
  2. +4
    -1
      frontend/src/App.tsx
  3. +5
    -3
      frontend/src/components/TagSidebar.tsx

+ 5
- 1
backend/app/controllers/tags_controller.rb View File

@@ -2,7 +2,11 @@ class TagsController < ApplicationController
before_action :set_tags, only: %i[ show update destroy ] before_action :set_tags, only: %i[ show update destroy ]


def index def index
@tags = Tag.all
if params[:post].present?
@tags = Tag.joins(:posts).where(posts: { id: params[:post] })
else
@tags = Tag.all
end
render json: @tags render json: @tags
end end




+ 4
- 1
frontend/src/App.tsx View File

@@ -13,7 +13,10 @@ const App = () => {
<div className="flex flex-col h-screen w-screen"> <div className="flex flex-col h-screen w-screen">
<TopNav /> <TopNav />
<div className="flex flex-1"> <div className="flex flex-1">
<TagSidebar />
<Routes>
<Route path="/posts/:postId" element={<TagSidebar />} />
<Route path="*" element={<TagSidebar />} />
</Routes>
<main className="flex-1 overflow-y-auto p-4"> <main className="flex-1 overflow-y-auto p-4">
<Routes> <Routes>
<Route path="/" element={<PostPage />} /> <Route path="/" element={<PostPage />} />


+ 5
- 3
frontend/src/components/TagSidebar.tsx View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import axios from 'axios' import axios from 'axios'
import { Link } from 'react-router-dom'
import { Link, useParams } from 'react-router-dom'
import { API_BASE_URL } from '../config' import { API_BASE_URL } from '../config'
import TagSearch from './TagSearch' import TagSearch from './TagSearch'


@@ -17,12 +17,14 @@ const tagNameMap: { [key: string]: string } = {
nico: 'ニコニコタグ' } nico: 'ニコニコタグ' }


const TagSidebar: React.FC = () => { const TagSidebar: React.FC = () => {
const { postId } = useParams<{ postId?: number }> ()
const [tags, setTags] = useState<TagByCategory> ({ }) const [tags, setTags] = useState<TagByCategory> ({ })


useEffect(() => { useEffect(() => {
const fetchTags = async () => { const fetchTags = async () => {
try { try {
const response = await axios.get (`${API_BASE_URL}/tags`)
const response = await axios.get (`${API_BASE_URL}/tags`
+ (postId ? `?post=${ postId }` : ''))
const tagsTmp: TagByCategory = { } const tagsTmp: TagByCategory = { }
for (const tag of response.data) for (const tag of response.data)
{ {
@@ -37,7 +39,7 @@ const TagSidebar: React.FC = () => {
} }


fetchTags() fetchTags()
}, [])
}, [postId])


return ( return (
<div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full"> <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">


Loading…
Cancel
Save