#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,73 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import MainArea from '@/components/layout/MainArea'
+import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import PageTitle from '@/components/common/PageTitle'
+
+import type { WikiPage } from '@/types'
+
+
+export default () => {
+  const { title } = useParams ()
+
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [wikiPage, setWikiPage] = useState<WikiPage | null | undefined> (undefined)
+
+  const query = new URLSearchParams (location.search)
+  const version = query.get ('version')
+
+  useEffect (() => {
+    if (/^\d+$/.test (title))
+      {
+        void (axios.get (`${ API_BASE_URL }/wiki/${ title }`)
+              .then (res => navigate (`/wiki/${ res.data.title }`, { replace: true })))
+        return
+      }
+
+    void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`, version && { params: { version } })
+          .then (res => {
+            setWikiPage (res.data)
+            WikiIdBus.set (res.data.id)
+          })
+          .catch (() => setWikiPage (null)))
+  }, [title, location.search])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`${ title } Wiki | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        {(wikiPage && version) && (
+            <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
+              {wikiPage.pred ? (
+                  <Link to={`/wiki/${ title }?version=${ wikiPage.pred }`}>
+                    &lt; 古
+                  </Link>) : <>(最古)</>}
+
+              <span>{wikiPage.updated_at}</span>
+
+              {wikiPage.succ ? (
+                  <Link to={`/wiki/${ title }?version=${ wikiPage.succ }`}>
+                    新 &gt;
+                  </Link>) : <>(最新)</>}
+            </div>)}
+        <PageTitle>{title}</PageTitle>
+        <div className="prose mx-auto p-4">
+          {wikiPage === undefined ? 'Loading...' : (
+              <>
+                <ReactMarkdown components={{ a: (
+                    ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
+                                             ? <Link to={href!}>{children}</Link>
+                                             : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
+                  {wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ title })。`}
+                </ReactMarkdown>
+              </>)}
+        </div>
+      </MainArea>)
+}