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

2026-01-29 23:53:37 +09:00
@@ -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
@@ -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">
@@ -36,21 +36,32 @@ export default () => {
    if (/^\d+$/.test (title))
      {
 	void (async () => {
-	  const res = await axios.get (`${ API_BASE_URL }/wiki/${ title }`)
-	  const data = res.data as WikiPage
-	  navigate (`/wiki/${ data.title }`, { replace: true })
+	  setWikiPage (undefined)
+	  try
+	  {
+	    const res = await axios.get (`${ API_BASE_URL }/wiki/${ title }`)
+	    const data = res.data as WikiPage
+	    navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
+	  }
+	  catch
+	  {
+	    ;
+	  }
 	}) ()

 	return
      }

    void (async () => {
+      setWikiPage (undefined)
      try
      {
 	const res = await axios.get (
 	    `${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`,
 	    { params: version ? { version } : { } })
 	const data = toCamel (res.data as any, { deep: true }) as WikiPage
+	if (data.title !== title)
+	  navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
 	setWikiPage (data)
 	WikiIdBus.set (data.id)
      }
@@ -40,10 +40,10 @@ export default () => {
 	  {diff
 	   ? (
 	      diff.diff.map (d => (
-		  <span className={cn (d.type === 'added' && 'bg-green-200 dark:bg-green-800',
-				       d.type === 'removed' && 'bg-red-200 dark:bg-red-800')}>
-		    {d.content == '\n' ? <br/> : d.content}
-		  </span>)))
+		  <p className={cn (d.type === 'added' && 'bg-green-200 dark:bg-green-800',
+				    d.type === 'removed' && 'bg-red-200 dark:bg-red-800')}>
+		    {d.content}
+		  </p>)))
 	   : 'Loading...'}
 	</div>
      </MainArea>)
@@ -12,6 +12,8 @@ import Forbidden from '@/pages/Forbidden'

 import 'react-markdown-editor-lite/lib/index.css'

+import type { FC } from 'react'
+
 import type { User, WikiPage } from '@/types'

 const mdParser = new MarkdownIt
@@ -19,7 +21,7 @@ const mdParser = new MarkdownIt
 type Props = { user: User | null }


-export default ({ user }: Props) => {
+export default (({ user }: Props) => {
  if (!(['admin', 'member'].some (r => user?.role === r)))
    return <Forbidden/>

@@ -27,8 +29,9 @@ export default ({ user }: Props) => {

  const navigate = useNavigate ()

-  const [title, setTitle] = useState ('')
  const [body, setBody] = useState ('')
+  const [loading, setLoading] = useState (true)
+  const [title, setTitle] = useState ('')

  const handleSubmit = async () => {
    const formData = new FormData ()
@@ -51,10 +54,12 @@ export default ({ user }: Props) => {

  useEffect (() => {
    void (async () => {
+      setLoading (true)
      const res = await axios.get (`${ API_BASE_URL }/wiki/${ id }`)
      const data = res.data as WikiPage
      setTitle (data.title)
      setBody (data.body)
+      setLoading (false)
    }) ()
  }, [id])

@@ -66,30 +71,33 @@ export default ({ user }: Props) => {
 	<div className="max-w-xl mx-auto p-4 space-y-4">
 	  <h1 className="text-2xl font-bold mb-2">Wiki ページを編輯</h1>

-	  {/* タイトル */}
-	  {/* TODO: タグ補完 */}
-	  <div>
-	    <label className="block font-semibold mb-1">タイトル</label>
-	    <input type="text"
-		   value={title}
-		   onChange={e => setTitle (e.target.value)}
-		   className="w-full border p-2 rounded"/>
-	  </div>
+	  {loading ? 'Loading...' : (
+	      <>
+		{/* タイトル */}
+		{/* TODO: タグ補完 */}
+		<div>
+		  <label className="block font-semibold mb-1">タイトル</label>
+		  <input type="text"
+			 value={title}
+			 onChange={e => setTitle (e.target.value)}
+			 className="w-full border p-2 rounded"/>
+		</div>

-	  {/* 本文 */}
-	  <div>
-	    <label className="block font-semibold mb-1">本文</label>
-	    <MdEditor value={body}
-		      style={{ height: '500px' }}
-		      renderHTML={text => mdParser.render (text)}
-		      onChange={({ text }) => setBody (text)}/>
-	  </div>
+		{/* 本文 */}
+		<div>
+		  <label className="block font-semibold mb-1">本文</label>
+		  <MdEditor value={body}
+			    style={{ height: '500px' }}
+			    renderHTML={text => mdParser.render (text)}
+			    onChange={({ text }) => setBody (text)}/>
+		</div>

-	  {/* 送信 */}
-	  <button onClick={handleSubmit}
-		  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
-	    追加
-	  </button>
+		{/* 送信 */}
+		<button onClick={handleSubmit}
+			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+		  編輯
+		</button>
+	      </>)}
 	</div>
      </MainArea>)
-}
+}) satisfies FC<Props>
@@ -41,30 +41,20 @@ export default () => {
 	  </thead>
 	  <tbody>
 	    {changes.map (change => (
-		<tr key={change.sha}>
+		<tr key={change.revisionId}>
 		  <td>
-		    {change.changeType === 'update' && (
-			<Link to={`/wiki/${ change.wikiPage.id }/diff?from=${ change.pred }&to=${ change.sha }`}>
+		    {change.pred != null && (
+			<Link to={`/wiki/${ change.wikiPage.id }/diff?from=${ change.pred }&to=${ change.revisionId }`}>
 			  差分
 			</Link>)}
 		  </td>
 		  <td className="p-2">
-		    <Link to={`/wiki/${ encodeURIComponent (change.wikiPage.title) }?version=${ change.sha }`}>
+		    <Link to={`/wiki/${ encodeURIComponent (change.wikiPage.title) }?version=${ change.revisionId }`}>
 		      {change.wikiPage.title}
 		    </Link>
 		  </td>
 		  <td className="p-2">
-		    {(() => {
-		      switch (change.changeType)
-		      {
-		      case 'create':
-			return '新規'
-		      case 'update':
-			return '更新'
-		      case 'delete':
-			return '削除'
-		      }
-		    }) ()}
+		    {change.pred == null ? '新規' : '更新'}
 		  </td>
 		  <td className="p-2">
 		    <Link to={`/users/${ change.user.id }`}>