#34

frontend/src/pages/posts/PostListPage.tsx

@@ -1,34 +1,66 @@
 import { useQuery } from '@tanstack/react-query'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import PostList from '@/components/PostList'
 import PrefetchLink from '@/components/PrefetchLink'
-import { useUserSettings } from '@/components/users/UserSettingsProvider'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
+import FormField from '@/components/common/FormField'
 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 { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
-import { toFetchPostsOrder } from '@/lib/settings'
+import {
+    DEFAULT_POST_LIST_LIMIT,
+    DEFAULT_POST_LIST_ORDER,
+    getClientListLimit,
+    getClientListOrder,
+    LIST_LIMIT_OPTIONS,
+    POST_LIST_ORDER_OPTIONS,
+    setClientListSettings,
+} from '@/lib/settings'
+import { inputClass } from '@/lib/utils'
 import { fetchWikiPageByTitle } from '@/lib/wiki'
 
 import type { FC } from 'react'
 
-import type { WikiPage } from '@/types'
+import type { FetchPostsOrder, WikiPage } from '@/types'
+
+const postOrderLabel: Record<FetchPostsOrder, string> = {
+    'title:asc': 'タイトル昇順',
+    'title:desc': 'タイトル降順',
+    'url:asc': 'URL 昇順',
+    'url:desc': 'URL 降順',
+    'original_created_at:asc': 'オリジナル投稿日時 昇順',
+    'original_created_at:desc': 'オリジナル投稿日時 降順',
+    'created_at:asc': '投稿日 昇順',
+    'created_at:desc': '投稿日 降順',
+    'updated_at:asc': '更新日 昇順',
+    'updated_at:desc': '更新日 降順',
+}
+
+const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
+  const n = Number (value)
+  return n === 20 || n === 50 || n === 100 ? n : null
+}
+
+const parseOrder = (value: string | null): FetchPostsOrder | null =>
+    POST_LIST_ORDER_OPTIONS.some (option => option === value)
+    ? value as FetchPostsOrder
+    : null
 
 
 const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
-  const { settings } = useUserSettings ()
 
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const location = useLocation ()
+  const navigate = useNavigate ()
   const query = new URLSearchParams (location.search)
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
@@ -36,8 +68,16 @@ const PostListPage: FC = () => {
   const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
   const tagsKey = tags.join (' ')
   const page = Number (query.get ('page') ?? 1)
-  const limit = Number (query.get ('limit') ?? settings.postListLimit)
-  const order = toFetchPostsOrder (settings.postListOrder)
+  const limit = (
+      parseLimit (query.get ('limit'))
+      ?? getClientListLimit ('postList')
+      ?? DEFAULT_POST_LIST_LIMIT
+  )
+  const order = (
+      parseOrder (query.get ('order'))
+      ?? getClientListOrder<FetchPostsOrder> ('postList')
+      ?? DEFAULT_POST_LIST_ORDER
+  )
 
   const keys = {
       tags: tagsKey, match, page, limit,
@@ -51,6 +91,19 @@ const PostListPage: FC = () => {
   const cursor = ''
   const totalPages = data ? Math.ceil (data.count / limit) : 0
 
+  useEffect (() => {
+    setClientListSettings ('postList', { limit, order })
+  }, [limit, order])
+
+  const updateListQuery = (next: { limit?: 20 | 50 | 100
+				   order?: FetchPostsOrder }) => {
+    const params = new URLSearchParams (location.search)
+    params.set ('limit', String (next.limit ?? limit))
+    params.set ('order', next.order ?? order)
+    params.set ('page', '1')
+    navigate (`${ location.pathname }?${ params.toString () }`)
+  }
+
   useLayoutEffect (() => {
     scroll (0, 0)
 
@@ -93,6 +146,38 @@ const PostListPage: FC = () => {
 	}}/>
 
 	<MainArea>
+	  <div className="mb-4 flex flex-wrap gap-4 rounded-xl border border-border bg-background/80 p-4">
+	    <FormField label="表示件数">
+	      {() => (
+		  <select
+		      className={inputClass (false)}
+		      value={limit}
+		      onChange={ev => updateListQuery ({
+			  limit: Number (ev.target.value) as 20 | 50 | 100,
+		      })}>
+		    {LIST_LIMIT_OPTIONS.map (value => (
+			<option key={value} value={value}>
+			  {value} 件
+			</option>))}
+		  </select>)}
+	    </FormField>
+
+	    <FormField label="並び順">
+	      {() => (
+		  <select
+		      className={inputClass (false)}
+		      value={order}
+		      onChange={ev => updateListQuery ({
+			  order: ev.target.value as FetchPostsOrder,
+		      })}>
+		    {POST_LIST_ORDER_OPTIONS.map (value => (
+			<option key={value} value={value}>
+			  {postOrderLabel[value]}
+			</option>))}
+		  </select>)}
+	    </FormField>
+	  </div>
+
 	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length > 0