#49 ページの移動

2025-06-28 02:43:57 +09:00
parent 8020586ec6
commit 72a567e519
9 changed files with 9 additions and 61 deletions
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams } from 'react-router-dom'
+import MainArea from '@/components/layout/MainArea'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { WikiPageChange } from '@/types'
+
+
+export default () => {
+  const [changes, setChanges] = useState<WikiPageChange[]> ([])
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const id = query.get ('id')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/changes`, id && { params: { id } })
+          .then (res => setChanges (res.data)))
+  }, [location.search])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki 変更履歴 | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <table className="table-auto w-full border-collapse">
+          <thead>
+            <tr>
+              <th></th>
+              <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 => (
+                <tr key={change.sha}>
+                  <td>
+                    {change.change_type === 'update' && (
+                        <Link to={`/wiki/${ change.wiki_page.id }/diff?from=${ change.pred }&to=${ change.sha }`}>
+                          差分
+                        </Link>)}
+                  </td>
+                  <td className="p-2">
+                    <Link to={`/wiki/${ encodeURIComponent (change.wiki_page.title) }?version=${ change.sha }`}>
+                      {change.wiki_page.title}
+                    </Link>
+                  </td>
+                  <td className="p-2">
+                    {(() => {
+                      switch (change.change_type)
+                      {
+                      case 'create':
+                        return '新規'
+                      case 'update':
+                        return '更新'
+                      case 'delete':
+                        return '削除'
+                      }
+                    }) ()}
+                  </td>
+                  <td className="p-2">
+                    <Link to={`/users/${ change.user.id }`}>
+                      {change.user.name}
+                    </Link>
+                    <br />
+                    {change.timestamp}
+                  </td>
+                </tr>))}
+          </tbody>
+        </table>
+      </MainArea>)
+}