btrc-hub/frontend/src/pages/posts/PostDetailPage.tsx

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { motion } from 'framer-motion'
import { useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useParams } from 'react-router-dom'
import PostEditForm from '@/components/PostEditForm'
import PostEmbed from '@/components/PostEmbed'
import PostList from '@/components/PostList'
import TagDetailSidebar from '@/components/TagDetailSidebar'
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 { SITE_TITLE } from '@/config'
import { isApiError } from '@/lib/api'
import { fetchPost, toggleViewedFlg } from '@/lib/posts'
import { postsKeys, tagsKeys } from '@/lib/queryKeys'
import { canEditContent } from '@/lib/users'
import { cn } from '@/lib/utils'
import NotFound from '@/pages/NotFound'
import ServiceUnavailable from '@/pages/ServiceUnavailable'

import type { FC } from 'react'

import type { NiconicoViewerHandle, Post, User } from '@/types'

type Props = { user: User | null }


const PostDetailPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)
  const { id } = useParams ()
  const postId = String (id ?? '')
  const postKey = postsKeys.show (postId)

  const { data: post, isError: errorFlg, error } = useQuery ({
      enabled:  Boolean (id),
      queryKey: postKey,
      queryFn:  () => fetchPost (postId) })

  const qc = useQueryClient ()

  const embedRef = useRef<NiconicoViewerHandle> (null)

  const [status, setStatus] = useState (200)

  const changeViewedFlg = useMutation ({
      mutationFn: async (next: boolean) => {
	await toggleViewedFlg (postId, next)
	return next
      },
      onMutate: async (next: boolean) => {
	await qc.cancelQueries ({ queryKey: postKey })
	const prev = qc.getQueryData<Post> (postKey)
	qc.setQueryData (postKey,
			 (cur: Post | undefined) => cur ? { ...cur, viewed: next } : cur)
	return { prev }
      },
      onError: (...[, , ctx]) => {
	if (ctx?.prev)
	  qc.setQueryData (postKey, ctx.prev)
	toast ({ title: '失敗……', description: '通信に失敗しました……' })
      },
      onSuccess: () => {
	qc.invalidateQueries ({ queryKey: postsKeys.root })} })

  useEffect (() => {
    if (!(errorFlg))
      return

    const code = isApiError (error) ? error.response?.status : undefined
    if (code)
      setStatus (code)
  }, [errorFlg, error])

  useEffect (() => {
    scroll (0, 0)

    setStatus (200)
  }, [id])

  switch (status)
  {
  case 404:
    return <NotFound/>
  case 503:
    return <ServiceUnavailable/>
  }

  const viewedClass = (post?.viewed
		       ? 'bg-blue-600 hover:bg-blue-700'
		       : 'bg-gray-500 hover:bg-gray-600')

  return (
      <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
	<Helmet>
	  {(post?.thumbnail || post?.thumbnailBase) && (
	      <meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
	</Helmet>

	<div className="hidden md:block">
	  {post && <TagDetailSidebar post={post}/>}
	</div>

	<MainArea className="relative">
	  {post
	   ? (
	      <>
		{(post.childPosts ?? []).length > 0 && (
		    <div className="mb-4 bg-green-200 dark:bg-green-800 text-sm p-2 rounded-md">
		      <p>この投稿には {post.childPosts!.length} 件の子投稿があります．</p>
		      <PostList posts={[{ ...post, childPosts: [{ } as Post] },
					...post.childPosts!.map (p => ({
					    ...p, parentPosts: [{ } as Post] }))]}/>
		    </div>)}
		{(post.parentPosts ?? []).map (pp => {
		  const siblings = post.siblingPosts?.[String (pp.id) as `${ number }`]
		  if (!(siblings))
		    return

		  return (
		      <div
			  key={pp.id}
			  className="mb-4 bg-yellow-200 dark:bg-yellow-800 text-sm p-2 rounded-md">
			<p>
			  この投稿には 1 件の親投稿{
			      siblings.length > 1
			      && `と ${ siblings.length - 1 } 件の姉妹投稿`}があります．
			</p>
			<PostList posts={[{ ...pp, childPosts: [{ } as Post] },
					  ...siblings.map (p => ({
					      ...p, parentPosts: [{ } as Post] }))]}/>
		      </div>)
		})}

		{(post.thumbnail || post.thumbnailBase) && (
		    <motion.div
			layoutId={`page-${ id }`}
			className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
				   overflow-hidden rounded-xl pointer-events-none z-50"
			initial={{ opacity: 1 }}
			animate={{ opacity: 0 }}
			transition={{ duration: .2, ease: 'easeOut' }}>
		      <img src={post.thumbnail || post.thumbnailBase || undefined}
			   alt={post.title || post.url}
			   title={post.title || post.url || undefined}
			   className="object-cover w-full h-full"/>
		    </motion.div>)}

		<PostEmbed
		    ref={embedRef}
		    post={post}
		    onLoadComplete={() => embedRef.current?.play ()}/>
		<Button onClick={() => changeViewedFlg.mutate (!(post.viewed))}
			disabled={changeViewedFlg.isPending}
			className={cn ('text-white', viewedClass)}>
		  {post.viewed ? '閲覧済' : '未閲覧'}
		</Button>
		<TabGroup>
		  <Tab name="関聯">
		    {post.related.length > 0
		     ? <PostList posts={post.related}/>
		     : 'まだないよ（笑）'}
		  </Tab>
		  {editable && (
		      <Tab name="編輯">
			<PostEditForm
			    post={post}
			 onSave={newPost => {
			      qc.setQueryData (postsKeys.show (postId),
					       (prev: Post | undefined) => newPost ?? prev)
			      qc.invalidateQueries ({ queryKey: postsKeys.root })
			      qc.invalidateQueries ({ queryKey: tagsKeys.root })
			    }}/>
		      </Tab>)}
		</TabGroup>
	      </>)
	   : 'Loading...'}
	</MainArea>

	<div className="md:hidden">
	  {post && <TagDetailSidebar post={post} sp/>}
	</div>
      </div>)
}

export default PostDetailPage