みてるぞ
750aa40e8e
Reviewed-on: #355 Co-authored-by: miteruzo <miteruzo@naver.com> Co-committed-by: miteruzo <miteruzo@naver.com>
132 行
3.6 KiB
TypeScript
132 行
3.6 KiB
TypeScript
import { useQueryClient } from '@tanstack/react-query'
|
|
import MarkdownIt from 'markdown-it'
|
|
import { useEffect, useState } from 'react'
|
|
import { Helmet } from 'react-helmet-async'
|
|
import MdEditor from 'react-markdown-editor-lite'
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
|
|
import FieldError from '@/components/common/FieldError'
|
|
import FormField from '@/components/common/FormField'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import { toast } from '@/components/ui/use-toast'
|
|
import { SITE_TITLE } from '@/config'
|
|
import { apiGet, apiPut } from '@/lib/api'
|
|
import { wikiKeys } from '@/lib/queryKeys'
|
|
import { canEditContent } from '@/lib/users'
|
|
import { inputClass } from '@/lib/utils'
|
|
import { useValidationErrors } from '@/lib/useValidationErrors'
|
|
import Forbidden from '@/pages/Forbidden'
|
|
|
|
import 'react-markdown-editor-lite/lib/index.css'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
import type { User, WikiPage } from '@/types'
|
|
|
|
const mdParser = new MarkdownIt
|
|
|
|
type Props = { user: User | null }
|
|
|
|
type WikiFormField = 'title' | 'body'
|
|
|
|
|
|
const WikiEditPage: FC<Props> = ({ user }) => {
|
|
const editable = canEditContent (user)
|
|
|
|
const { id } = useParams ()
|
|
|
|
const navigate = useNavigate ()
|
|
|
|
const qc = useQueryClient ()
|
|
|
|
const [body, setBody] = useState ('')
|
|
const [loading, setLoading] = useState (true)
|
|
const [title, setTitle] = useState ('')
|
|
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
|
|
useValidationErrors<WikiFormField> ()
|
|
|
|
const handleSubmit = async () => {
|
|
clearValidationErrors ()
|
|
|
|
const formData = new FormData ()
|
|
formData.append ('title', title)
|
|
formData.append ('body', body)
|
|
|
|
try
|
|
{
|
|
await apiPut (`/wiki/${ id }`, formData,
|
|
{ headers: { 'Content-Type': 'multipart/form-data' } })
|
|
qc.setQueryData (wikiKeys.show (title, { }),
|
|
(prev: WikiPage) => ({ ...prev, title, body }))
|
|
qc.invalidateQueries ({ queryKey: wikiKeys.root })
|
|
toast ({ title: '投稿成功!' })
|
|
navigate (`/wiki/${ title }`)
|
|
}
|
|
catch (e)
|
|
{
|
|
applyValidationError (e)
|
|
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
|
|
}
|
|
}
|
|
|
|
useEffect (() => {
|
|
if (!(editable))
|
|
return
|
|
|
|
void (async () => {
|
|
setLoading (true)
|
|
const data = await apiGet<WikiPage> (`/wiki/${ id }`)
|
|
setTitle (data.title)
|
|
setBody (data.body)
|
|
setLoading (false)
|
|
}) ()
|
|
}, [editable, id])
|
|
|
|
if (!(editable))
|
|
return <Forbidden/>
|
|
|
|
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>
|
|
|
|
{loading ? 'Loading...' : (
|
|
<>
|
|
<FieldError messages={baseErrors}/>
|
|
|
|
{/* タイトル */}
|
|
{/* TODO: タグ補完 */}
|
|
<FormField label="タイトル" messages={fieldErrors.title}>
|
|
{({ describedBy, invalid }) => (
|
|
<input type="text"
|
|
value={title}
|
|
onChange={e => setTitle (e.target.value)}
|
|
aria-describedby={describedBy}
|
|
aria-invalid={invalid}
|
|
className={inputClass (invalid)}/>)}
|
|
</FormField>
|
|
|
|
{/* 本文 */}
|
|
<FormField label="本文" messages={fieldErrors.body}>
|
|
{() => (
|
|
<MdEditor value={body}
|
|
style={{ height: '500px' }}
|
|
renderHTML={text => mdParser.render (text)}
|
|
onChange={({ text }) => setBody (text)}/>)}
|
|
</FormField>
|
|
|
|
{/* 送信 */}
|
|
<button onClick={handleSubmit}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
|
|
編輯
|
|
</button>
|
|
</>)}
|
|
</div>
|
|
</MainArea>)
|
|
}
|
|
|
|
export default WikiEditPage
|