#90

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 FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 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 { extractValidationError } from '@/lib/apiErrors'
 import { updatePost } from '@/lib/posts'
 
 import type { FC, FormEvent } from 'react'
 
+import type { FieldErrors } from '@/lib/apiErrors'
 import type { Post, Tag } from '@/types'
 
+type PostFormField =
+    'parentPostId' | 'tags' | 'originalCreatedFrom' | 'originalCreatedBefore'
+
 
 const tagsToStr = (tags: Tag[]): string => {
   const result: Tag[] = []
@@ -34,7 +40,9 @@ type Props = { post:    Post
 
 
 const PostEditForm: FC<Props> = ({ post, onSave }) => {
+  const [baseErrors, setBaseErrors] = useState<string[]> ([])
   const [disabled, setDisabled] = useState (false)
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors> ({ })
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
   const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -47,6 +55,9 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const dialogue = useDialogue ()
 
   const update = async (...args: Parameters<typeof updatePost>) => {
+    setFieldErrors ({ })
+    setBaseErrors ([])
+
     try
     {
       const data = await updatePost (...args)
@@ -67,7 +78,18 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 
       if (response?.status !== 409)
 	{
-	  toast ({ description: '更新はできなかったよ……' })
+	  const validationError = extractValidationError (e)
+
+	  if (validationError)
+	    {
+	      setFieldErrors (validationError.fieldErrors)
+	      setBaseErrors (validationError.baseErrors)
+	      toast ({ description: '更新はできなかったよ……' })
+	      return
+	    }
+
+	  toast ({ title: '失敗……', description: '入力を確認してください．' })
+
 	  return
 	}
 
@@ -142,13 +164,15 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	      value={parentPostIds}
 	      onChange={e => setParentPostIds (e.target.value)}
 	      className="w-full border p-2 rounded"/>
+	  <FieldError messages={fieldErrors.url}/>
 	</div>
 
 	{/* タグ */}
 	<PostFormTagsArea
 	    disabled={disabled}
 	    tags={tags}
-	    setTags={setTags}/>
+	    setTags={setTags}
+	    errors={fieldErrors.tags}/>
 
 	{/* オリジナルの作成日時 */}
 	<PostOriginalCreatedTimeField
@@ -156,7 +180,9 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    originalCreatedFrom={originalCreatedFrom}
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
-	    setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	    setOriginalCreatedBefore={setOriginalCreatedBefore}
+	    fromErrors={fieldErrors.originalCreatedFrom}
+	    beforeErrors={fieldErrors.originalCreatedBefore}/>
 
 	{/* 送信 */}
 	<Button
@@ -167,4 +193,4 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       </form>)
 }
 
-export default PostEditForm
+export default PostEditForm

frontend/src/components/PostFormTagsArea.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
+import FieldError from '@/components/common/FieldError'
 import Label from '@/components/common/Label'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
@@ -33,10 +34,11 @@ const replaceToken = (value: string, start: number, end: number, text: string) =
 
 type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | 'onBlur'> & {
     tags:     string
-    setTags:  (tags: string) => void }
+    setTags:  (tags: string) => void
+    errors?:  string[] }
 
 
-const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -96,7 +98,8 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
 			     : [] as Tag[]}
 		activeIndex={-1}
 		onSelect={handleTagSelect}/>)}
+	<FieldError messages={errors}/>
       </div>)
 }
 
-export default PostFormTagsArea
+export default PostFormTagsArea

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -9,7 +9,9 @@ type Props = {
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
-    setOriginalCreatedBefore: (x: string | null) => void }
+    setOriginalCreatedBefore: (x: string | null) => void
+    fromErrors?:              string[]
+    beforeErrors?:            string[] }
 
 
 const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
@@ -19,6 +21,7 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 		   setOriginalCreatedBefore }) => (
     <div>
       <Label>オリジナルの作成日時</Label>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
@@ -51,6 +54,8 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
+      <FieldError messages={fromErrors}/>
+
       <div className="my-1 flex">
 	<div className="w-80">
 	  <DateTimeField
@@ -71,6 +76,7 @@ const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 	  </Button>
 	</div>
       </div>
+      <FieldError messages={beforeErrors}/>
     </div>)
 
-export default PostOriginalCreatedTimeField
+export default PostOriginalCreatedTimeField

frontend/src/components/common/FieldError.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react'
+
+type Props = { messages?: string[] }
+
+
+export const FieldError: FC<Props> = ({ messages }: Props) => {
+  if (!(messages?.length))
+    return null
+
+  return (
+      <ul className="mt-1 space-y-1 text-red-600 dark:text-red-400">
+	{messages.map ((message, i) => <li key={i}>{message}</li>)}
+      </ul>)
+}
+
+
+export default FieldError

frontend/src/lib/apiErrors.ts

@@ -0,0 +1,30 @@
+import toCamel from 'camelcase-keys'
+
+import { isApiError } from '@/lib/api'
+
+export type FieldErrors = Partial<Record<string, string[]>>
+
+export type ValidationError = { message:      string
+				fieldErrors:  FieldErrors
+				baseErrors:   string[] }
+
+type RawValidationError = { type?:        string
+			    message?:     string
+			    errors?:      Record<string, string[]>
+			    baseErrors?:  string[] }
+
+
+export const extractValidationError = (err: unknown) => {
+  if (!(isApiError (err)) || err.response?.status !== 422)
+    return null
+
+  const data = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			{ deep: true }) as RawValidationError
+
+  if (data.type !== 'validation_error' && !(data.errors))
+    return null
+
+  return { message: data.message ?? '入力内容を確認してください．',
+	   fieldErrors: (data.errors ?? { }) as FieldErrors,
+	   baseErrors: data.baseErrors ?? [] }
+}

frontend/src/pages/posts/PostDetailPage.tsx

@@ -3,7 +3,6 @@ import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
-
 import PostEditForm from '@/components/PostEditForm'
 import PostEmbed from '@/components/PostEmbed'
 import PostList from '@/components/PostList'