#155

frontend/src/pages/posts/PostDetailPage.tsx

@@ -44,17 +44,15 @@ const PostDetailPage: FC<Props> = ({ user }) => {
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
-      mutationFn: async () => {
-	const cur = qc.getQueryData<Post> (postKey)
-	const next = !(cur?.viewed)
+      mutationFn: async (next: boolean) => {
 	await toggleViewedFlg (postId, next)
 	return next
       },
-      onMutate: async () => {
+      onMutate: async (next: boolean) => {
 	await qc.cancelQueries ({ queryKey: postKey })
 	const prev = qc.getQueryData<Post> (postKey)
 	qc.setQueryData (postKey,
-			 (cur: Post | undefined) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
+			 (cur: Post | undefined) => cur ? { ...cur, viewed: next } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
@@ -155,7 +153,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		    ref={embedRef}
 		    post={post}
 		    onLoadComplete={() => embedRef.current?.play ()}/>
-		<Button onClick={() => changeViewedFlg.mutate ()}
+		<Button onClick={() => changeViewedFlg.mutate (!(post.viewed))}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
 		  {post.viewed ? '閲覧済' : '未閲覧'}
@@ -188,4 +186,4 @@ const PostDetailPage: FC<Props> = ({ user }) => {
       </div>)
 }
 
-export default PostDetailPage
+export default PostDetailPage