#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,80 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { Helmet } from 'react-helmet'
+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 location = useLocation ()
+  const navigate = useNavigate ()
+
+  const query = new URLSearchParams (location.search)
+  const titleQuery = query.get ('title') ?? ''
+
+  const [title, setTitle] = useState (titleQuery)
+  const [body, setBody] = useState ('')
+
+  const handleSubmit = () => {
+    const formData = new FormData ()
+    formData.append ('title', title)
+    formData.append ('body', body)
+
+    void (axios.post (`${ API_BASE_URL }/wiki`, formData, { headers: {
+              'Content-Type':     'multipart/form-data',
+              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+          .then (res => {
+            toast ({ title: '投稿成功!' })
+            navigate (`/wiki/${ res.data.title }`)
+          })
+          .catch (e => toast ({ title:        '投稿失敗',
+                                description:  '入力を確認してください。' })))
+  }
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`新規 Wiki ページ | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <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>)
+}