#140

2026-02-01 03:59:39 +09:00
@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -26,12 +27,13 @@ type Props = { user: User | null }

 export default (({ user }: Props) => {
  const { id } = useParams ()
+  const postId = String (id ?? '')
+  const postKey = postsKeys.show (postId)

  const { data: post, isError: errorFlg, error } = useQuery ({
-      enabled:          Boolean (id),
-      queryKey:         ['posts', String (id)],
-      queryFn:          () => fetchPost (String (id)),
-      placeholderData:  undefined })
+      enabled:  Boolean (id),
+      queryKey: postKey,
+      queryFn:  () => fetchPost (postId) })

  const qc = useQueryClient ()

@@ -39,25 +41,25 @@ export default (({ user }: Props) => {

  const changeViewedFlg = useMutation ({
      mutationFn: async () => {
-	const next = !(post!.viewed)
-	await toggleViewedFlg (id!, next)
+	const cur = qc.getQueryData<any> (postKey)
+	const next = !(cur?.viewed)
+	await toggleViewedFlg (postId, next)
 	return next
      },
      onMutate: async () => {
-	await qc.cancelQueries ({ queryKey: ['posts', String (id)] })
-	const prev = qc.getQueryData<any> (['posts', String (id)])
-	qc.setQueryData (['posts', String (id)],
+	await qc.cancelQueries ({ queryKey: postKey })
+	const prev = qc.getQueryData<any> (postKey)
+	qc.setQueryData (postKey,
 			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
 	return { prev }
      },
      onError: (...[, , ctx]) => {
 	if (ctx?.prev)
-	  qc.setQueryData (['posts', String (id)], ctx.prev)
+	  qc.setQueryData (postKey, ctx.prev)
 	toast ({ title: '失敗……', description: '通信に失敗しました……' })
      },
      onSuccess: () => {
-	qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
-	qc.invalidateQueries ({ queryKey: ['related', String (id)] })
+	qc.invalidateQueries ({ queryKey: postsKeys.root })
      } })

  useEffect (() => {
@@ -115,14 +117,14 @@ export default (({ user }: Props) => {
 		  </Tab>
 		  {['admin', 'member'].some (r => user?.role === r) && (
 		      <Tab name="編輯">
-			<PostEditForm post={post}
-				      onSave={newPost => {
-					qc.setQueryData (['posts', String (id)],
-							 (prev: any) => newPost ?? prev)
-					qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
-					qc.invalidateQueries ({ queryKey: ['related', String (id)] })
-					toast ({ description: '更新しました．' })
-				      }}/>
+			<PostEditForm
+			    post={post}
+			    onSave={newPost => {
+			      qc.setQueryData (postsKeys.show (postId),
+					       (prev: any) => newPost ?? prev)
+			      qc.invalidateQueries ({ queryKey: postsKeys.root })
+			      toast ({ description: '更新しました．' })
+			    }}/>
 		      </Tab>)}
 		</TabGroup>
 	      </>)
@@ -1,94 +1,46 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation, useNavigationType } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'

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

-import type { Post, WikiPage } from '@/types'
+import type { WikiPage } from '@/types'


 export default () => {
-  const navigationType = useNavigationType ()
-
  const containerRef = useRef<HTMLDivElement | null> (null)
-  const loaderRef = useRef<HTMLDivElement | null> (null)

-  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) => {
-    setLoading (true)
-
-    const data = await fetchPosts ({
-	tags:   tags.join (' '),
-	match:  anyFlg ? 'any' : 'all',
-	...(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)
-  }
-
  const location = useLocation ()
  const query = new URLSearchParams (location.search)
  const tagsQuery = query.get ('tags') ?? ''
  const anyFlg = query.get ('match') === 'any'
+  const match = anyFlg ? 'any' : 'all'
  const tags = tagsQuery.split (' ').filter (e => e !== '')
+  const tagsKey = tags.join (' ')
  const page = Number (query.get ('page') ?? 1)
  const limit = Number (query.get ('limit') ?? 20)

-  useEffect(() => {
-    const observer = new IntersectionObserver (entries => {
-      if (entries[0].isIntersecting && !(loading) && cursor)
-	loadMore (true)
-    }, { threshold: 1 })
-
-    const target = loaderRef.current
-    target && observer.observe (target)
-
-    return () => {
-      target && observer.unobserve (target)
-    }
-  }, [loaderRef, loading])
+  const { data, isLoading: loading } = useQuery ({
+      queryKey: postsKeys.index ({ tags: tagsKey, match, page, limit }),
+      queryFn:  () => fetchPosts ({ tags: tagsKey, match, page, limit }) })
+  const posts = data?.posts ?? []
+  const cursor = data?.nextCursor ?? ''
+  const totalPages = data ? Math.ceil (data.count / limit) : 0

  useLayoutEffect (() => {
-    // TODO: 無限ロード用
-    const savedState = /* sessionStorage.getItem (`posts:${ tagsQuery }`) */ null
-    if (savedState && navigationType === 'POP')
-      {
-	const { posts, cursor, scroll } = JSON.parse (savedState)
-	setPosts (posts)
-	setCursor (cursor)
-
-	if (containerRef.current)
-	  containerRef.current.scrollTop = scroll
-
-	loadMore (true)
-      }
-    else
-      {
-	setPosts ([])
-	loadMore (false)
-      }
-
    setWikiPage (null)
    if (tags.length === 1)
      {
@@ -96,8 +48,7 @@ export default () => {
 	  try
 	  {
 	    const tagName = tags[0]
-	    const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
-	    setWikiPage (toCamel (res.data as any, { deep: true }) as WikiPage)
+	    setWikiPage (await fetchWikiPageByTitle (tagName, { }))
 	  }
 	  catch
 	  {
@@ -131,28 +82,19 @@ export default () => {
 	      {posts.length > 0
 	       ? (
 		  <>
-		    <PostList posts={posts} onClick={() => {
-		      // TODO: 無限ロード用なので復活時に戻す．
-		      // const statesToSave = {
-		      //     posts, cursor,
-		      //     scroll: containerRef.current?.scrollTop ?? 0 }
-		      // sessionStorage.setItem (`posts:${ tagsQuery }`,
-		      //                         JSON.stringify (statesToSave))
-		    }}/>
+		    <PostList posts={posts}/>
 		    <Pagination page={page} totalPages={totalPages}/>
 		  </>)
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
-	      {/* TODO: 無限ローディング復活までコメント・アウト */}
-	      {/* <div ref={loaderRef} className="h-12"/> */}
 	    </Tab>
 	    {tags.length === 1 && (
 		<Tab name="Wiki">
 		  <WikiBody title={tags[0]} body={wikiPage?.body}/>
 		  <div className="my-2">
-		    <Link to={`/wiki/${ encodeURIComponent (tags[0]) }`}>
+		    <PrefetchLink to={`/wiki/${ encodeURIComponent (tags[0]) }`}>
 		      Wiki を見る
-		    </Link>
+		    </PrefetchLink>
 		  </div>
 		</Tab>)}
 	  </TabGroup>