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

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

frontend/src/components/PostEditForm.tsx

@@ -2,17 +2,23 @@ import { useEffect, useState } from 'react'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
 import { updatePost } from '@/lib/posts'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
 
 import type { Post, Tag } from '@/types'
 
+type PostFormField =
+    'parentPostIds' | 'tags' | 'originalCreatedAt'
+
 
 const tagsToStr = (tags: Tag[]): string => {
   const result: Tag[] = []
@@ -35,6 +41,8 @@ type Props = { post:    Post
 
 const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const [disabled, setDisabled] = useState (false)
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<PostFormField> ()
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
   const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -47,6 +55,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
+    clearValidationErrors ()
+
     try
     {
       const data = await updatePost (...args)
@@ -67,7 +77,14 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
       if (response?.status !== 409)
 	{
-	  toast ({ description: '更新はできなかったよ……' })
+	  if (applyValidationError (e))
+	    {
+	      toast ({ description: '更新はできなかったよ……' })
+	      return
+	    }
+
+	  toast ({ title: '失敗……', description: '入力を確認してください．' })
+
 	  return
 	}
 
@@ -122,33 +139,38 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
   return (
       <form onSubmit={handleSubmit} className="max-w-xl pt-2 space-y-4">
+	<FieldError messages={baseErrors}/>
+
 	{/* タイトル */}
-	<div>
-	  <Label>タイトル</Label>
-	  <input
-	      type="text"
-	      disabled={disabled}
-	      className="w-full border rounded p-2"
-	      value={title ?? ''}
-	      onChange={ev => setTitle (ev.target.value)}/>
-	</div>
+	<FormField label="タイトル">
+	  {({ invalid }) => (
+	      <input
+		  type="text"
+		  disabled={disabled}
+		  className={inputClass (invalid)}
+		  value={title ?? ''}
+		  onChange={ev => setTitle (ev.target.value)}/>)}
+	</FormField>
 
 	{/* 親投稿 */}
-	<div>
-	  <Label>親投稿</Label>
-	  <input
-	      type="text"
-	      disabled={disabled}
-	      value={parentPostIds}
-	      onChange={e => setParentPostIds (e.target.value)}
-	      className="w-full border p-2 rounded"/>
-	</div>
+	<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
+	  {({ describedBy, invalid }) => (
+	      <input
+		  type="text"
+		  disabled={disabled}
+		  value={parentPostIds}
+		  onChange={e => setParentPostIds (e.target.value)}
+		  aria-describedby={describedBy}
+		  aria-invalid={invalid}
+		  className={inputClass (invalid)}/>)}
+	</FormField>
 
 	{/* タグ */}
 	<PostFormTagsArea
 	    disabled={disabled}
 	    tags={tags}
-	    setTags={setTags}/>
+	    setTags={setTags}
+	    errors={fieldErrors.tags}/>
 
 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
@@ -156,15 +178,14 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    originalCreatedFrom={originalCreatedFrom}
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
-	    setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	    setOriginalCreatedBefore={setOriginalCreatedBefore}
+	    errors={fieldErrors.originalCreatedAt}/>
 
 	{/* 送信 */}
-	<Button
-	    type="submit"
-	    disabled={disabled}>
+	<Button type="submit" disabled={disabled}>
 	  更新
 	</Button>
       </form>)
 }
 
-export default PostEditForm
+export default PostEditForm