#90

frontend/src/pages/posts/PostNewPage.tsx

@@ -4,8 +4,9 @@ import { useNavigate } from 'react-router-dom'
 
 import PostFormTagsArea from '@/components/PostFormTagsArea'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+import FieldError from '@/components/common/FieldError'
 import Form from '@/components/common/Form'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
@@ -13,6 +14,8 @@ import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPost } from '@/lib/api'
 import { canEditContent } from '@/lib/users'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 import Forbidden from '@/pages/Forbidden'
 
 import type { FC } from 'react'
@@ -21,12 +24,18 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
+type PostFormField =
+    'url' | 'title' | 'tags' | 'parentPostIds' | 'originalCreatedAt' | 'thumbnail'
+
 
 const PostNewPage: FC<Props> = ({ user }) => {
   const editable = canEditContent (user)
 
   const navigate = useNavigate ()
 
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<PostFormField> ()
+
   const [originalCreatedBefore, setOriginalCreatedBefore] = useState<string | null> (null)
   const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
   const [parentPostIds, setParentPostIds] = useState ('')
@@ -44,6 +53,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
   const thumbnailPreviewRef = useRef ('')
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     formData.append ('title', title)
     formData.append ('url', url)
@@ -62,8 +73,9 @@ const PostNewPage: FC<Props> = ({ user }) => {
       toast ({ title: '投稿成功!' })
       navigate ('/posts')
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '投稿失敗', description: '入力を確認してください。' })
     }
   }
@@ -127,85 +139,99 @@ const PostNewPage: FC<Props> = ({ user }) => {
 	</Helmet>
 	<Form>
 	  <PageTitle>広場に投稿を追加する</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* URL */}
-	  <div>
-	    <Label>URL</Label>
-	    <input type="url"
-		   placeholder="例：https://www.nicovideo.jp/watch/..."
-		   value={url}
-		   onChange={e => setURL (e.target.value)}
-		   className="w-full border p-2 rounded"
-		   onBlur={handleURLBlur}/>
-	  </div>
+	  <FormField label="URL" messages={fieldErrors.url}>
+	    {({ describedBy, invalid }) => (
+		<input type="url"
+		       placeholder="例：https://www.nicovideo.jp/watch/..."
+		       value={url}
+		       onChange={e => setURL (e.target.value)}
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
+		       onBlur={handleURLBlur}/>)}
+	  </FormField>
 
 	  {/* タイトル */}
-	  <div>
-	    <Label checkBox={{
-		label:    '自動',
-		checked:  titleAutoFlg,
-		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
-	      タイトル
-	    </Label>
-	    <input type="text"
-		   className="w-full border rounded p-2"
-		   value={title}
-		   placeholder={titleLoading ? 'Loading...' : ''}
-		   onChange={ev => setTitle (ev.target.value)}
-		   disabled={titleAutoFlg}/>
-	  </div>
+	  <FormField
+	      checkBox={{
+		  label:    '自動',
+		  checked:  titleAutoFlg,
+		  onChange: ev => setTitleAutoFlg (ev.target.checked)}}
+	      label="タイトル"
+	      messages={fieldErrors.title}>
+	    {({ describedBy, invalid }) => (
+		<input type="text"
+		       aria-describedby={describedBy}
+		       aria-invalid={invalid}
+		       className={inputClass (invalid)}
+		       value={title}
+		       placeholder={titleLoading ? 'Loading...' : ''}
+		       onChange={ev => setTitle (ev.target.value)}
+		       disabled={titleAutoFlg}/>)}
+	  </FormField>
 
 	  {/* サムネール */}
-	  <div>
-	    <Label checkBox={{
-		label:    '自動',
-		checked:  thumbnailAutoFlg,
-		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
-	      サムネール
-	    </Label>
-	    {thumbnailAutoFlg
-	     ? (thumbnailLoading
-		? <p className="text-gray-500 text-sm">Loading...</p>
-		: !(thumbnailPreview) && (
-		    <p className="text-gray-500 text-sm">
-		      URL から自動取得されます。
-		    </p>))
-	     : (
-		<input type="file"
-		       accept="image/*"
-		       onChange={e => {
-			 const file = e.target.files?.[0]
-			 if (file)
-			   {
-			     setThumbnailFile (file)
-			     setThumbnailPreview (URL.createObjectURL (file))
-			   }
-		       }}/>)}
-	    {thumbnailPreview && (
-		<img src={thumbnailPreview}
-		     alt="preview"
-		     className="mt-2 max-h-48 rounded border"/>)}
-	  </div>
+	  <FormField
+	      checkBox={{
+		  label:    '自動',
+		  checked:  thumbnailAutoFlg,
+		  onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
+	      label="サムネール"
+	      messages={fieldErrors.thumbnail}>
+	    {({ describedBy, invalid }) => (
+		<>
+		  {thumbnailAutoFlg
+		   ? (thumbnailLoading
+		      ? <p className="text-gray-500 text-sm">Loading...</p>
+		      : !(thumbnailPreview) && (
+			  <p className="text-gray-500 text-sm">
+			    URL から自動取得されます。
+			  </p>))
+		   : (
+		      <input type="file"
+			     accept="image/*"
+			     aria-describedby={describedBy}
+			     aria-invalid={invalid}
+			     onChange={e => {
+			       const file = e.target.files?.[0]
+			       if (file)
+				 {
+				   setThumbnailFile (file)
+				   setThumbnailPreview (URL.createObjectURL (file))
+				 }
+			     }}/>)}
+		  {thumbnailPreview && (
+		      <img src={thumbnailPreview}
+			   alt="preview"
+			   className="mt-2 max-h-48 rounded border"/>)}
+		</>)}
+	  </FormField>
 
 	  {/* 親投稿 */}
-	  <div>
-	    <Label>親投稿</Label>
-	    <input
-		type="text"
-		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"
+		    value={parentPostIds}
+		    onChange={e => setParentPostIds (e.target.value)}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* タグ */}
-	  <PostFormTagsArea tags={tags} setTags={setTags}/>
+	  <PostFormTagsArea tags={tags} setTags={setTags} errors={fieldErrors.tags}/>
 
 	  {/* オリジナルの作成日時 */}
 	  <PostOriginalCreatedTimeField
 	      originalCreatedFrom={originalCreatedFrom}
 	      setOriginalCreatedFrom={setOriginalCreatedFrom}
 	      originalCreatedBefore={originalCreatedBefore}
-	      setOriginalCreatedBefore={setOriginalCreatedBefore}/>
+	      setOriginalCreatedBefore={setOriginalCreatedBefore}
+	      errors={fieldErrors.originalCreatedAt}/>
 
 	  {/* 送信 */}
 	  <Button onClick={handleSubmit}

frontend/src/pages/posts/PostSearchPage.tsx

@@ -8,7 +8,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import SortHeader from '@/components/SortHeader'
 import TagLink from '@/components/TagLink'
 import DateTimeField from '@/components/common/DateTimeField'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import Pagination from '@/components/common/Pagination'
 import TagInput from '@/components/common/TagInput'
@@ -16,7 +16,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchPosts } from '@/lib/posts'
 import { postsKeys } from '@/lib/queryKeys'
-import { dateString, originalCreatedAtString } from '@/lib/utils'
+import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -138,31 +138,33 @@ const PostSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タイトル */}
-	    <div>
-	      <Label>タイトル</Label>
-	      <input
-		  type="text"
-		  value={title}
-		  onChange={e => setTitle (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+	    <FormField label="タイトル">
+	      {({ invalid }) => (
+		  <input
+		      type="text"
+		      value={title}
+		      onChange={e => setTitle (e.target.value)}
+		      className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* URL */}
-	    <div>
-	      <Label>URL</Label>
-	      <input
-		  type="text"
-		  value={url}
-		  onChange={e => setURL (e.target.value)}
-		  className="w-full border p-2 rounded"/>
-	    </div>
+	    <FormField label="URL">
+	      {({ invalid }) => (
+		  <input
+		      type="text"
+		      value={url}
+		      onChange={e => setURL (e.target.value)}
+		      className={inputClass (invalid)}/>)}
+	    </FormField>
 
 	    {/* タグ */}
+	    <FormField label="タグ">
+	      {() => (
+		  <TagInput
+		      value={tagsStr}
+		      setValue={setTagsStr}/>)}
+	    </FormField>
 	    <div>
-	      <Label>タグ</Label>
-	      <TagInput
-		  value={tagsStr}
-		  setValue={setTagsStr}/>
 	      <fieldset className="w-full my-2">
 		<label>検索区分：</label>
 		<label className="mx-2">
@@ -185,40 +187,46 @@ const PostSearchPage: FC = () => {
 	    </div>
 
 	    {/* オリジナルの投稿日時 */}
-	    <div>
-	      <Label>オリジナルの投稿日時</Label>
-	      <DateTimeField
-		  value={originalCreatedFrom ?? undefined}
-		  onChange={setOriginalCreatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={originalCreatedTo ?? undefined}
-		  onChange={setOriginalCreatedTo}/>
-	    </div>
+	    <FormField label="オリジナルの投稿日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={originalCreatedFrom ?? undefined}
+			onChange={setOriginalCreatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={originalCreatedTo ?? undefined}
+			onChange={setOriginalCreatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 投稿日時 */}
-	    <div>
-	      <Label>投稿日時</Label>
-	      <DateTimeField
-		  value={createdFrom ?? undefined}
-		  onChange={setCreatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={createdTo ?? undefined}
-		  onChange={setCreatedTo}/>
-	    </div>
+	    <FormField label="投稿日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={createdFrom ?? undefined}
+			onChange={setCreatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={createdTo ?? undefined}
+			onChange={setCreatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 更新日時 */}
-	    <div>
-	      <Label>更新日時</Label>
-	      <DateTimeField
-		  value={updatedFrom ?? undefined}
-		  onChange={setUpdatedFrom}/>
-	      <span className="mx-1">〜</span>
-	      <DateTimeField
-		  value={updatedTo ?? undefined}
-		  onChange={setUpdatedTo}/>
-	    </div>
+	    <FormField label="更新日時">
+	      {() => (
+		  <>
+		    <DateTimeField
+			value={updatedFrom ?? undefined}
+			onChange={setUpdatedFrom}/>
+		    <span className="mx-1">〜</span>
+		    <DateTimeField
+			value={updatedTo ?? undefined}
+			onChange={setUpdatedTo}/>
+		  </>)}
+	    </FormField>
 
 	    {/* 検索 */}
 	    <div className="py-3">