#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,73 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import MainArea from '@/components/layout/MainArea'
+import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import PageTitle from '@/components/common/PageTitle'
+
+import type { WikiPage } from '@/types'
+
+
+export default () => {
+  const { title } = useParams ()
+
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [wikiPage, setWikiPage] = useState<WikiPage | null | undefined> (undefined)
+
+  const query = new URLSearchParams (location.search)
+  const version = query.get ('version')
+
+  useEffect (() => {
+    if (/^\d+$/.test (title))
+      {
+        void (axios.get (`${ API_BASE_URL }/wiki/${ title }`)
+              .then (res => navigate (`/wiki/${ res.data.title }`, { replace: true })))
+        return
+      }
+
+    void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (title) }`, version && { params: { version } })
+          .then (res => {
+            setWikiPage (res.data)
+            WikiIdBus.set (res.data.id)
+          })
+          .catch (() => setWikiPage (null)))
+  }, [title, location.search])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`${ title } Wiki | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        {(wikiPage && version) && (
+            <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
+              {wikiPage.pred ? (
+                  <Link to={`/wiki/${ title }?version=${ wikiPage.pred }`}>
+                    &lt; 古
+                  </Link>) : <>(最古)</>}
+
+              <span>{wikiPage.updated_at}</span>
+
+              {wikiPage.succ ? (
+                  <Link to={`/wiki/${ title }?version=${ wikiPage.succ }`}>
+                    新 &gt;
+                  </Link>) : <>(最新)</>}
+            </div>)}
+        <PageTitle>{title}</PageTitle>
+        <div className="prose mx-auto p-4">
+          {wikiPage === undefined ? 'Loading...' : (
+              <>
+                <ReactMarkdown components={{ a: (
+                    ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
+                                             ? <Link to={href!}>{children}</Link>
+                                             : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
+                  {wikiPage?.body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ title })。`}
+                </ReactMarkdown>
+              </>)}
+        </div>
+      </MainArea>)
+}
@@ -0,0 +1,43 @@
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams } from 'react-router-dom'
+
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { WikiPageDiff } from '@/types'
+
+
+export default () => {
+  const { id } = useParams ()
+
+  const location = useLocation ()
+
+  const [diff, setDiff] = useState<WikiPageDiff | null> (null)
+
+  const query = new URLSearchParams (location.search)
+  const from = query.get ('from')
+  const to = query.get ('to')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/${ id }/diff`, { params: { from, to } })
+          .then (res => setDiff (res.data)))
+  }, [])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki 差分: ${ diff?.title } | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <PageTitle>{diff?.title}</PageTitle>
+        <div className="prose mx-auto p-4">
+          {diff ? (
+              diff.diff.map (d => (
+                  <span className={d.type === 'added' ? 'bg-green-800' : d.type === 'removed' ? 'bg-red-800' : ''}>
+                    {d.content == '\n' ? <br /> : d.content}
+                  </span>))) : 'Loading...'}
+        </div>
+      </MainArea>)
+}
@@ -0,0 +1,87 @@
+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 { 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)
+          }))
+  }, [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>
+
+          {/* タイトル */}
+          {/* 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>)
+}
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link, useLocation, useParams } from 'react-router-dom'
+import MainArea from '@/components/layout/MainArea'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+
+import type { WikiPageChange } from '@/types'
+
+
+export default () => {
+  const [changes, setChanges] = useState<WikiPageChange[]> ([])
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const id = query.get ('id')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/changes`, id && { params: { id } })
+          .then (res => setChanges (res.data)))
+  }, [location.search])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki 変更履歴 | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <table className="table-auto w-full border-collapse">
+          <thead>
+            <tr>
+              <th></th>
+              <th className="p-2 text-left">タイトル</th>
+              <th className="p-2 text-left">変更</th>
+              <th className="p-2 text-left">日時</th>
+            </tr>
+          </thead>
+          <tbody>
+            {changes.map (change => (
+                <tr key={change.sha}>
+                  <td>
+                    {change.change_type === 'update' && (
+                        <Link to={`/wiki/${ change.wiki_page.id }/diff?from=${ change.pred }&to=${ change.sha }`}>
+                          差分
+                        </Link>)}
+                  </td>
+                  <td className="p-2">
+                    <Link to={`/wiki/${ encodeURIComponent (change.wiki_page.title) }?version=${ change.sha }`}>
+                      {change.wiki_page.title}
+                    </Link>
+                  </td>
+                  <td className="p-2">
+                    {(() => {
+                      switch (change.change_type)
+                      {
+                      case 'create':
+                        return '新規'
+                      case 'update':
+                        return '更新'
+                      case 'delete':
+                        return '削除'
+                      }
+                    }) ()}
+                  </td>
+                  <td className="p-2">
+                    <Link to={`/users/${ change.user.id }`}>
+                      {change.user.name}
+                    </Link>
+                    <br />
+                    {change.timestamp}
+                  </td>
+                </tr>))}
+          </tbody>
+        </table>
+      </MainArea>)
+}
@@ -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>)
+}
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link } from 'react-router-dom'
+import axios from 'axios'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import SectionTitle from '@/components/common/SectionTitle'
+
+import type { Category, WikiPage } from '@/types'
+
+
+export default () => {
+  const [title, setTitle] = useState ('')
+  const [text, setText] = useState ('')
+  const [category, setCategory] = useState<Category | null> (null)
+  const [results, setResults] = useState<WikiPage[]> ([])
+
+  const search = () => {
+    void (axios.get (`${ API_BASE_URL }/wiki/search`, { params: { title } })
+          .then (res => setResults (res.data)))
+  }
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault ()
+    search ()
+  }
+
+  useEffect (() => {
+    search ()
+  }, [])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <div className="max-w-xl">
+          <SectionTitle className="text-xl mb-4">Wiki</SectionTitle>
+          <form onSubmit={handleSearch} className="space-y-2">
+            {/* タイトル */}
+            <div>
+              <label>タイトル：</label><br />
+              <input type="text"
+                     value={title}
+                     onChange={e => setTitle (e.target.value)}
+                     className="border p-1 w-full" />
+            </div>
+
+            {/* 内容 */}
+            <div>
+              <label>内容：</label><br />
+              <input type="text"
+                     value={text}
+                     onChange={e => setText (e.target.value)}
+                     className="border p-1 w-full" />
+            </div>
+
+            {/* 検索 */}
+            <div className="py-3">
+              <button type="submit"
+                      className="bg-blue-500 text-white px-4 py-2 rounded">
+                検索
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div className="mt-4">
+          <table className="table-auto w-full border-collapse">
+            <thead>
+              <tr>
+                <th className="p-2 text-left">タイトル</th>
+                <th className="p-2 text-left">最終更新</th>
+              </tr>
+            </thead>
+            <tbody>
+              {results.map (page => (
+                  <tr key={page.id}>
+                    <td className="p-2">
+                      <Link to={`/wiki/${ encodeURIComponent (page.title) }`}>
+                        {page.title}
+                      </Link>
+                    </td>
+                    <td className="p-2 text-gray-100 text-sm">
+                      {page.updated_at}
+                    </td>
+                  </tr>))}
+            </tbody>
+          </table>
+        </div>
+      </MainArea>)
+}