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

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

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -1,28 +1,31 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
+import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import PrefetchLink from '@/components/PrefetchLink'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { clientScrollBehaviour } from '@/lib/clientAnimation'
 import { fetchMaterialChanges } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
-import { dateString, inputClass } from '@/lib/utils'
+import { useUITranslation } from '@/lib/useUITranslation'
+import { localisedDateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
 
 const MaterialHistoryPage: FC = () => {
+  const { message, label } = useUITranslation ('history')
+  const locale = useLocale ()
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
   const location = useLocation ()
-  const navigate = useNavigate ()
+  const navigate = useLocaleNavigate ()
   const query = new URLSearchParams (location.search)
 
   const materialId = query.get ('material_id') ?? ''
@@ -47,13 +50,13 @@ const MaterialHistoryPage: FC = () => {
 	  ...(tag && { tag }),
 	  ...(eventType && { eventType }),
 	  page,
-	  limit }),
+	  limit }, locale),
       queryFn: () => fetchMaterialChanges ({
 	  ...(materialId && { materialId }),
 	  ...(tag && { tag }),
 	  ...(eventType && { eventType }),
 	  page,
-	  limit }) })
+	  limit }, locale) })
 
   const versions = data?.versions ?? []
   const totalPages = data ? Math.ceil (data.count / limit) : 0
@@ -80,12 +83,10 @@ const MaterialHistoryPage: FC = () => {
 
   return (
       <MainArea>
-	<Helmet>
-	  <title>{`素材履歴 | ${ SITE_TITLE }`}</title>
-	</Helmet>
+	<PageHead title={message ('materialTitle')}/>
 
 	<div className="space-y-5">
-	  <PageTitle>素材履歴</PageTitle>
+	  <PageTitle>{label ('materialTitle')}</PageTitle>
 
 	  <form
 	      onSubmit={handleSearch}
@@ -93,20 +94,24 @@ const MaterialHistoryPage: FC = () => {
 			 text-stone-900 dark:border-stone-700 dark:bg-stone-900
 			 dark:text-stone-100">
 	    <div className="space-y-3">
-	      <FormField label="素材 ID">
+	      <FormField label={label ('materialId')}>
 		{({ invalid }) => (
 		    <input
 			type="text"
 			value={materialIdInput}
+			aria-label={message ('materialId').text}
+			lang={message ('materialId').language}
 			onChange={e => setMaterialIdInput (e.target.value)}
 			className={inputClass (invalid)}/>)}
 	      </FormField>
 
-	      <FormField label="タグ名">
+	      <FormField label={label ('tagName')}>
 		{({ invalid }) => (
 		    <input
 			type="text"
 			value={tagInput}
+			aria-label={message ('tagName').text}
+			lang={message ('tagName').language}
 			onChange={e => setTagInput (e.target.value)}
 			className={inputClass (invalid)}/>)}
 	      </FormField>
@@ -117,16 +122,16 @@ const MaterialHistoryPage: FC = () => {
 		className="mt-4 rounded-full border border-stone-300 bg-white px-4 py-2
 			   text-sm text-stone-900 hover:bg-stone-100 dark:border-stone-700
 			   dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
-	      絞り込む
+	      {label ('filter')}
 	    </button>
 	  </form>
 
 	  {isLoading
-	   ? 'Loading...'
-	   : isError
+	   ? label ('common:loading')
+	   : (isError
 	   ? (
-	      <p className="text-red-600 dark:text-red-300">
-		素材履歴の取得に失敗しました．
+	      <p className="text-red-600 dark:text-red-300" role="alert">
+		{label ('materialError')}
 	      </p>)
 	   : (
 	      <>
@@ -145,14 +150,14 @@ const MaterialHistoryPage: FC = () => {
 
 		    <thead className="border-b-2 border-black dark:border-white">
 		      <tr>
-			<th className="p-2 text-left">日時</th>
-			<th className="p-2 text-left">素材 ID</th>
-			<th className="p-2 text-left">版</th>
-			<th className="p-2 text-left">タグ名</th>
-			<th className="p-2 text-left">ファイル名</th>
-			<th className="p-2 text-left">URL</th>
-			<th className="p-2 text-left">export_path</th>
-			<th className="p-2 text-left">操作者</th>
+			<th className="p-2 text-left">{label ('wiki:dateTime')}</th>
+			<th className="p-2 text-left">{label ('materialId')}</th>
+			<th className="p-2 text-left">{label ('version')}</th>
+			<th className="p-2 text-left">{label ('tagName')}</th>
+			<th className="p-2 text-left">{label ('filename')}</th>
+			<th className="p-2 text-left">{label ('shared:url')}</th>
+			<th className="p-2 text-left">{label ('exportPath')}</th>
+			<th className="p-2 text-left">{label ('actor')}</th>
 		      </tr>
 		    </thead>
 
@@ -161,7 +166,9 @@ const MaterialHistoryPage: FC = () => {
 			  <tr
 			      key={version.id}
 			      className="even:bg-gray-100 dark:even:bg-gray-700">
-			    <td className="p-2">{dateString (version.createdAt)}</td>
+			    <td className="p-2">
+			      {localisedDateString (version.createdAt, locale)}
+			    </td>
 			    <td className="p-2">
 			      <PrefetchLink to={`/materials/${ version.materialId }`}>
 				#{version.materialId}
@@ -177,7 +184,7 @@ const MaterialHistoryPage: FC = () => {
 			    <td className="p-2">
 			      {version.createdByUser
 			       ? version.createdByUser.name || `#${ version.createdByUser.id }`
-			       : 'bot 操作'}
+			       : label ('bot')}
 			    </td>
 			  </tr>))}
 		    </tbody>
@@ -185,7 +192,7 @@ const MaterialHistoryPage: FC = () => {
 		</div>
 
 		<Pagination page={page} totalPages={totalPages}/>
-	      </>)}
+	      </>))}
 	</div>
       </MainArea>)
 }