広場投稿追加画面の刷新 (#399) (#413)

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

frontend/src/components/PostEditForm.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
-import FormField from '@/components/common/FormField'
-import { useDialogue } from '@/components/dialogues/DialogueProvider'
+import PostDurationField from '@/components/posts/PostDurationField'
+import PostTagsField from '@/components/posts/PostTagsField'
+import PostTextField from '@/components/posts/PostTextField'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { isApiError } from '@/lib/api'
+import useDialogue from '@/lib/dialogues/useDialogue'
 import { updatePost } from '@/lib/posts'
-import { inputClass, msToTime } from '@/lib/utils'
+import { msToTime } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC, FormEvent } from 'react'
@@ -17,7 +18,11 @@ import type { FC, FormEvent } from 'react'
 import type { Post, TagWithSections } from '@/types'
 
 type PostFormField =
-    'parentPostIds' | 'tags' | 'videoMs' | 'originalCreatedAt'
+    'parentPostIds' | 'tags' | 'videoMs'
+    | 'originalCreatedAt' | 'originalCreatedFrom' | 'originalCreatedBefore'
+
+const groupedMessages = (...values: (string[] | undefined)[]): string[] =>
+    [...new Set (values.flatMap (value => value ?? []))]
 
 const videoMsToDurationValue = (videoMs: number | null): string =>
     videoMs == null ? '' : String (videoMs / 1_000)
@@ -157,32 +162,20 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
       <form onSubmit={handleSubmit} className="max-w-xl pt-2 space-y-4">
 	<FieldError messages={baseErrors}/>
 
-	{/* タイトル */}
-	<FormField label="タイトル">
-	  {({ invalid }) => (
-	      <input
-		  type="text"
-		  disabled={disabled}
-		  className={inputClass (invalid)}
-		  value={title ?? ''}
-		  onChange={e => setTitle (e.target.value)}/>)}
-	</FormField>
+	<PostTextField
+	    label="タイトル"
+	    value={title ?? ''}
+	    disabled={disabled}
+	    onChange={setTitle}/>
 
-	{/* 親投稿 */}
-	<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>
+	<PostTextField
+	    label="親投稿"
+	    value={parentPostIds}
+	    disabled={disabled}
+	    errors={fieldErrors.parentPostIds}
+	    onChange={setParentPostIds}/>
 
-	{/* タグ */}
-	<PostFormTagsArea
+	<PostTagsField
 	    disabled={disabled}
 	    tags={tags}
 	    setTags={setTags}
@@ -195,21 +188,17 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
 	    setOriginalCreatedFrom={setOriginalCreatedFrom}
 	    originalCreatedBefore={originalCreatedBefore}
 	    setOriginalCreatedBefore={setOriginalCreatedBefore}
-	    errors={fieldErrors.originalCreatedAt}/>
+	    errors={groupedMessages (
+		fieldErrors.originalCreatedAt,
+		fieldErrors.originalCreatedFrom,
+		fieldErrors.originalCreatedBefore)}/>
 
-	{/* 動画時間 */}
 	{videoFlg && (
-	    <FormField label="動画時間" messages={fieldErrors.videoMs}>
-	      {({ invalid }) => (
-		  <input
-		      type="number"
-		      min="0.001"
-		      step="0.001"
-		      disabled={disabled}
-		      className={inputClass (invalid)}
-		      value={duration}
-		      onChange={e => setDuration (e.target.value)}/>)}
-	    </FormField>)}
+	    <PostDurationField
+		value={duration}
+		disabled={disabled}
+		errors={fieldErrors.videoMs}
+		onChange={setDuration}/>)}
 
 	{/* 送信 */}
 	<Button type="submit" disabled={disabled}>