#428

frontend/src/pages/materials/MaterialHistoryPage.tsx

@@ -14,12 +14,14 @@ 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'
@@ -83,11 +85,13 @@ const MaterialHistoryPage: FC = () => {
   return (
       <MainArea>
 	<Helmet>
-	  <title>{`素材履歴 | ${ SITE_TITLE }`}</title>
+	  <title lang={message ('materialTitle').language}>
+	    {message ('materialTitle').text} | {SITE_TITLE}
+	  </title>
 	</Helmet>
 
 	<div className="space-y-5">
-	  <PageTitle>素材履歴</PageTitle>
+	  <PageTitle>{label ('materialTitle')}</PageTitle>
 
 	  <form
 	      onSubmit={handleSearch}
@@ -95,20 +99,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>
@@ -119,16 +127,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>)
 	   : (
 	      <>
@@ -147,14 +155,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">{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">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 ('actor')}</th>
 		      </tr>
 		    </thead>
 
@@ -163,7 +171,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}
@@ -179,7 +189,7 @@ const MaterialHistoryPage: FC = () => {
 			    <td className="p-2">
 			      {version.createdByUser
 			       ? version.createdByUser.name || `#${ version.createdByUser.id }`
-			       : 'bot 操作'}
+			       : label ('bot')}
 			    </td>
 			  </tr>))}
 		    </tbody>
@@ -187,7 +197,7 @@ const MaterialHistoryPage: FC = () => {
 		</div>
 
 		<Pagination page={page} totalPages={totalPages}/>
-	      </>)}
+	      </>))}
 	</div>
       </MainArea>)
 }