diff --git a/backend/app/controllers/posts_controller.rb b/backend/app/controllers/posts_controller.rb index 11fc99f..bcfc0c4 100644 --- a/backend/app/controllers/posts_controller.rb +++ b/backend/app/controllers/posts_controller.rb @@ -3,14 +3,28 @@ class PostsController < ApplicationController # GET /posts 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 end # GET /posts/1 def show - render json: @post + @post = Post.includes(:tags).find(params[:id]) + render json: @post.as_json(include: { tags: { only: [:id, :name] } }) end # POST /posts diff --git a/frontend/index.html b/frontend/index.html index f1157da..9200fa7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 99fb81f..d52e463 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,6 +4,8 @@ import HomePage from './pages/HomePage' import TagPage from './pages/TagPage' import TopNav from './components/TopNav' import TagSidebar from './components/TagSidebar' +import PostPage from './pages/PostPage' +import PostDetailPage from './pages/PostDetailPage' const App = () => { return ( @@ -14,7 +16,9 @@ const App = () => {
- } /> + } /> + } /> + } /> } />
diff --git a/frontend/src/components/TagSearch.tsx b/frontend/src/components/TagSearch.tsx new file mode 100644 index 0000000..e7d38a6 --- /dev/null +++ b/frontend/src/components/TagSearch.tsx @@ -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) => { + if (e.key === 'Enter' && search.length > 0) + navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`, + { replace: true }) + } + + return ( + setSearch (e.target.value)} + onKeyDown={handleKeyDown} + className="w-full px-3 py-2 mb-4 border rounded" + /> + ) +} + +export default TagSearch diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx index f811fcd..8c23f0a 100644 --- a/frontend/src/components/TagSidebar.tsx +++ b/frontend/src/components/TagSidebar.tsx @@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react' import axios from 'axios' import { Link } from 'react-router-dom' import { API_BASE_URL } from '../config' +import TagSearch from './TagSearch' const TagSidebar: React.FC = () => { - const [tags, setTags] = useState>([]) + const [tags, setTags] = useState>([]) useEffect(() => { const fetchTags = async () => { @@ -22,11 +23,14 @@ const TagSidebar: React.FC = () => { return (
-

タグ一覧

+
    {tags.map (tag => (
  • - + {tag.name}
    • diff --git a/frontend/src/pages/PostDetailPage.tsx b/frontend/src/pages/PostDetailPage.tsx new file mode 100644 index 0000000..b6f3fbf --- /dev/null +++ b/frontend/src/pages/PostDetailPage.tsx @@ -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 (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
    Loading...
    + + document.title = `${ post.url } | ${ SITE_TITLE }` + + return ( +
    +

    {post.url}

    + {post.url} +

    {post.description}

    +
    + タグ: + {post.tags.map(tag => ( + + #{tag.name} + + ))} +
    +
    + ) +} + +export default PostDetailPage diff --git a/frontend/src/pages/PostPage.tsx b/frontend/src/pages/PostPage.tsx new file mode 100644 index 0000000..7a4dcbf --- /dev/null +++ b/frontend/src/pages/PostPage.tsx @@ -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 ( +
    + {posts.map (post => ( + + + + ))} +
    + ) +} + +export default PostPage