feat: #112 の修正（#190） (#191)

Merge branch 'main' into feature/190

#190

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

frontend/src/components/TagDetailSidebar.tsx

@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
 import TagSearch from '@/components/TagSearch'
@@ -128,6 +129,9 @@ export default (({ post }: Props) => {
 			   && `${ (new Date (post.originalCreatedBefore)).toLocaleString () } より前`}
 			</>)}
 		  </li>
+		  <li>
+		    <Link to={`/posts/changes?id=${ post.id }`}>履歴</Link>
+		  </li>
 		</ul>
 	      </div>)}
 	</motion.div>

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -25,19 +25,20 @@ export default (() => {
   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 }),
+				   { params: { ...(id && { id }), page, limit } })
-					       ...(page && { page }),
-					       ...(limit && { limit }) } })
       const data = toCamel (res.data as any, { deep: true }) as {
 	  changes:  PostTagChange[]
 	  count:    number }
       setChanges (data.changes)
-      setTotalPages (Math.trunc ((data.count - 1) / limit))
+      setTotalPages (Math.ceil (data.count / limit))
     }) ()
-  }, [location.search])
+  }, [id, page, limit])
 
   return (
       <MainArea>
@@ -47,7 +48,7 @@ export default (() => {
 
 	<PageTitle>
 	  耕作履歴
-	  {Boolean (id) && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
+	  {id && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
 	</PageTitle>
 
 	<table className="table-auto w-full border-collapse">
@@ -59,29 +60,42 @@ export default (() => {
 	    </tr>
 	  </thead>
 	  <tbody>
-	    {changes.map (change => (
+	    {changes.map ((change, i) => {
-		<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
+	      let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
-		  <td>
+	      if (withPost)
-		    <Link to={`/posts/${ change.post.id }`}>
+		{
-		      <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+		  rowsCnt = 1
-			   alt={change.post.title || change.post.url}
+		  for (let j = i + 1;
-			   title={change.post.title || change.post.url || undefined}
+		       (j < changes.length
-			   className="w-40"/>
+			&& change.post.id === changes[j].post.id);
-		    </Link>
+		       ++j)
-		  </td>
+		    ++rowsCnt
-		  <td>
+		}
-		    <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+	      return (
-		    {`を${ change.changeType === 'add' ? '追加' : '削除' }`}
+		  <tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
-		  </td>
+		    {withPost && (
-		  <td>
+			<td className="align-top" rowSpan={rowsCnt}>
-		    {change.user ? (
+			  <Link to={`/posts/${ change.post.id }`}>
-			<Link to={`/users/${ change.user.id }`}>
+			    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
-			  {change.user.name}
+				 alt={change.post.title || change.post.url}
-			</Link>) : 'bot 操作'}
+				 title={change.post.title || change.post.url || undefined}
-		    <br/>
+				 className="w-40"/>
-		    {change.timestamp}
+			  </Link>
-		  </td>
+			</td>)}
-		</tr>))}
+		    <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>