#19 ひとまづ表示のみ

frontend/src/pages/WikiEditPage.tsx

@@ -1,40 +0,0 @@
-import { useParams } from 'react-router-dom'
-import { useEffect, useState } from 'react'
-import axios from 'axios'
-
-
-const WikiEditPage = () => {
-  const { name } = useParams<{ name: string }> ()
-
-  const [html, setHtml] = useState('')
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = '/wiki/custom.css'  // Gollum の静的 CSS にアクセスできるようにしとく
-    document.head.appendChild(link)
-    return () => {
-      document.head.removeChild(link)
-    }
-  }, [])
-
-  useEffect(() => {
-    setLoading(true)
-    axios
-      .get(`/api/wiki/edit/${encodeURIComponent(name)}`, {
-        headers: { 'X-Transfer-Code': localStorage.getItem('user_code') || '' }
-      })
-      .then((res) => setHtml(res.data))
-      .finally(() => setLoading(false))
-  }, [name])
-
-  return loading ? (
-    <p>読み込み中...</p>
-  ) : (
-    <div dangerouslySetInnerHTML={{ __html: html }} />
-  )
-}
-
-
-export default WikiEditPage

frontend/src/pages/WikiPage.tsx

@@ -0,0 +1,22 @@
+import axios from 'axios'
+import { useState, useEffect } from 'react'
+import WikiEditor from '@/components/WikiEditor'
+import { API_BASE_URL } from '../config'
+
+
+const WikiPage = () => {
+  const [text, setText] = useState ('')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/load`, { params: { page: 'xxx' } })
+          .then (res => setText (res.data.markdown)))
+  }, [])
+
+  const save = () => {
+    void (axios.post ('/api/wiki/save', { page:     'xxx',
+                                          markdown: text })
+          .catch (err => console.error ('保存失敗', err)))
+  }
+
+  return <WikiEditor value={text} onChange={setText} onSave={save} />
+}

frontend/src/pages/WikiShowPage.tsx

@@ -0,0 +1,26 @@
+import { useParams } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import { API_BASE_URL } from '@/config'
+
+
+const WikiShowPage = () => {
+  const { name } = useParams ()
+
+  const [markdown, setMarkdown] = useState ('')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/${ encodeURIComponent (name) }`)
+          .then (res => setMarkdown (res.data))
+          .catch (() => setMarkdown ('# ページが存在しません')))
+  }, [name])
+
+  return (
+      <div className="prose mx-auto p-4">
+        <ReactMarkdown>{markdown}</ReactMarkdown>
+      </div>)
+}
+
+
+export default WikiShowPage