React 入力フォームを作る③ 入力を保持するReactフォーム

import { useId, useRef, useState, type FormEvent } from 'react';
import { SaveError, toDraft, type Draft, type FieldErrors, type Profile, type SaveInput } from './profileTypes';
import { ProfileComparison } from './ProfileComparison';

type Props = {
  initial: Profile;
  save: (input: SaveInput) => Promise<Profile>;
  loadLatest: () => Promise<Profile>;
};
export function ProfileForm({ initial, save, loadLatest }: Props) {
  const [base, setBase] = useState(initial);
  const [draft, setDraft] = useState(() => toDraft(initial));
  const [errors, setErrors] = useState<FieldErrors>({});
  const [message, setMessage] = useState('');
  const [busy, setBusy] = useState(false);
  const [blocked, setBlocked] = useState(false);
  const running = useRef(false);
  const summary = useRef<HTMLParagraphElement>(null);
  const prefix = useId();
  const original = toDraft(base);
  const dirty = (Object.keys(draft) as (keyof Draft)[]).some(key => draft[key] !== original[key]);

  function change(key: keyof Draft, value: string) {
    setDraft(current => ({ ...current, [key]: value }));
    setErrors(current => ({ ...current, [key]: undefined }));
  }
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (running.current || blocked || !dirty) return;
    running.current = true;
    setBusy(true); setErrors({}); setMessage('');
    try {
      const saved = await save({ ...draft, expectedVersion: base.version });
      setBase(saved); setDraft(toDraft(saved));
      setMessage('保存しました。');
    } catch (error) {
      const failure = error instanceof SaveError ? error : new SaveError('unknown', '保存結果を確認できませんでした。');
      setErrors(failure.fields); setMessage(failure.message);
      setBlocked(failure.kind !== 'invalid');
      summary.current?.focus();
    } finally {
      running.current = false; setBusy(false);
    }
  }
  const labels = { displayName: '表示名', bio: '自己紹介', weeklyGoal: '週の目標日数（空欄可）' };
  return (
    <>
      <form noValidate onSubmit={submit}>
        <fieldset disabled={busy || blocked}>
          <legend>プロフィール</legend>
          {(Object.keys(labels) as (keyof Draft)[]).map(key => {
            const id = `${prefix}-${key}`;
            const fieldErrors = errors[key] ?? [];
            const common = {
              id, name: key, value: draft[key],
              'aria-invalid': fieldErrors.length > 0,
              'aria-describedby': fieldErrors.length ? `${id}-error` : undefined,
            };
            return <div key={key}>
              <label htmlFor={id}>{labels[key]}</label>
              {key === 'bio'
                ? <textarea {...common} maxLength={300} onChange={e => change(key, e.target.value)} />
                : <input {...common} type="text" inputMode={key === 'weeklyGoal' ? 'numeric' : 'text'}
                    maxLength={key === 'displayName' ? 40 : 1} onChange={e => change(key, e.target.value)} />}
              {fieldErrors.length > 0 && <p id={`${id}-error`}>{fieldErrors.join(' ')}</p>}
            </div>;
          })}
          <button type="submit" disabled={!dirty}>{busy ? '保存中…' : '保存する'}</button>
        </fieldset>
        <p ref={summary} tabIndex={-1} role="status">{message}</p>
        {dirty && <p>未保存の変更があります。</p>}
      </form>
      {blocked && <ProfileComparison draft={draft} loadLatest={loadLatest}
        onResolve={(latest, keepDraft) => {
          setBase(latest);
          if (!keepDraft) setDraft(toDraft(latest));
          setErrors({}); setMessage('内容を確認してから保存してください。'); setBlocked(false);
        }} />}
    </>
  );
}