#49 ページの移動

frontend/src/pages/wiki/WikiDiffPage.tsx

@@ -0,0 +1,43 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams } from 'react-router-dom'
+
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { WikiPageDiff } from '@/types'
+
+
+export default () => {
+  const { id } = useParams ()
+
+  const location = useLocation ()
+
+  const [diff, setDiff] = useState<WikiPageDiff | null> (null)
+
+  const query = new URLSearchParams (location.search)
+  const from = query.get ('from')
+  const to = query.get ('to')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/${ id }/diff`, { params: { from, to } })
+          .then (res => setDiff (res.data)))
+  }, [])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki 差分: ${ diff?.title } | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <PageTitle>{diff?.title}</PageTitle>
+        <div className="prose mx-auto p-4">
+          {diff ? (
+              diff.diff.map (d => (
+                  <span className={d.type === 'added' ? 'bg-green-800' : d.type === 'removed' ? 'bg-red-800' : ''}>
+                    {d.content == '\n' ? <br /> : d.content}
+                  </span>))) : 'Loading...'}
+        </div>
+      </MainArea>)
+}