PostHistoryPage で重複サムネが表示されないバグ（#278） (#293)

#278

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

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -37,6 +37,8 @@ export default (() => {
     document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
   }, [location.search])
 
+  const layoutIds: string[] = []
+
   return (
       <MainArea>
 	<Helmet>
@@ -60,7 +62,7 @@ export default (() => {
 		</thead>
 		<tbody>
 		  {changes.map ((change, i) => {
-		    let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
+		    const withPost = i === 0 || change.post.id !== changes[i - 1].post.id
 		    if (withPost)
 		      {
 			rowsCnt = 1
@@ -70,6 +72,13 @@ export default (() => {
 			     ++j)
 			  ++rowsCnt
 		      }
+
+		    let layoutId: string | undefined = `page-${ change.post.id }`
+		    if (layoutIds.includes (layoutId))
+		      layoutId = undefined
+		    else
+		      layoutIds.push (layoutId)
+
 		    return (
 			<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag?.id }`}
 			    className={cn ('even:bg-gray-100 dark:even:bg-gray-700',
@@ -79,12 +88,14 @@ export default (() => {
 				  rowSpan={rowsCnt}>
 				<PrefetchLink to={`/posts/${ change.post.id }`}>
 				  <motion.div
-				      layoutId={`page-${ change.post.id }`}
+				      layoutId={layoutId}
 				      transition={{ type: 'spring',
 						    stiffness: 500,
 						    damping: 40,
 						    mass: .5 }}>
-				    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
+				    <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"/>