#428

frontend/src/pages/posts/PostSearchPage.tsx

@@ -6,6 +6,7 @@ import { useLocation } from 'react-router-dom'
 
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import PrefetchLink from '@/components/PrefetchLink'
+import LocalisedText from '@/components/LocalisedText'
 import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
 import DateTimeField from '@/components/common/DateTimeField'
@@ -29,7 +30,8 @@ import {
 } from '@/lib/settings'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
-import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
+import { localisedDateString, inputClass, originalCreatedAtString } from '@/lib/utils'
+import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC, FormEvent } from 'react'
 
@@ -72,6 +74,7 @@ const parseOrder = (value: string | null): FetchPostsOrder | null => {
 
 const PostSearchPage: FC = () => {
   const locale = useLocale ()
+  const { message, label } = useUITranslation ('posts')
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
   const thumbnailTransition = clientAnimationTransition (
@@ -223,14 +226,14 @@ const PostSearchPage: FC = () => {
   return (
       <MainArea>
 	<Helmet>
-	  <title>広場検索 | {SITE_TITLE}</title>
+	  <title>{message ('search.title').text} | {SITE_TITLE}</title>
 	</Helmet>
 
 	<div className="max-w-xl">
 	  <div className="flex flex-wrap items-center justify-between gap-3">
-	    <PageTitle>広場検索</PageTitle>
+	    <PageTitle>{label ('search.title')}</PageTitle>
 	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
-	      <span>件数</span>
+	      <span>{label ('common:countLabel')}</span>
 	      <select
 		  className="rounded border border-border bg-background px-2 py-1 text-sm
 			     text-foreground"
@@ -248,7 +251,7 @@ const PostSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
-	    <FormField label="タイトル">
+	    <FormField label={label ('shared:labels.title')}>
 	      {({ invalid }) => (
 		  <input
 		      type="text"
@@ -259,7 +262,7 @@ const PostSearchPage: FC = () => {
 	    </FormField>
 
 	    {/* URL */}
-	    <FormField label="URL">
+	    <FormField label={label ('shared:url')}>
 	      {({ invalid }) => (
 		  <input
 		      type="text"
@@ -269,7 +272,7 @@ const PostSearchPage: FC = () => {
 	    </FormField>
 
 	    {/* タグ */}
-	    <FormField label="タグ">
+	    <FormField label={label ('navigation:tags')}>
 	      {() => (
 		  <TagInput
 		      includeNico={true}
@@ -278,14 +281,14 @@ const PostSearchPage: FC = () => {
 	    </FormField>
 	    <div>
 	      <fieldset className="w-full my-2">
-		<label>検索区分：</label>
+		<label>{label ('search.matchType')}</label>
 		<label className="mx-2">
 		  <input
 		      type="radio"
 		      name="match-type"
 		      checked={matchType === 'all'}
 		      onChange={() => setMatchType ('all')}/>
-		  AND
+		  {label ('search.all')}
 		</label>
 		<label className="mx-2">
 		  <input
@@ -293,13 +296,13 @@ const PostSearchPage: FC = () => {
 		      name="match-type"
 		      checked={matchType === 'any'}
 		      onChange={() => setMatchType ('any')}/>
-		  OR
+		  {label ('search.any')}
 		</label>
 	      </fieldset>
 	    </div>
 
 	    {/* オリジナルの投稿日時 */}
-	    <FormField label="オリジナルの投稿日時">
+	    <FormField label={label ('history:originalPostedAt')}>
 	      {() => (
 		  <>
 		    <DateTimeField
@@ -313,7 +316,7 @@ const PostSearchPage: FC = () => {
 	    </FormField>
 
 	    {/* 投稿日時 */}
-	    <FormField label="投稿日時">
+	    <FormField label={label ('search.createdAt')}>
 	      {() => (
 		  <>
 		    <DateTimeField
@@ -327,7 +330,7 @@ const PostSearchPage: FC = () => {
 	    </FormField>
 
 	    {/* 更新日時 */}
-	    <FormField label="更新日時">
+	    <FormField label={label ('tags:updatedAt')}>
 	      {() => (
 		  <>
 		    <DateTimeField
@@ -345,13 +348,13 @@ const PostSearchPage: FC = () => {
 	      <button
 		  type="submit"
 		  className="bg-blue-500 text-white px-4 py-2 rounded">
-		検索
+		{label ('common:search')}
 	      </button>
 	    </div>
 	  </form>
 	</div>
 
-	{loading ? 'Loading...' : (results.length > 0 ? (
+	{loading ? label ('common:loading') : (results.length > 0 ? (
 	    <div className="mt-4">
 	      <div className="overflow-x-auto">
 		<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -367,40 +370,40 @@ const PostSearchPage: FC = () => {
 
 		  <thead className="border-b-2 border-black dark:border-white">
 		    <tr>
-		      <th className="p-2 text-left whitespace-nowrap">投稿</th>
+		      <th className="p-2 text-left whitespace-nowrap">{label ('history:post')}</th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchPostsOrderField>
 			    by="title"
-			    label="タイトル"
+			    label={label ('shared:labels.title')}
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchPostsOrderField>
 			    by="url"
-			    label="URL"
+			    label={label ('shared:url')}
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
-		      <th className="p-2 text-left whitespace-nowrap">タグ</th>
+		      <th className="p-2 text-left whitespace-nowrap">{label ('navigation:tags')}</th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchPostsOrderField>
 			    by="original_created_at"
-			    label="オリジナルの投稿日時"
+			    label={label ('history:originalPostedAt')}
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchPostsOrderField>
 			    by="created_at"
-			    label="投稿日時"
+			    label={label ('search.createdAt')}
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
 		      <th className="p-2 text-left whitespace-nowrap">
 			<SortHeader<FetchPostsOrderField>
 			    by="updated_at"
-			    label="更新日時"
+			    label={label ('tags:updatedAt')}
 			    currentOrder={order}
 			    defaultDirection={defaultDirection}/>
 		      </th>
@@ -445,18 +448,28 @@ const PostSearchPage: FC = () => {
 				</span>))}
 			  </td>
 			  <td className="p-2">
-			    {originalCreatedAtString (row.originalCreatedFrom,
-						      row.originalCreatedBefore)}
+			    <LocalisedText language={locale}>
+			      {originalCreatedAtString (row.originalCreatedFrom,
+				  row.originalCreatedBefore, locale)}
+			    </LocalisedText>
+			  </td>
+			  <td className="p-2">
+			    <LocalisedText language={locale}>
+			      {localisedDateString (row.createdAt, locale)}
+			    </LocalisedText>
+			  </td>
+			  <td className="p-2">
+			    <LocalisedText language={locale}>
+			      {localisedDateString (row.updatedAt, locale)}
+			    </LocalisedText>
 			  </td>
-			  <td className="p-2">{dateString (row.createdAt)}</td>
-			  <td className="p-2">{dateString (row.updatedAt)}</td>
 			</tr>))}
 		  </tbody>
 		</table>
 	      </div>
 
 	      <Pagination page={page} totalPages={totalPages}/>
-	    </div>) : '結果ないよ（笑）')}
+	    </div>) : label ('tags:empty'))}
       </MainArea>)
 }