#22 完了

frontend/src/App.tsx

@@ -19,7 +19,8 @@ type Post = { id:         number
               url:        string
               title:      string
               thumbnail:  string
-              tags:       Tag[] }
+              tags:       Tag[]
+              viewed:     boolean }
 
 type User = { id:               number
               name:             string | null

frontend/src/pages/PostDetailPage.tsx

@@ -3,6 +3,9 @@ import { Link, useLocation, useParams } from 'react-router-dom'
 import axios from 'axios'
 import { API_BASE_URL, SITE_TITLE } from '../config'
 import NicoViewer from '../components/NicoViewer'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/utils'
 
 type Tag = { id:        number
              name:      string
@@ -12,22 +15,51 @@ type Post = { id:         number
               url:        string
               title:      string
               thumbnail:  string
-              tags:       Tag[] }
+              tags:       Tag[]
+              viewed:     boolean }
 
 type Props = { posts:     Post[]
                setPosts:  (posts: Post[]) => void }
 
 
-const PostDetailPage = (props: Props) => {
-  const { posts, setPosts } = props
+const PostDetailPage = ({ posts, setPosts }: Props) => {
   const { id } = useParams ()
 
   const location = useLocation ()
 
+  const changeViewedFlg = () => {
+    if (posts[0]?.viewed)
+      {
+        void (axios.delete (
+                  `${ API_BASE_URL }/posts/${ id }/viewed`,
+                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+              .then (res => setPosts (([post]) => {
+                post.viewed = false
+                return [post]
+              }))
+              .catch (err => toast ({ title:        '失敗……',
+                                      description:  '通信に失敗しました……' })))
+      }
+    else
+      {
+        void (axios.post (
+                  `${ API_BASE_URL }/posts/${ id }/viewed`,
+                  { },
+                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+              .then (res => setPosts (([post]) => {
+                post.viewed = true
+                return [post]
+              }))
+              .catch (err => toast ({ title:        '失敗……',
+                                      description:  '通信に失敗しました……' })))
+      }
+  }
+
   useEffect (() => {
     if (!(id))
       return
-    void (axios.get (`/api/posts/${ id }`)
+    void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
+              'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
           .then (res => setPosts ([res.data]))
           .catch (err => console.error ('うんち!', err)))
   }, [id])
@@ -56,6 +88,11 @@ const PostDetailPage = (props: Props) => {
           else
             return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />
         }) ()}
+        <Button onClick={changeViewedFlg}
+                className={cn ('text-white',
+                               posts[0]?.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
+          {posts[0]?.viewed ? '閲覧済' : '未閲覧'}
+        </Button>
       </div>)
 }
 

frontend/src/pages/PostPage.tsx

@@ -11,7 +11,8 @@ type Post = { id:         number
               url:        string
               title:      string
               thumbnail:  string
-              tags:       Tag[] }
+              tags:       Tag[]
+              viewed:     boolean }
 
 type Props = { posts:     Post[]
                setPosts:  (posts: Post[]) => void }