#19

frontend/src/pages/WikiDetailPage.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown'
 import axios from 'axios'
 import { API_BASE_URL } from '@/config'
 import MainArea from '@/components/layout/MainArea'
+import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 
 
 export default () => {
@@ -22,7 +23,10 @@ export default () => {
       }
 
     void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (name) }`)
-          .then (res => setMarkdown (res.data))
+          .then (res => {
+            setMarkdown (res.data.body)
+            WikiIdBus.set (res.data.id)
+          })
           .catch (() => setMarkdown (null)))
   }, [name])
 
@@ -30,7 +34,7 @@ export default () => {
       <MainArea>
         <div className="prose mx-auto p-4">
           <ReactMarkdown components={{ a: (
-              ({ href, children }) => (href?.startsWith ('/')
+              ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
                                        ? <Link to={href!}>{children}</Link>
                                        : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
             {markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}

frontend/src/pages/WikiEditPage.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import NicoViewer from '@/components/NicoViewer'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/utils'
+import MarkdownIt from 'markdown-it'
+import MdEditor from 'react-markdown-editor-lite'
+import 'react-markdown-editor-lite/lib/index.css'
+import MainArea from '@/components/layout/MainArea'
+
+import type { Tag } from '@/types'
+
+const mdParser = new MarkdownIt
+
+
+export default () => {
+  const { id } = useParams ()
+
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [title, setTitle] = useState ('')
+  const [body, setBody] = useState ('')
+
+  const handleSubmit = () => {
+    const formData = new FormData ()
+    formData.append ('title', title)
+    formData.append ('body', body)
+
+    void (axios.put (`${ API_BASE_URL }/wiki/${ id }`, formData, { headers: {
+              'Content-Type':     'multipart/form-data',
+              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+          .then (res => {
+            toast ({ title: '投稿成功!' })
+            navigate (`/wiki/${ title }`)
+          })
+          .catch (e => toast ({ title:        '投稿失敗',
+                                description:  '入力を確認してください。' })))
+  }
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/${ id }`)
+          .then (res => {
+            setTitle (res.data.title)
+            setBody (res.data.body)
+          }))
+
+    document.title = `Wiki ページを編輯 | ${ SITE_TITLE }`
+  }, [id])
+
+  return (
+      <MainArea>
+        <div className="max-w-xl mx-auto p-4 space-y-4">
+          <h1 className="text-2xl font-bold mb-2">Wiki ページを編輯</h1>
+
+          {/* タイトル */}
+          {/* TODO: タグ補完 */}
+          <div>
+            <label className="block font-semibold mb-1">タイトル</label>
+            <input type="text"
+                   value={title}
+                   onChange={e => setTitle (e.target.value)}
+                   className="w-full border p-2 rounded" />
+          </div>
+
+          {/* 本文 */}
+          <div>
+            <label className="block font-semibold mb-1">本文</label>
+            <MdEditor value={body}
+                      style={{ height: '500px' }}
+                      renderHTML={text => mdParser.render (text)}
+                      onChange={({ text }) => setBody (text)} />
+          </div>
+
+          {/* 送信 */}
+          <button onClick={handleSubmit}
+                  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+            追加
+          </button>
+        </div>
+      </MainArea>)
+}