#140

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,5 +1,4 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
@@ -12,14 +11,15 @@ import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
-import { API_BASE_URL, SITE_TITLE } from '@/config'
+import { SITE_TITLE } from '@/config'
+import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { FC } from 'react'
 
-import type { Post, User } from '@/types'
+import type { User } from '@/types'
 
 type Props = { user: User | null }
 
@@ -27,49 +27,46 @@ type Props = { user: User | null }
 export default (({ user }: Props) => {
   const { id } = useParams ()
 
-  const [post, setPost] = useState<Post | null> (null)
+  const { data: post, isError: errorFlg, error } = useQuery ({
+      enabled:  Boolean (id),
+      queryKey: ['posts', String (id)],
+      queryFn:  () => fetchPost (String (id)) })
+
+  const qc = useQueryClient ()
+
   const [status, setStatus] = useState (200)
 
-  const changeViewedFlg = async () => {
-    const url = `${ API_BASE_URL }/posts/${ id }/viewed`
-    const opt = { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }
-    try
-    {
-      if (post!.viewed)
-	await axios.delete (url, opt)
-      else
-	await axios.post (url, { }, opt)
-
-      // 通信に成功したら “閲覧済” をトグル
-      setPost (post => ({ ...post!, viewed: !(post!.viewed) }))
-    }
-    catch
-    {
-      toast ({ title: '失敗……', description: '通信に失敗しました……' })
-    }
-  }
+  const changeViewedFlg = useMutation ({
+      mutationFn: async () => {
+	const next = !(post!.viewed)
+	await toggleViewedFlg (id!, next)
+	return next
+      },
+      onMutate: async () => {
+	await qc.cancelQueries ({ queryKey: ['post', String (id)] })
+	const prev = qc.getQueryData<any> (['post', String (id)])
+	qc.setQueryData (['post', String (id)],
+			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
+	return { prev }
+      },
+      onError: (...[, , ctx]) => {
+	if (ctx?.prev)
+	  qc.setQueryData (['post', String (id)], ctx.prev)
+	toast ({ title: '失敗……', description: '通信に失敗しました……' })
+      },
+      onSuccess: () => {
+	qc.invalidateQueries ({ queryKey: ['posts'] })
+	qc.invalidateQueries ({ queryKey: ['related', String (id)] })
+      } })
 
   useEffect (() => {
-    setPost (null)
-
-    if (!(id))
+    if (!(errorFlg))
       return
 
-    const fetchPost = async () => {
-      try
-      {
-	const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
-	    'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
-	setPost (toCamel (res.data as any, { deep: true }) as Post)
-      }
-      catch (err)
-      {
-	if (axios.isAxiosError (err))
-	  setStatus (err.status ?? 200)
-      }
-    }
-    fetchPost ()
-  }, [id])
+    const code = (error as any)?.response.status ?? (error as any)?.status
+    if (code)
+      setStatus (code)
+  }, [errorFlg, error])
 
   switch (status)
   {
@@ -90,15 +87,18 @@ export default (({ user }: Props) => {
 	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
+
 	<div className="hidden md:block">
-	  <TagDetailSidebar post={post}/>
+	  <TagDetailSidebar post={post ?? null}/>
 	</div>
+
 	<MainArea>
 	  {post
 	   ? (
 	      <>
 		<PostEmbed post={post}/>
-		<Button onClick={changeViewedFlg}
+		<Button onClick={() => changeViewedFlg.mutate ()}
+			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
 		  {post.viewed ? '閲覧済' : '未閲覧'}
 		</Button>
@@ -112,7 +112,10 @@ export default (({ user }: Props) => {
 		      <Tab name="編輯">
 			<PostEditForm post={post}
 				      onSave={newPost => {
-					setPost (newPost)
+					qc.setQueryData (['posts', String (id)],
+							 (prev: any) => newPost ?? prev)
+					qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
+					qc.invalidateQueries ({ queryKey: ['related', String (id)] })
 					toast ({ description: '更新しました．' })
 				      }}/>
 		      </Tab>)}
@@ -120,8 +123,9 @@ export default (({ user }: Props) => {
 	      </>)
 	   : 'Loading...'}
 	</MainArea>
+
 	<div className="md:hidden">
-	  <TagDetailSidebar post={post}/>
+	  <TagDetailSidebar post={post ?? null}/>
 	</div>
       </div>)
 }) satisfies FC<Props>