Merge remote-tracking branch 'origin/main' into feature/302

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

frontend/src/components/PostFormTagsArea.tsx

@@ -3,7 +3,7 @@
 import { useRef, useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import TextArea from '@/components/common/TextArea'
 import { apiGet } from '@/lib/api'
 
@@ -33,10 +33,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 })
@@ -73,30 +74,34 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
   }
 
   return (
-      <div className="relative w-full">
-	<Label>タグ</Label>
-	<TextArea
-	    {...rest}
-	    ref={ref}
-	    value={tags}
-	    onChange={ev => setTags (ev.target.value)}
-	    onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
-	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
-	      await recompute (pos)
-	    }}
-	    onFocus={() => setFocused (true)}
-	    onBlur={() => {
-	      setFocused (false)
-	      setSuggestionsVsbl (false)
-	    }}/>
-	{focused && (
-	    <TagSearchBox
-		suggestions={suggestionsVsbl && suggestions.length > 0
-			     ? suggestions
-			     : [] as Tag[]}
-		activeIndex={-1}
-		onSelect={handleTagSelect}/>)}
-      </div>)
+      <FormField className="relative w-full" label="タグ" messages={errors}>
+	{({ describedBy, invalid }) => (
+	    <>
+	      <TextArea
+		  {...rest}
+		  ref={ref}
+		  value={tags}
+		  aria-describedby={describedBy}
+		  invalid={invalid}
+		  onChange={ev => setTags (ev.target.value)}
+		  onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
+		    const pos = (ev.target as HTMLTextAreaElement).selectionStart
+		    await recompute (pos)
+		  }}
+		  onFocus={() => setFocused (true)}
+		  onBlur={() => {
+		    setFocused (false)
+		    setSuggestionsVsbl (false)
+		  }}/>
+	      {focused && (
+		  <TagSearchBox
+		      suggestions={suggestionsVsbl && suggestions.length > 0
+				   ? suggestions
+				   : [] as Tag[]}
+		      activeIndex={-1}
+		      onSelect={handleTagSelect}/>)}
+	    </>)}
+      </FormField>)
 }
 
-export default PostFormTagsArea
+export default PostFormTagsArea

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -1,5 +1,5 @@
 import DateTimeField from '@/components/common/DateTimeField'
-import Label from '@/components/common/Label'
+import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
 
 import type { FC } from 'react'
@@ -9,68 +9,81 @@ type Props = {
     originalCreatedFrom:      string | null
     setOriginalCreatedFrom:   (x: string | null) => void
     originalCreatedBefore:    string | null
-    setOriginalCreatedBefore: (x: string | null) => void }
+    setOriginalCreatedBefore: (x: string | null) => void
+    errors?:                  string[] }
 
 
-const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
-		   originalCreatedFrom,
-		   setOriginalCreatedFrom,
-		   originalCreatedBefore,
-		   setOriginalCreatedBefore }) => (
-    <div>
-      <Label>オリジナルの作成日時</Label>
-      <div className="my-1 flex">
-	<div className="w-80">
-	  <DateTimeField
-	      className="mr-2"
-	      disabled={disabled ?? false}
-	      value={originalCreatedFrom ?? undefined}
-	      onChange={setOriginalCreatedFrom}
-	      onBlur={ev => {
-		const v = ev.target.value
-		if (!(v))
-		  return
+const PostOriginalCreatedTimeField: FC<Props> = (
+    { disabled,
+      originalCreatedFrom,
+      setOriginalCreatedFrom,
+      originalCreatedBefore,
+      setOriginalCreatedBefore,
+      errors }: Props,
+) => (
+    <FormField label="オリジナルの作成日時" messages={errors}>
+      {({ describedBy, invalid }) => (
+	  <>
+	    <div className="my-1 flex">
+	      <div className="w-80">
+		<DateTimeField
+		    className="mr-2"
+		    disabled={disabled ?? false}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    invalid={invalid}
+		    value={originalCreatedFrom ?? undefined}
+		    onChange={setOriginalCreatedFrom}
+		    onBlur={ev => {
+		      const v = ev.target.value
+		      if (!(v))
+			return
 
-		const d = new Date (v)
-		if (d.getMinutes () === 0 && d.getHours () === 0)
-		  d.setDate (d.getDate () + 1)
-		else
-		  d.setMinutes (d.getMinutes () + 1)
-		setOriginalCreatedBefore (d.toISOString ())
-	      }}/>
-	  以降
-	</div>
-	<div>
-	  <Button
-	      className="bg-gray-600 text-white rounded"
-	      disabled={disabled}
-	      onClick={() => {
-		setOriginalCreatedFrom (null)
-	      }}>
-	    リセット
-	  </Button>
-	</div>
-      </div>
-      <div className="my-1 flex">
-	<div className="w-80">
-	  <DateTimeField
-	      className="mr-2"
-	      disabled={disabled}
-	      value={originalCreatedBefore ?? undefined}
-	      onChange={setOriginalCreatedBefore}/>
-	  より前
-	</div>
-	<div>
-	  <Button
-	      className="bg-gray-600 text-white rounded"
-	      disabled={disabled}
-	      onClick={() => {
-		setOriginalCreatedBefore (null)
-	      }}>
-	    リセット
-	  </Button>
-	</div>
-      </div>
-    </div>)
+		      const d = new Date (v)
+		      if (d.getMinutes () === 0 && d.getHours () === 0)
+			d.setDate (d.getDate () + 1)
+		      else
+			d.setMinutes (d.getMinutes () + 1)
+		      setOriginalCreatedBefore (d.toISOString ())
+		    }}/>
+		以降
+	      </div>
+	      <div>
+		<Button
+		    className="bg-gray-600 text-white rounded"
+		    disabled={disabled}
+		    onClick={() => {
+		      setOriginalCreatedFrom (null)
+		    }}>
+		  リセット
+		</Button>
+	      </div>
+	    </div>
 
-export default PostOriginalCreatedTimeField
+	    <div className="my-1 flex">
+	      <div className="w-80">
+		<DateTimeField
+		    className="mr-2"
+		    disabled={disabled}
+		    aria-describedby={describedBy}
+		    aria-invalid={invalid}
+		    invalid={invalid}
+		    value={originalCreatedBefore ?? undefined}
+		    onChange={setOriginalCreatedBefore}/>
+		より前
+	      </div>
+	      <div>
+		<Button
+		    className="bg-gray-600 text-white rounded"
+		    disabled={disabled}
+		    onClick={() => {
+		      setOriginalCreatedBefore (null)
+		    }}>
+		  リセット
+		</Button>
+	      </div>
+	    </div>
+	  </>)}
+    </FormField>)
+
+export default PostOriginalCreatedTimeField

frontend/src/components/TagSearch.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 
 import { apiGet } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
 
 import TagSearchBox from './TagSearchBox'
 
@@ -110,11 +111,12 @@ const TagSearch: FC = () => {
 	       onFocus={() => setSuggestionsVsbl (true)}
 	       onBlur={() => setSuggestionsVsbl (false)}
 	       onKeyDown={handleKeyDown}
-	       className="w-full px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white"/>
+	       className={inputClass (false,
+				      'px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white')}/>
 	<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
 		      activeIndex={activeIndex}
 		      onSelect={handleTagSelect}/>
       </div>)
 }
 
-export default TagSearch
+export default TagSearch

frontend/src/components/common/DateTimeField.tsx

@@ -22,10 +22,11 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
     value?:     string
     onChange?:  (isoUTC: string | null) => void
     className?: string
-    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void }
+    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void
+    invalid?:   boolean }
 
 
-const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest }) => {
+const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid, ...rest }) => {
   const [local, setLocal] = useState ('')
 
   useEffect (() => {
@@ -35,9 +36,19 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest
   return (
       <input
 	  {...rest}
-	  className={cn ('border rounded p-2', className)}
+	  className={cn ('border rounded p-2',
+			 (invalid
+			  ? ['border-red-500 bg-red-50 text-red-900',
+			     'focus:border-red-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-red-200',
+			     'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			  : ['border-gray-300',
+			     'focus:border-blue-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-blue-200']),
+			 className)}
 	  type="datetime-local"
 	  value={local}
+	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
@@ -46,4 +57,4 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest
 	  onBlur={onBlur}/>)
 }
 
-export default DateTimeField
+export default DateTimeField

frontend/src/components/common/FieldError.tsx

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

frontend/src/components/common/FormField.tsx

@@ -0,0 +1,36 @@
+import { useId } from 'react'
+
+import FieldError from '@/components/common/FieldError'
+import Label from '@/components/common/Label'
+import { cn } from '@/lib/utils'
+
+import type { FC, ReactNode } from 'react'
+
+type FieldState = { describedBy?: string
+		    invalid:      boolean }
+
+type Props = {
+    children:   (state: FieldState) => ReactNode
+    checkBox?:   { label:    string
+		   checked:  boolean
+		   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+    className?:  string
+    label:      ReactNode
+    messages?:  string[] }
+
+
+const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
+  const id = useId ()
+  const invalid = messages != null && messages.length > 0
+  const errorId = invalid ? `${ id }-error` : undefined
+
+  return (
+      <div className={cn (className)}>
+	<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
+	{children ({ describedBy: errorId, invalid })}
+	<FieldError id={errorId} messages={messages}/>
+      </div>)
+}
+
+
+export default FormField

frontend/src/components/common/Label.tsx

@@ -1,32 +1,39 @@
 import React from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'
 
 type Props = { children:  React.ReactNode
-               checkBox?: { label:    string
-                            checked:  boolean
-                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+	       checkBox?: { label:    string
+			    checked:  boolean
+			    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
+	       invalid?:  boolean }
 
 
-const Label: FC<Props> = ({ children, checkBox }) => {
+const Label: FC<Props> = ({ children, checkBox, invalid }: Props) => {
+  const labelClassName = cn ('block font-semibold mb-1',
+			     invalid && 'text-red-700 dark:text-red-300')
+
   if (!(checkBox))
     {
       return (
-          <label className="block font-semibold mb-1">
-            {children}
-          </label>)
+	  <label className={labelClassName}>
+	    {children}
+	  </label>)
     }
 
   return (
       <div className="flex gap-2 mb-1">
-        <label className="flex-1 block font-semibold">{children}</label>
-        <label className="flex items-center block gap-1">
-          <input type="checkbox"
-                 checked={checkBox.checked}
-                 onChange={checkBox.onChange}/>
-          {checkBox.label}
-        </label>
+	<label className="flex-1 block font-semibold">{children}</label>
+	<label className="flex items-center block gap-1">
+	  <input type="checkbox"
+		 checked={checkBox.checked}
+		 onChange={checkBox.onChange}/>
+	  {checkBox.label}
+	</label>
       </div>)
 }
 
+
 export default Label

frontend/src/components/common/TagInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import TagSearchBox from '@/components/TagSearchBox'
 import { apiGet } from '@/lib/api'
+import { inputClass } from '@/lib/utils'
 
 import type { FC, ChangeEvent, KeyboardEvent } from 'react'
 
@@ -9,10 +10,13 @@ import type { Tag } from '@/types'
 
 
 type Props = {
-    value:      string
-    setValue:   (value: string) => void }
+    describedBy?:  string
+    invalid?:      boolean
+    value:         string
+    setValue:      (value: string) => void }
 
-const TagInput: FC<Props> = ({ value, setValue }) => {
+
+const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -85,12 +89,14 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
       <div className="relative">
 	<input
 	    type="text"
+	    aria-describedby={describedBy}
+	    aria-invalid={invalid}
 	    value={value}
 	    onChange={whenChanged}
 	    onFocus={() => setSuggestionsVsbl (true)}
 	    onBlur={() => setSuggestionsVsbl (false)}
 	    onKeyDown={handleKeyDown}
-	    className="w-full border p-2 rounded"/>
+	    className={inputClass (invalid)}/>
 	<TagSearchBox
 	    suggestions={
 		suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
@@ -99,4 +105,4 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
       </div>)
 }
 
-export default TagInput
+export default TagInput

frontend/src/components/common/TextArea.tsx

@@ -1,9 +1,25 @@
 import { forwardRef } from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { TextareaHTMLAttributes } from 'react'
 
-type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }
 
 
-export default forwardRef<HTMLTextAreaElement, Props> (({ ...props }, ref) => (
-    <textarea ref={ref} className="rounded border w-full p-2 h-32" {...props}/>))
+export default forwardRef<HTMLTextAreaElement, Props> (
+    ({ className, invalid = false, ...props }, ref) => (
+	<textarea
+	    ref={ref}
+	    aria-invalid={invalid}
+	    className={cn ('rounded border w-full p-2 h-32',
+			   (invalid
+			    ? ['border-red-500 bg-red-50 text-red-900',
+			       'focus:border-red-500 focus:outline-none focus:ring-2',
+			       'focus:ring-red-200',
+			       'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			    : ['border-gray-300',
+			       'focus:border-blue-500 focus:outline-none focus:ring-2',
+			       'focus:ring-blue-200']),
+			   className)}
+	    {...props}/>))