アイヌ語追加 (#428) (#433)

Reviewed-on: #433
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/posts/PostDetailPage.tsx

@@ -1,8 +1,8 @@
 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 { useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
+import { useLocale } from '@/lib/useLocale'
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
 import PostList from '@/components/PostList'
@@ -11,13 +11,14 @@ 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 PageHead from '@/components/common/PageHead'
 import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { canEditContent } from '@/lib/users'
 import { cn } from '@/lib/utils'
+import { useUITranslation } from '@/lib/useUITranslation'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
@@ -29,6 +30,8 @@ type Props = { user: User | null }
 
 
 const PostDetailPage: FC<Props> = ({ user }) => {
+  const locale = useLocale ()
+  const { message, label } = useUITranslation ('posts')
   const editable = canEditContent (user)
   const behaviourSettings = useClientBehaviourSettings ()
   const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
@@ -42,18 +45,18 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 	? { duration: .08, ease: 'linear' as const }
 	: { duration: .2, ease: 'easeOut' as const }
   const postId = String (id ?? '')
-  const postKey = postsKeys.show (postId)
+  const postKey = postsKeys.show (postId, locale)
 
   const { data: post, isError: errorFlg, error } = useQuery ({
       enabled:  Boolean (id),
       queryKey: postKey,
-      queryFn:  () => fetchPost (postId) })
+      queryFn:  () => fetchPost (postId, locale) })
 
   const qc = useQueryClient ()
 
   const embedRef = useRef<NiconicoViewerHandle> (null)
 
-  const [status, setStatus] = useState (200)
+  const status = (errorFlg && isApiError (error)) ? error.response?.status ?? 200 : 200
 
   const changeViewedFlg = useMutation ({
       mutationFn: async (next: boolean) => {
@@ -70,24 +73,15 @@ const PostDetailPage: FC<Props> = ({ user }) => {
       onError: (...[, , ctx]) => {
 	if (ctx?.prev)
 	  qc.setQueryData (postKey, ctx.prev)
-	toast ({ title: '失敗……', description: '通信に失敗しました……' })
+	toast ({ title: label ('shared:messages.failed'),
+	    description: label ('detail.networkFailed') })
       },
       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)
@@ -106,11 +100,10 @@ const PostDetailPage: FC<Props> = ({ user }) => {
       <div
 	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
-	<Helmet>
+	<PageHead title={post?.title || post?.url || message ('navigation:posts')}>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail! || post.thumbnailBase!}/>)}
-	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
-	</Helmet>
+	</PageHead>
 
 	{post && <TagDetailSidebar post={post} className="hidden md:block"/>}
 
@@ -120,7 +113,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 	      <>
 		{(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>
+		      <p>{label ('detail.children', { count: post.childPosts!.length })}</p>
 		      <PostList posts={[{ ...post, childPosts: [{ } as Post] },
 					...post.childPosts!.map (p => ({
 					    ...p, parentPosts: [{ } as Post] }))]}/>
@@ -135,9 +128,9 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 			  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 } 件の姉妹投稿`}があります．
+			  {siblings.length > 1
+			   ? label ('detail.parentAndSiblings', { count: siblings.length - 1 })
+			   : label ('detail.parent')}
 			</p>
 			<PostList posts={[{ ...pp, childPosts: [{ } as Post] },
 					  ...siblings.map (p => ({
@@ -168,20 +161,20 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		<Button onClick={() => changeViewedFlg.mutate (!(post.viewed))}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
-		  {post.viewed ? '閲覧済' : '未閲覧'}
+		  {label (post.viewed ? 'detail.viewed' : 'detail.unviewed')}
 		</Button>
 		<TabGroup>
-		  <Tab name="関聯">
+		  <Tab name={label ('shared:labels.relations')}>
 		    {post.related.length > 0
 		     ? <PostList posts={post.related}/>
-		     : 'まだないよ（笑）'}
+		     : label ('detail.emptyRelated')}
 		  </Tab>
 		  {editable && (
-		      <Tab name="編輯">
+		      <Tab name={label ('shared:actions.edit')}>
 			<PostEditForm
 			    post={post}
 			 onSave={newPost => {
-			      qc.setQueryData (postsKeys.show (postId),
+			      qc.setQueryData (postsKeys.show (postId, locale),
 					       (prev: Post | undefined) => newPost ?? prev)
 			      qc.invalidateQueries ({ queryKey: postsKeys.root })
 			      qc.invalidateQueries ({ queryKey: tagsKeys.root })
@@ -189,7 +182,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {
 		      </Tab>)}
 		</TabGroup>
 	      </>)
-	   : 'Loading...'}
+	   : label ('common:loading')}
 	</MainArea>
 
 	{post && <TagDetailSidebar post={post} sp className="md:hidden"/>}