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

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

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -4,7 +4,8 @@ import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
 import WikiBody from '@/components/WikiBody'
-import Label from '@/components/common/Label'
+import FieldError from '@/components/common/FieldError'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import TagInput from '@/components/common/TagInput'
@@ -13,6 +14,8 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiGet, apiPut } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
@@ -20,6 +23,8 @@ import type { Material, Tag } from '@/types'
 
 type MaterialWithTag = Material & { tag: Tag }
 
+type MaterialFormField = 'tag' | 'file' | 'url'
+
 
 const MaterialDetailPage: FC = () => {
   const { id } = useParams ()
@@ -31,8 +36,12 @@ const MaterialDetailPage: FC = () => {
   const [sending, setSending] = useState (false)
   const [tag, setTag] = useState ('')
   const [url, setURL] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<MaterialFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     if (tag.trim ())
       formData.append ('tag', tag)
@@ -48,8 +57,9 @@ const MaterialDetailPage: FC = () => {
       setMaterial (data)
       toast ({ title: '更新成功!' })
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '更新失敗……', description: '入力を見直してください．' })
     }
     finally
@@ -118,54 +128,66 @@ const MaterialDetailPage: FC = () => {
 
 		<Tab name="編輯">
 		  <div className="max-w-wl pt-2 space-y-4">
+		    <FieldError messages={baseErrors}/>
+
 		    {/* タグ */}
-		    <div>
-		      <Label>タグ</Label>
-		      <TagInput value={tag} setValue={setTag}/>
-		    </div>
+		    <FormField label="タグ" messages={fieldErrors.tag}>
+		      {({ describedBy, invalid }) => (
+			  <TagInput
+			      describedBy={describedBy}
+			      invalid={invalid}
+			      value={tag}
+			      setValue={setTag}/>)}
+		    </FormField>
 
 		    {/* ファイル */}
-		    <div>
-		      <Label>ファイル</Label>
-		      <input
-			  type="file"
-			  accept="image/*,video/*,audio/*"
-			  onChange={e => {
-			    const f = e.target.files?.[0]
-			    setFile (f ?? null)
-			    setFilePreview (f ? URL.createObjectURL (f) : '')
-			  }}/>
-		      {(file && filePreview) && (
-			  (/image\/.*/.test (file.type) && (
-			      <img
-				  src={filePreview}
-				  alt="preview"
-				  className="mt-2 max-h-48 rounded border"/>))
-			  || (/video\/.*/.test (file.type) && (
-			      <video
-				  src={filePreview}
-				  controls
-				  className="mt-2 max-h-48 rounded border"/>))
-			  || (/audio\/.*/.test (file.type) && (
-			      <audio
-				  src={filePreview}
-				  controls
-				  className="mt-2 max-h-48"/>))
-			  || (
-			      <p className="text-red-600 dark:text-red-400">
-				その形式のファイルには対応していません．
-			      </p>))}
-		    </div>
+		    <FormField label="ファイル" messages={fieldErrors.file}>
+		      {({ describedBy, invalid }) => (
+			  <>
+			    <input
+				type="file"
+				accept="image/*,video/*,audio/*"
+				aria-describedby={describedBy}
+				aria-invalid={invalid}
+				onChange={e => {
+				  const f = e.target.files?.[0]
+				  setFile (f ?? null)
+				  setFilePreview (f ? URL.createObjectURL (f) : '')
+				}}/>
+			    {(file && filePreview) && (
+				(/image\/.*/.test (file.type) && (
+				    <img
+					src={filePreview}
+					alt="preview"
+					className="mt-2 max-h-48 rounded border"/>))
+				|| (/video\/.*/.test (file.type) && (
+				    <video
+					src={filePreview}
+					controls
+					className="mt-2 max-h-48 rounded border"/>))
+				|| (/audio\/.*/.test (file.type) && (
+				    <audio
+					src={filePreview}
+					controls
+					className="mt-2 max-h-48"/>))
+				|| (
+				    <p className="text-red-600 dark:text-red-400">
+				      その形式のファイルには対応していません．
+				    </p>))}
+			  </>)}
+		    </FormField>
 
 		    {/* 参考 URL */}
-		    <div>
-		      <Label>参考 URL</Label>
-		      <input
-			  type="url"
-			  value={url}
-			  onChange={e => setURL (e.target.value)}
-			  className="w-full border p-2 rounded"/>
-		    </div>
+		    <FormField label="参考 URL" messages={fieldErrors.url}>
+		      {({ describedBy, invalid }) => (
+			  <input
+			      type="url"
+			      value={url}
+			      onChange={e => setURL (e.target.value)}
+			      aria-describedby={describedBy}
+			      aria-invalid={invalid}
+			      className={inputClass (invalid)}/>)}
+		    </FormField>
 
 		    {/* 送信 */}
 		    <Button
@@ -181,4 +203,4 @@ const MaterialDetailPage: FC = () => {
       </MainArea>)
 }
 
-export default MaterialDetailPage
+export default MaterialDetailPage

frontend/src/pages/materials/MaterialNewPage.test.tsx

@@ -1,11 +1,13 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import MaterialNewPage from '@/pages/materials/MaterialNewPage'
 import { renderWithProviders } from '@/test/render'
 
 const api = vi.hoisted (() => ({
-  apiPost: vi.fn (),
+  apiGet:     vi.fn (),
+  apiPost:    vi.fn (),
+  isApiError: vi.fn (),
 }))
 
 const toastApi = vi.hoisted (() => ({
@@ -16,6 +18,12 @@ vi.mock ('@/lib/api', () => api)
 vi.mock ('@/components/ui/use-toast', () => toastApi)
 
 describe ('MaterialNewPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+    api.isApiError.mockReturnValue (false)
+  })
+
   it ('initializes tag from query and submits form data', async () => {
     api.apiPost.mockResolvedValueOnce ({})
 
@@ -35,4 +43,30 @@ describe ('MaterialNewPage', () => {
     expect (formData.get ('url')).toBe ('https://example.com/ref')
     expect (toastApi.toast).toHaveBeenCalledWith ({ title: '送信成功!' })
   })
+
+  it ('shows validation errors for file and url fields', async () => {
+    api.isApiError.mockReturnValue (true)
+    api.apiPost.mockRejectedValueOnce ({
+      response: {
+        status: 422,
+        data:   {
+          type:        'validation_error',
+          message:     '入力内容を確認してください．',
+          errors:      {
+            file: ['ファイルまたは URL は必須です．'],
+            url:  ['ファイルまたは URL は必須です．'],
+          },
+          base_errors: [],
+        },
+      },
+    })
+
+    renderWithProviders (<MaterialNewPage/>)
+
+    fireEvent.change (screen.getAllByRole ('textbox')[0], { target: { value: '虹夏' } })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    expect (await screen.findAllByText ('ファイルまたは URL は必須です．')).toHaveLength (2)
+    expect (screen.getAllByRole ('textbox')[1]).toHaveAttribute ('aria-invalid', 'true')
+  })
 })

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate } from 'react-router-dom'
 
+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 TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
@@ -11,9 +12,13 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { apiPost } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
+import { useValidationErrors } from '@/lib/useValidationErrors'
 
 import type { FC } from 'react'
 
+type MaterialFormField = 'tag' | 'file' | 'url'
+
 
 const MaterialNewPage: FC = () => {
   const location = useLocation ()
@@ -27,8 +32,12 @@ const MaterialNewPage: FC = () => {
   const [sending, setSending] = useState (false)
   const [tag, setTag] = useState (tagQuery)
   const [url, setURL] = useState ('')
+  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
+      useValidationErrors<MaterialFormField> ()
 
   const handleSubmit = async () => {
+    clearValidationErrors ()
+
     const formData = new FormData
     if (tag)
       formData.append ('tag', tag)
@@ -44,8 +53,9 @@ const MaterialNewPage: FC = () => {
       toast ({ title: '送信成功!' })
       navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
     }
-    catch
+    catch (e)
     {
+      applyValidationError (e)
       toast ({ title: '送信失敗……', description: '入力を見直してください．' })
     }
     finally
@@ -62,55 +72,66 @@ const MaterialNewPage: FC = () => {
 
 	<Form>
 	  <PageTitle>素材追加</PageTitle>
+	  <FieldError messages={baseErrors}/>
 
 	  {/* タグ */}
-	  <div>
-	    <Label>タグ</Label>
-	    <TagInput value={tag} setValue={setTag}/>
-	  </div>
+	  <FormField label="タグ" messages={fieldErrors.tag}>
+	    {({ describedBy, invalid }) => (
+		<TagInput
+		    describedBy={describedBy}
+		    invalid={invalid}
+		    value={tag}
+		    setValue={setTag}/>)}
+	  </FormField>
 
 	  {/* ファイル */}
-	  <div>
-	    <Label>ファイル</Label>
-	    <input
-		type="file"
-		accept="image/*,video/*,audio/*"
-		onChange={e => {
-		  const f = e.target.files?.[0]
-		  setFile (f ?? null)
-		  setFilePreview (f ? URL.createObjectURL (f) : '')
-		}}/>
-	    {(file && filePreview) && (
-		(/image\/.*/.test (file.type) && (
-		    <img
-			src={filePreview}
-			alt="preview"
-			className="mt-2 max-h-48 rounded border"/>))
-		|| (/video\/.*/.test (file.type) && (
-		    <video
-			src={filePreview}
-			controls
-			className="mt-2 max-h-48 rounded border"/>))
-		|| (/audio\/.*/.test (file.type) && (
-		    <audio
-			src={filePreview}
-			controls
-			className="mt-2 max-h-48"/>))
-		|| (
-		    <p className="text-red-600 dark:text-red-400">
-		      その形式のファイルには対応していません．
-		    </p>))}
-	  </div>
+	  <FormField label="ファイル" messages={fieldErrors.file}>
+	    {({ describedBy, invalid }) => (
+		<>
+		  <input
+		      type="file"
+		      accept="image/*,video/*,audio/*"
+		      aria-describedby={describedBy}
+		      aria-invalid={invalid}
+		      onChange={e => {
+			const f = e.target.files?.[0]
+			setFile (f ?? null)
+			setFilePreview (f ? URL.createObjectURL (f) : '')
+		      }}/>
+		  {(file && filePreview) && (
+		      (/image\/.*/.test (file.type) && (
+			  <img
+			      src={filePreview}
+			      alt="preview"
+			      className="mt-2 max-h-48 rounded border"/>))
+		      || (/video\/.*/.test (file.type) && (
+			  <video
+			      src={filePreview}
+			      controls
+			      className="mt-2 max-h-48 rounded border"/>))
+		      || (/audio\/.*/.test (file.type) && (
+			  <audio
+			      src={filePreview}
+			      controls
+			      className="mt-2 max-h-48"/>))
+		      || (
+			  <p className="text-red-600 dark:text-red-400">
+			    その形式のファイルには対応していません．
+			  </p>))}
+		</>)}
+	  </FormField>
 
 	  {/* 参考 URL */}
-	  <div>
-	    <Label>参考 URL</Label>
-	    <input
-		type="url"
-		value={url}
-		onChange={e => setURL (e.target.value)}
-		className="w-full border p-2 rounded"/>
-	  </div>
+	  <FormField label="参考 URL" messages={fieldErrors.url}>
+	    {({ describedBy, invalid }) => (
+		<input
+		    type="url"
+		    value={url}
+		    onChange={e => setURL (e.target.value)}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    className={inputClass (invalid)}/>)}
+	  </FormField>
 
 	  {/* 送信 */}
 	  <Button
@@ -123,4 +144,4 @@ const MaterialNewPage: FC = () => {
       </MainArea>)
 }
 
-export default MaterialNewPage
+export default MaterialNewPage

frontend/src/pages/materials/MaterialSearchPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
@@ -29,23 +29,23 @@ const MaterialSearchPage: FC = () => {
 
 	  <form onSubmit={handleSearch} className="space-y-2">
 	    {/* タグ */}
-	    <div>
-	      <Label>タグ</Label>
-	      <TagInput
-		  value={tagName}
-		  setValue={setTagName}/>
-	    </div>
+	    <FormField label="タグ">
+	      {() => (
+		  <TagInput
+		      value={tagName}
+		      setValue={setTagName}/>)}
+	    </FormField>
 
 	    {/* 親タグ */}
-	    <div>
-	      <Label>親タグ</Label>
-	      <TagInput
-		  value={parentTagName}
-		  setValue={setParentTagName}/>
-	    </div>
+	    <FormField label="親タグ">
+	      {() => (
+		  <TagInput
+		      value={parentTagName}
+		      setValue={setParentTagName}/>)}
+	    </FormField>
 	  </form>
 	</div>
       </MainArea>)
 }
 
-export default MaterialSearchPage
+export default MaterialSearchPage