#49

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -1,20 +1,17 @@
 import axios from 'axios'
 import MarkdownIt from 'markdown-it'
-import React, { useEffect, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import MdEditor from 'react-markdown-editor-lite'
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 
-import NicoViewer from '@/components/NicoViewer'
 import MainArea from '@/components/layout/MainArea'
-import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
-import { cn } from '@/lib/utils'
 
 import 'react-markdown-editor-lite/lib/index.css'
 
-import type { Tag } from '@/types'
+import type { WikiPage } from '@/types'
 
 const mdParser = new MarkdownIt
 
@@ -22,68 +19,71 @@ 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 handleSubmit = async () => {
     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:  '入力を確認してください。' })))
+    try
+    {
+      await axios.put (`${ API_BASE_URL }/wiki/${ id }`, formData, { headers: {
+	  'Content-Type':     'multipart/form-data',
+	  'X-Transfer-Code':  localStorage.getItem ('user_code') ?? '' } })
+      toast ({ title: '投稿成功!' })
+      navigate (`/wiki/${ title }`)
+    }
+    catch
+    {
+      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
+    }
   }
 
   useEffect (() => {
-    void (axios.get (`${ API_BASE_URL }/wiki/${ id }`)
-          .then (res => {
-            setTitle (res.data.title)
-            setBody (res.data.body)
-          }))
+    void (async () => {
+      const res = await axios.get (`${ API_BASE_URL }/wiki/${ id }`)
+      const data = res.data as WikiPage
+      setTitle (data.title)
+      setBody (data.body)
+    }) ()
   }, [id])
 
   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>
+	<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>
+	  {/* タイトル */}
+	  {/* 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>
+	  {/* 本文 */}
+	  <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>
+	  {/* 送信 */}
+	  <button onClick={handleSubmit}
+		  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+	    追加
+	  </button>
+	</div>
       </MainArea>)
 }