Merge remote-tracking branch 'origin/main' into feature/140

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -0,0 +1,104 @@
+import axios from 'axios'
+import toCamel from 'camelcase-keys'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { Link, useLocation } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import PageTitle from '@/components/common/PageTitle'
+import Pagination from '@/components/common/Pagination'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { FC } from 'react'
+
+import type { PostTagChange } from '@/types'
+
+
+export default (() => {
+  const [changes, setChanges] = useState<PostTagChange[]> ([])
+  const [totalPages, setTotalPages] = useState<number> (0)
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const id = query.get ('id')
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+
+  // 投稿列の結合で使用
+  let rowsCnt: number
+
+  useEffect (() => {
+    void (async () => {
+      const res = await axios.get (`${ API_BASE_URL }/posts/changes`,
+				   { params: { ...(id && { id }), page, limit } })
+      const data = toCamel (res.data as any, { deep: true }) as {
+	  changes:  PostTagChange[]
+	  count:    number }
+      setChanges (data.changes)
+      setTotalPages (Math.ceil (data.count / limit))
+    }) ()
+  }, [id, page, limit])
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`耕作履歴 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<PageTitle>
+	  耕作履歴
+	  {id && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
+	</PageTitle>
+
+	<table className="table-auto w-full border-collapse">
+	  <thead>
+	    <tr>
+	      <th className="p-2 text-left">投稿</th>
+	      <th className="p-2 text-left">変更</th>
+	      <th className="p-2 text-left">日時</th>
+	    </tr>
+	  </thead>
+	  <tbody>
+	    {changes.map ((change, i) => {
+	      let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
+	      if (withPost)
+		{
+		  rowsCnt = 1
+		  for (let j = i + 1;
+		       (j < changes.length
+			&& change.post.id === changes[j].post.id);
+		       ++j)
+		    ++rowsCnt
+		}
+	      return (
+		  <tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
+		    {withPost && (
+			<td className="align-top" rowSpan={rowsCnt}>
+			  <Link to={`/posts/${ change.post.id }`}>
+			    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+				 alt={change.post.title || change.post.url}
+				 title={change.post.title || change.post.url || undefined}
+				 className="w-40"/>
+			  </Link>
+			</td>)}
+		    <td>
+		      <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+		      {`を${ change.changeType === 'add' ? '追加' : '削除' }`}
+		    </td>
+		    <td>
+		      {change.user ? (
+			  <Link to={`/users/${ change.user.id }`}>
+			    {change.user.name}
+			  </Link>) : 'bot 操作'}
+		      <br/>
+		      {change.timestamp}
+		    </td>
+		  </tr>)
+	    })}
+	  </tbody>
+	</table>
+
+	<Pagination page={page} totalPages={totalPages}/>
+      </MainArea>)
+}) satisfies FC

frontend/src/pages/posts/PostListPage.tsx

@@ -7,6 +7,7 @@ import { Link, useLocation, useNavigationType } from 'react-router-dom'
 import PostList from '@/components/PostList'
 import TagSidebar from '@/components/TagSidebar'
 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 { API_BASE_URL, SITE_TITLE } from '@/config'
@@ -24,6 +25,7 @@ export default () => {
   const [cursor, setCursor] = useState ('')
   const [loading, setLoading] = useState (false)
   const [posts, setPosts] = useState<Post[]> ([])
+  const [totalPages, setTotalPages] = useState (0)
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const loadMore = async (withCursor: boolean) => {
@@ -32,13 +34,15 @@ export default () => {
     const data = await fetchPosts ({
 	tags:   tags.join (' '),
 	match:  anyFlg ? 'any' : 'all',
-	limit:  20,
+	...(page && { page }),
+	...(limit && { limit }),
 	...(withCursor && { cursor }) })
     setPosts (posts => (
 	[...((new Map ([...(withCursor ? posts : []), ...data.posts]
 		       .map (post => [post.id, post])))
 	     .values ())]))
     setCursor (data.nextCursor)
+    setTotalPages (Math.ceil (data.count / limit))
 
     setLoading (false)
   }
@@ -48,6 +52,8 @@ export default () => {
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
   const tags = tagsQuery.split (' ').filter (e => e !== '')
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
 
   useEffect(() => {
     const observer = new IntersectionObserver (entries => {
@@ -64,7 +70,8 @@ export default () => {
   }, [loaderRef, loading])
 
   useLayoutEffect (() => {
-    const savedState = sessionStorage.getItem (`posts:${ tagsQuery }`)
+    // TODO: 無限ロード用
+    const savedState = /* sessionStorage.getItem (`posts:${ tagsQuery }`) */ null
     if (savedState && navigationType === 'POP')
       {
 	const { posts, cursor, scroll } = JSON.parse (savedState)
@@ -121,18 +128,23 @@ export default () => {
 	<MainArea>
 	  <TabGroup>
 	    <Tab name="広場">
-	      {posts.length
+	      {posts.length > 0
 	       ? (
-		  <PostList posts={posts} onClick={() => {
-		    const statesToSave = {
-			posts, cursor,
-			scroll: containerRef.current?.scrollTop ?? 0 }
-		    sessionStorage.setItem (`posts:${ tagsQuery }`,
-					    JSON.stringify (statesToSave))
-		  }}/>)
+		  <>
+		    <PostList posts={posts} onClick={() => {
+		      // TODO: 無限ロード用なので復活時に戻す．
+		      // const statesToSave = {
+		      //     posts, cursor,
+		      //     scroll: containerRef.current?.scrollTop ?? 0 }
+		      // sessionStorage.setItem (`posts:${ tagsQuery }`,
+		      //                         JSON.stringify (statesToSave))
+		    }}/>
+		    <Pagination page={page} totalPages={totalPages}/>
+		  </>)
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
-	      <div ref={loaderRef} className="h-12"/>
+	      {/* TODO: 無限ローディング復活までコメント・アウト */}
+	      {/* <div ref={loaderRef} className="h-12"/> */}
 	    </Tab>
 	    {tags.length === 1 && (
 		<Tab name="Wiki">