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

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

frontend/src/pages/posts/PostListPage.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useLayoutEffect, useMemo, useRef, 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 PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
 import TagSidebar from '@/components/TagSidebar'
@@ -10,8 +10,9 @@ import WikiBody from '@/components/WikiBody'
 import Pagination from '@/components/common/Pagination'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import PageHead from '@/components/common/PageHead'
 import { fetchPosts } from '@/lib/posts'
+import { localeLanguage } from '@/lib/locales'
 import { postsKeys } from '@/lib/queryKeys'
 import {
     DEFAULT_POST_LIST_LIMIT,
@@ -21,6 +22,8 @@ import {
 } from '@/lib/settings'
 import { useKeyboardShortcuts } from '@/lib/useKeyboardShortcuts'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
+import { useUITranslation } from '@/lib/useUITranslation'
+import { useHydrated } from '@/lib/useHydrated'
 
 import type { FC } from 'react'
 
@@ -33,12 +36,15 @@ const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
 
 
 const PostListPage: FC = () => {
+  const locale = useLocale ()
+  const hydrated = useHydrated ()
+  const { message, label, siteTitle } = useUITranslation ('posts')
   const containerRef = useRef<HTMLDivElement | null> (null)
 
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const location = useLocation ()
-  const navigate = useNavigate ()
+  const navigate = useLocaleNavigate ()
   const query = new URLSearchParams (location.search)
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
@@ -48,26 +54,29 @@ const PostListPage: FC = () => {
   const page = Number (query.get ('page') ?? 1)
   const limit = (
       parseLimit (query.get ('limit'))
-      ?? getClientListLimit ('postList')
+      ?? (hydrated ? getClientListLimit ('postList') : null)
       ?? DEFAULT_POST_LIST_LIMIT
   )
   const order = 'original_created_at:desc' as const
 
   const keys = {
       tags: tagsKey, match, page, limit,
+      ...(query.get ('tag_refs') && { tagReferences: query.get ('tag_refs')! }),
       url: '', title: '', originalCreatedFrom: '', originalCreatedTo: '',
       createdFrom: '', createdTo: '', updatedFrom: '', updatedTo: '',
       order } as const
   const { data, isLoading: loading } = useQuery ({
-      queryKey: postsKeys.index (keys),
-      queryFn:  () => fetchPosts (keys) })
+      queryKey: postsKeys.index (keys, locale),
+      queryFn:  () => fetchPosts (keys, locale) })
   const posts = data?.posts ?? []
   const cursor = ''
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
   useEffect (() => {
+    if (!hydrated)
+      return
     setClientListSettings ('postList', { limit })
-  }, [limit])
+  }, [hydrated, limit])
 
   const updatePage = (nextPage: number) => {
     const params = new URLSearchParams (location.search)
@@ -111,27 +120,25 @@ const PostListPage: FC = () => {
       try
       {
 	const tagName = tags[0]
-	setWikiPage (await fetchWikiPageByTitle (tagName, { }))
+	setWikiPage (await fetchWikiPageByTitle (tagName, { }, locale))
       }
       catch
       {
 	;
       }
     }) ()
-  }, [location.search, tags])
+  }, [location.search, tags, locale])
 
   return (
       <div
 	  data-sidebar-container
 	  className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden"
 	  ref={containerRef}>
-	<Helmet>
-	  <title>
-	    {tags.length
-	     ? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
-	     : `${ SITE_TITLE }\u3000〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
-	  </title>
-	</Helmet>
+	<PageHead
+	    title={tags.length
+		   ? tags.join (message (anyFlg ? 'list.or' : 'list.and').text)
+		   : message ('list.tagline', { brand: siteTitle.text })}
+	    includeSiteName={tags.length > 0}/>
 
 	<TagSidebar posts={posts.slice (0, 20)} onClick={() => {
 	    const statesToSave = {
@@ -145,7 +152,7 @@ const PostListPage: FC = () => {
 	  <TabGroup
 	      rightAddon={
 		  <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"
@@ -160,22 +167,24 @@ const PostListPage: FC = () => {
 		    </select>
 		  </label>
 	      }>
-	    <Tab name="広場">
+	    <Tab name={label ('navigation:posts')}>
 	      {posts.length > 0
 	       ? (
 		  <>
 		    <PostList posts={posts}/>
 		    <Pagination page={page} totalPages={totalPages}/>
 		  </>)
-	       : !(loading) && '広場には何もありませんよ．'}
-	      {loading && 'Loading...'}
+	       : !(loading) && label ('list.empty')}
+	      {loading && label ('common:loading')}
 	    </Tab>
 	    {tags.length === 1 && (
-		<Tab name="Wiki">
-		  <WikiBody title={tags[0]} body={wikiPage?.body}/>
+		<Tab name={label ('navigation:wiki')}>
+		  <WikiBody title={tags[0]} body={wikiPage?.body}
+		      language={wikiPage?.languageCode ?? (wikiPage?.resourceType === 'tag_description'
+			  ? localeLanguage (locale) : 'und')}/>
 		  <div className="my-2">
 		    <PrefetchLink to={`/wiki/${ encodeURIComponent (tags[0]) }`}>
-		      Wiki を見る
+		      {label ('list.viewWiki')}
 		    </PrefetchLink>
 		  </div>
 		</Tab>)}