フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/wiki/WikiEditPage.tsx

@@ -5,11 +5,16 @@ 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'
@@ -22,9 +27,11 @@ const mdParser = new MarkdownIt
 
 type Props = { user: User | null }
 
+type WikiFormField = 'title' | 'body'
+
 
 const WikiEditPage: FC<Props> = ({ user }) => {
-  const editable = ['admin', 'member'].some (r => user?.role === r)
+  const editable = canEditContent (user)
 
   const { id } = useParams ()
 
@@ -35,8 +42,12 @@ const WikiEditPage: FC<Props> = ({ user }) => {
   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)
@@ -51,8 +62,9 @@ const WikiEditPage: FC<Props> = ({ user }) => {
       toast ({ title: '投稿成功!' })
       navigate (`/wiki/${ title }`)
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '投稿失敗', description: '入力を確認してください。' })
     }
   }
@@ -83,24 +95,28 @@ const WikiEditPage: FC<Props> = ({ user }) => {
 
 	  {loading ? 'Loading...' : (
 	      <>
+		<FieldError messages={baseErrors}/>
+
 		{/* タイトル */}
 		{/* 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>
+		<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>
 
 		{/* 本文 */}
-		<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>
+		<FormField label="本文" messages={fieldErrors.body}>
+		  {() => (
+		      <MdEditor value={body}
+				style={{ height: '500px' }}
+				renderHTML={text => mdParser.render (text)}
+				onChange={({ text }) => setBody (text)}/>)}
+		</FormField>
 
 		{/* 送信 */}
 		<button onClick={handleSubmit}