#7 ぼちぼち

2025-05-23 01:02:12 +09:00
parent 59678cf8b9
commit db430cc426
7 changed files with 158 additions and 8 deletions
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
  <head>
    <meta charset="UTF-8" />
@@ -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 = () => {
          <TagSidebar />
          <main className="flex-1 overflow-y-auto p-4">
            <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 />} />
            </Routes>
          </main>
@@ -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
@@ -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<Array<{ id: number, name: string }>>([])
+  const [tags, setTags] = useState<Array<{ id: number, name: string, category: string }>>([])

  useEffect(() => {
    const fetchTags = async () => {
@@ -22,11 +23,14 @@ const TagSidebar: React.FC = () => {

  return (
    <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>
        {tags.map (tag => (
          <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}
            </Link>
          </li>
@@ -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
@@ -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