#19 Wiki 新規作成完成

2025-06-11 00:04:21 +09:00
parent 5b8a560024
commit 56f9ba699c
7 changed files with 109 additions and 180 deletions
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useParams, useNavigate } from 'react-router-dom'
 import ReactMarkdown from 'react-markdown'
 import axios from 'axios'
 import { API_BASE_URL } from '@/config'
@@ -8,10 +8,19 @@ import { API_BASE_URL } from '@/config'
 const WikiDetailPage = () => {
  const { name } = useParams ()

+  const navigate = useNavigate ()
+
  const [markdown, setMarkdown] = useState<string | null> (null)

  useEffect (() => {
-    void (axios.get (`${ API_BASE_URL }/wiki/${ encodeURIComponent (name) }`)
+    if (/^\d+$/.test (name))
+      {
+        void (axios.get (`${ API_BASE_URL }/wiki/${ name }`)
+              .then (res => navigate (`/wiki/${ res.data.title }`, { replace: true })))
+        return
+      }
+
+    void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (name) }`)
          .then (res => setMarkdown (res.data))
          .catch (() => setMarkdown (null)))
  }, [name])
@@ -6,48 +6,38 @@ 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'

 type Tag = { id:        number
             name:      string
             category:  string }

-type Post = { id:         number
-              url:        string
-              title:      string
-              thumbnail:  string
-              tags:       Tag[]
-              viewed:     boolean }
+const mdParser = new MarkdownIt


 const WikiNewPage = () => {
  const location = useLocation ()
  const navigate = useNavigate ()

-  const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
-  const [titleLoading, setTitleLoading] = useState (false)
-  const [url, setURL] = useState ('')
-  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
-  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
-  const [thumbnailLoading, setThumbnailLoading] = useState (false)
-  const [tags, setTags] = useState<Tag[]> ([])
-  const [tagIds, setTagIds] = useState<number[]> ([])
-  const previousURLRef = useRef ('')
+  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 ('url', url)
-    formData.append ('tags', JSON.stringify (tagIds))
-    formData.append ('thumbnail', thumbnailFile)
+    formData.append ('body', body)

-    void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
+    void (axios.post (`${ API_BASE_URL }/wiki`, formData, { headers: {
              'Content-Type':     'multipart/form-data',
              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
-          .then (() => {
+          .then (res => {
            toast ({ title: '投稿成功!' })
-            navigate ('/posts')
+            navigate (`/wiki/${ res.data.title }`)
          })
          .catch (e => toast ({ title:        '投稿失敗',
                                description:  '入力を確認してください。' })))
@@ -55,156 +45,34 @@ const WikiNewPage = () => {

  useEffect (() => {
    document.title = `新規 Wiki ページ | ${ SITE_TITLE }`
-    void (axios.get ('/api/tags')
-          .then (res => setTags (res.data))
-          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
  }, [])

-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [titleAutoFlg])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [thumbnailAutoFlg])
-
-  const handleURLBlur = () => {
-    if (!(url) || url === previousURLRef.current)
-      return
-
-    if (titleAutoFlg)
-      fetchTitle ()
-    if (thumbnailAutoFlg)
-      fetchThumbnail ()
-    previousURLRef.current = url
-  }
-
-  const fetchTitle = () => {
-    setTitle ('')
-    setTitleLoading (true)
-    void (axios.get (`${ API_BASE_URL }/preview/title`, {
-              params:   { url },
-              headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-          .then (res => {
-            setTitle (res.data.title || '')
-            setTitleLoading (false)
-          })
-          .finally (() => setTitleLoading (false)))
-  }
-
-  const fetchThumbnail = () => {
-    setThumbnailPreview ('')
-    setThumbnailFile (null)
-    setThumbnailLoading (true)
-    if (thumbnailPreview)
-      URL.revokeObjectURL (thumbnailPreview)
-    void (axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
-              params:       { url },
-              headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
-              responseType: 'blob' })
-          .then (res => {
-            const imageURL = URL.createObjectURL (res.data)
-            setThumbnailPreview (imageURL)
-            setThumbnailFile (new File ([res.data],
-                                        'thumbnail.png',
-                                        { type: res.data.type || 'image/png' }))
-            setThumbnailLoading (false)
-          })
-          .finally (() => setThumbnailLoading (false)))
-  }
-
  return (
      <div className="max-w-xl mx-auto p-4 space-y-4">
        <h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>

-        {/* URL */}
-        <div>
-          <label className="block font-semibold mb-1">URL</label>
-          <input type="text"
-                 placeholder="例：https://www.nicovideo.jp/watch/..."
-                 value={url}
-                 onChange={e => setURL (e.target.value)}
-                 className="w-full border p-2 rounded"
-                 onBlur={handleURLBlur} />
-        </div>
-
        {/* タイトル */}
+        {/* TODO: タグ補完 */}
        <div>
-          <div className="flex gap-2 mb-1">
-            <label className="flex-1 block font-semibold">タイトル</label>
-            <label className="flex items-center block gap-1">
-              <input type="checkbox"
-                     checked={titleAutoFlg}
-                     onChange={e => setTitleAutoFlg (e.target.checked)} />
-              自動
-            </label>
-          </div>
+          <label className="block font-semibold mb-1">タイトル</label>
          <input type="text"
-                 className="w-full border rounded p-2"
                 value={title}
-                 placeholder={titleLoading ? 'Loading...' : ''}
                 onChange={e => setTitle (e.target.value)}
-                 disabled={titleAutoFlg} />
+                 className="w-full border p-2 rounded" />
        </div>

-        {/* サムネール */}
+        {/* 本文 */}
        <div>
-          <div className="flex gap-2 mb-1">
-            <label className="block font-semibold flex-1">サムネール</label>
-            <label className="flex items-center gap-1">
-              <input type="checkbox"
-                     checked={thumbnailAutoFlg}
-                     onChange={e => setThumbnailAutoFlg (e.target.checked)} />
-              自動
-            </label>
-          </div>
-          {thumbnailAutoFlg
-           ? (thumbnailLoading
-              ? <p className="text-gray-500 text-sm">Loading...</p>
-              : !(thumbnailPreview) && (
-                  <p className="text-gray-500 text-sm">
-                    URL から自動取得されます。
-                  </p>))
-           : (
-              <input type="file"
-                     accept="image/*"
-                     onChange={e => {
-                       const file = e.target.files?.[0]
-                       if (file)
-                         {
-                           setThumbnailFile (file)
-                           setThumbnailPreview (URL.createObjectURL (file))
-                         }
-                     }} />)}
-          {thumbnailPreview && (
-              <img src={thumbnailPreview}
-                   alt="preview"
-                   className="mt-2 max-h-48 rounded border" />)}
-        </div>
-
-        {/* タグ */}
-        <div>
-          <label className="block font-semibold">タグ</label>
-          <select multiple
-                  value={tagIds.map (String)}
-                  onChange={e => {
-                    const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
-                    setTagIds (values)
-                  }}
-                  className="w-full p-2 border rounded h-32">
-            {tags.map ((tag: Tag) => (
-                <option key={tag.id} value={tag.id}>
-                  {tag.name}
-                </option>))}
-          </select>
+          <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"
-                disabled={titleLoading || thumbnailLoading}>
+                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
          追加
        </button>
      </div>)