#10, #15 完了

frontend/src/pages/PostDetailPage.tsx

@@ -4,15 +4,23 @@ import axios from 'axios'
 import { API_BASE_URL, SITE_TITLE } from '../config'
 import NicoViewer from '../components/NicoViewer'
 
+type Tag = { id:        number
+             name:      string
+             category:  string }
+
 type Post = { id:         number
               url:        string
               title:      string
               thumbnail:  string
-              tags:       { name: string }[] }
+              tags:       Tag[] }
 
-const PostDetailPage = () => {
+type Props = { posts:     Post[]
+               setPosts:  (posts: Post[]) => void }
+
+
+const PostDetailPage = (props: Props) => {
+  const { posts, setPosts } = props
   const { id } = useParams ()
-  const [post, setPost] = useState<Post | null> (null)
 
   const location = useLocation ()
 
@@ -20,28 +28,36 @@ const PostDetailPage = () => {
     if (!(id))
       return
     void (axios.get (`/api/posts/${ id }`)
-          .then (res => setPost (res.data))
+          .then (res => setPosts ([res.data]))
           .catch (err => console.error ('うんち!', err)))
   }, [id])
 
-  if (!(post))
+  if (!(posts.length))
     return <div>Loading...</div>
 
-  document.title = `${ post.url } | ${ SITE_TITLE }`
+  const post = posts[0]
+
+  document.title = `${ post.title || post.url } | ${ SITE_TITLE }`
 
   const url = new URL (post.url)
 
   return (
       <div className="p-4">
-        {url.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp' ? (
-            <NicoViewer id={url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]}
-                        width="640"
-                        height="360" />
-            ) : (
-            <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />
-            )}
-      </div>
-      )
+        {(() => {
+          if (url.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp')
+            {
+              return (
+                  <NicoViewer
+                    id={url.pathname.match (
+                          /(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]}
+                    width="640"
+                    height="360" />)
+            }
+          else
+            return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />
+        }) ()}
+      </div>)
 }
 
+
 export default PostDetailPage

frontend/src/pages/PostPage.tsx

@@ -3,8 +3,22 @@ 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([])
+type Tag = { id:        number
+             name:      string
+             category:  string }
+
+type Post = { id:         number
+              url:        string
+              title:      string
+              thumbnail:  string
+              tags:       Tag[] }
+
+type Props = { posts:     Post[]
+               setPosts:  (posts: Post[]) => void }
+
+
+const PostPage = (props: Props) => {
+  const { posts, setPosts } = props
 
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
@@ -19,35 +33,34 @@ const PostPage = () => {
 
   useEffect(() => {
     const fetchPosts = async () => {
-      try {
-        const response = await axios.get(`${ API_BASE_URL }/posts`, {
+      try
+      {
+        const res = 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([])
+        setPosts (res.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>
-  )
+      <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 ?? post.thumbnail_base}
+                 className="object-none w-full h-full" />
+          </Link>
+        ))}
+      </div>)
 }
 
+
 export default PostPage