プリフェッチ実装（#140） (#256)

Merge branch 'main' into feature/140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 Merge remote-tracking branch 'origin/main' into feature/140 #140 ぼちぼち Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #256
2026-02-11 13:27:28 +09:00
parent 1a776e348a
commit eb975e5301
30 changed files with 517 additions and 488 deletions
@@ -1,24 +1,20 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
-import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'

 import TagLink from '@/components/TagLink'
+import PrefetchLink from '@/components/PrefetchLink'
 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 { SITE_TITLE } from '@/config'
+import { fetchPostChanges } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'

 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')
@@ -28,17 +24,11 @@ export default (() => {
  // 投稿列の結合で使用
  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])
+  const { data, isLoading: loading } = useQuery ({
+      queryKey: postsKeys.changes ({ ...(id && { id }), page, limit }),
+      queryFn:  () => fetchPostChanges ({ ...(id && { id }), page, limit }) })
+  const changes = data?.changes ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0

  return (
      <MainArea>
@@ -48,57 +38,60 @@ export default (() => {

 	<PageTitle>
 	  耕作履歴
-	  {id && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
+	  {id && <>: 投稿 {<PrefetchLink to={`/posts/${ id }`}>#{id}</PrefetchLink>}</>}
 	</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>
+	{loading ? 'Loading...' : (
+	    <>
+	      <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}>
+				<PrefetchLink 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"/>
+				</PrefetchLink>
+			      </td>)}
+			  <td>
+			    <TagLink tag={change.tag} withWiki={false} withCount={false}/>
+			    {`を${ change.changeType === 'add' ? '記載' : '消除' }`}
+			  </td>
+			  <td>
+			    {change.user ? (
+				<PrefetchLink to={`/users/${ change.user.id }`}>
+				  {change.user.name}
+				</PrefetchLink>) : 'bot 操作'}
+			    <br/>
+			    {change.timestamp}
+			  </td>
+			</tr>)
+		  })}
+		</tbody>
+	      </table>

-	<Pagination page={page} totalPages={totalPages}/>
+	      <Pagination page={page} totalPages={totalPages}/>
+	    </>)}
      </MainArea>)
 }) satisfies FC