miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

#7 ぼちぼち

Browse Source
This commit is contained in:
みてるぞ
2025-05-23 01:02:12 +09:00
parent 59678cf8b9
commit db430cc426
7 changed files with 158 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/controllers/posts_controller.rb
+16 -2
View File
@@ -3,14 +3,28 @@ class PostsController < ApplicationController
# GET /posts # GET /posts
def index def index
if params[:tags].present?
tag_names = params[:tags].split(',')
match_type = params[:match]
if match_type == 'any'
@posts = Post.joins(:tags).where(tags: { name: tag_names }).distinct
else
@posts = Post.joins(:tags)
tag_names.each do |tag|
@posts = @posts.where(id: Post.joins(:tags).where(tags: { name: tag }))
end
@posts = @posts.distinct
end
else
@posts = Post.all @posts = Post.all
end
render json: @posts render json: @posts
end end
# GET /posts/1 # GET /posts/1
def show def show
render json: @post @post = Post.includes(:tags).find(params[:id])
render json: @post.as_json(include: { tags: { only: [:id, :name] } })
end end
# POST /posts # POST /posts
frontend/index.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="ja"> <html lang="ja">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
frontend/src/App.tsx
+5 -1
View File
@@ -4,6 +4,8 @@ import HomePage from './pages/HomePage'
import TagPage from './pages/TagPage' import TagPage from './pages/TagPage'
import TopNav from './components/TopNav' import TopNav from './components/TopNav'
import TagSidebar from './components/TagSidebar' import TagSidebar from './components/TagSidebar'
import PostPage from './pages/PostPage'
import PostDetailPage from './pages/PostDetailPage'
const App = () => { const App = () => {
return ( return (
@@ -14,7 +16,9 @@ const App = () => {
<TagSidebar /> <TagSidebar />
<main className="flex-1 overflow-y-auto p-4"> <main className="flex-1 overflow-y-auto p-4">
<Routes> <Routes>
<Route path="/" element={<HomePage />} /> <Route path="/" element={<PostPage />} />
<Route path="/posts" element={<PostPage />} />
<Route path="/posts/:id" element={<PostDetailPage />} />
<Route path="/tags/:tag" element={<TagPage />} /> <Route path="/tags/:tag" element={<TagPage />} />
</Routes> </Routes>
</main> </main>
frontend/src/components/TagSearch.tsx
+30
View File
@@ -0,0 +1,30 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link, useNavigate } from 'react-router-dom'
import { API_BASE_URL } from '../config'
const TagSearch: React.FC = () => {
const navigate = useNavigate ()
const [search, setSearch] = useState ('')
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && search.length > 0)
navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`,
{ replace: true })
}
return (
<input
type="text"
placeholder="タグ検索..."
value={search}
onChange={e => setSearch (e.target.value)}
onKeyDown={handleKeyDown}
className="w-full px-3 py-2 mb-4 border rounded"
/>
)
}
export default TagSearch
frontend/src/components/TagSidebar.tsx
+7 -3
View File
@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react'
import axios from 'axios' import axios from 'axios'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { API_BASE_URL } from '../config' import { API_BASE_URL } from '../config'
import TagSearch from './TagSearch'
const TagSidebar: React.FC = () => { const TagSidebar: React.FC = () => {
const [tags, setTags] = useState<Array<{ id: number, name: string }>>([]) const [tags, setTags] = useState<Array<{ id: number, name: string, category: string }>>([])
useEffect(() => { useEffect(() => {
const fetchTags = async () => { const fetchTags = async () => {
@@ -22,11 +23,14 @@ const TagSidebar: React.FC = () => {
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">
<h2 className="text-xl font-bold mb-4">タグ一覧</h2> <TagSearch />
<ul> <ul>
{tags.map (tag => ( {tags.map (tag => (
<li key={tag.id} className="mb-2"> <li key={tag.id} className="mb-2">
<Link to={`/tags/${tag.id}`} className="text-blue-600 hover:underline"> <Link
to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
className="text-blue-600 hover:underline"
>
{tag.name} {tag.name}
</Link> </Link>
</li> </li>
frontend/src/pages/PostDetailPage.tsx
+48
View File
@@ -0,0 +1,48 @@
import React, { useEffect, useState } from 'react'
import { Link, useLocation, useParams } from 'react-router-dom'
import axios from 'axios'
import { API_BASE_URL, SITE_TITLE } from '../config'
type Post = { id: number
url: string
title: string
thumbnail: string
tags: { name: string }[] }
const PostDetailPage = () => {
const { id } = useParams ()
const [post, setPost] = useState<Post | null> (null)
const location = useLocation ()
useEffect (() => {
if (!(id))
return
void (axios.get (`/api/posts/${ id }`)
.then (res => setPost (res.data))
.catch (err => console.error ('うんち!', err)))
}, [id])
if (!(post))
return <div>Loading...</div>
document.title = `${ post.url } | ${ SITE_TITLE }`
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-2">{post.url}</h1>
<img src={post.thumbnail} alt={post.url} className="mb-4 max-w-lg" />
<p className="mb-2">{post.description}</p>
<div className="text-sm text-gray-600">
タグ:
{post.tags.map(tag => (
<span key={tag.name} className="ml-2 px-2 py-1 bg-gray-200 rounded">
#{tag.name}
</span>
))}
</div>
</div>
)
}
export default PostDetailPage
frontend/src/pages/PostPage.tsx
+50
View File
@@ -0,0 +1,50 @@
import React, { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import axios from 'axios'
import { API_BASE_URL, SITE_TITLE } from '../config'
const PostPage = () => {
const [posts, setPosts] = useState([])
const location = useLocation ()
const query = new URLSearchParams (location.search)
const tagsQuery = query.get ('tags') ?? ''
// const anyFlg = query.get ('match') === 'any'
const anyFlg = false
const tags = tagsQuery.split (' ').filter (e => e !== '')
document.title = `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get(`${ API_BASE_URL }/posts`, {
params: { tags: tags.join (','),
match: (anyFlg ? 'any' : 'all') } })
setPosts(response.data)
} catch (error) {
console.error('Failed to fetch posts:', error)
setPosts([])
}
}
fetchPosts()
}, [location.search])
return (
<div className="flex flex-wrap gap-4 p-4">
{posts.map (post => (
<Link
to={`/posts/${ post.id }`}
key={post.id}
className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
>
<img
src={post.thumbnail}
className="object-none w-full h-full"
/>
</Link>
))}
</div>
)
}
export default PostPage