#45 差分表示以外完了

frontend/src/pages/WikiHistoryPage.tsx

@@ -1,8 +1,65 @@
+import { useEffect, useState } from 'react'
+import { Link, useLocation, useParams } from 'react-router-dom'
 import MainArea from '@/components/layout/MainArea'
+import axios from 'axios'
+import { API_BASE_URL } 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>
+        <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>差分</td>
+                  <td className="p-2">
+                    <Link to={`/wiki/${ encodeURIComponent (change.wiki_page.title) }`}
+                          className="text-blue-400 hover:underline">
+                      {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 }`}
+                          className="text-blue-400 hover:underline">
+                      {change.user.name}
+                    </Link>
+                    <br />
+                    {change.timestamp}
+                  </td>
+                </tr>))}
+          </tbody>
+        </table>
       </MainArea>)
 }