miteruzo
/
btrc-hub
1
0
Fork 0
Code Issues 36 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

#7 ぼちぼち

#23
みてるぞ 1 month ago
parent
59678cf8b9
commit
db430cc426
7 changed files with 158 additions and 8 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +17
    -3
      backend/app/controllers/posts_controller.rb
  2. +1
    -1
      frontend/index.html
  3. +5
    -1
      frontend/src/App.tsx
  4. +30
    -0
      frontend/src/components/TagSearch.tsx
  5. +7
    -3
      frontend/src/components/TagSidebar.tsx
  6. +48
    -0
      frontend/src/pages/PostDetailPage.tsx
  7. +50
    -0
      frontend/src/pages/PostPage.tsx

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

@@ -3,14 +3,28 @@ class PostsController < ApplicationController


# GET /posts # GET /posts
def index def index
@posts = Post.all

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


+ 1
- 1
frontend/index.html 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" />


+ 5
- 1
frontend/src/App.tsx 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>


+ 30
- 0
frontend/src/components/TagSearch.tsx 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

+ 7
- 3
frontend/src/components/TagSidebar.tsx 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>


+ 48
- 0
frontend/src/pages/PostDetailPage.tsx 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

+ 50
- 0
frontend/src/pages/PostPage.tsx 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

Write Preview
Loading…
Cancel
Save