React 入力フォームを作る⑤ 保存競合と入力内容の保護

WHERE user_id = @user_id
  AND version = @expected_version

import { useRef, useState } from 'react';
import { toDraft, type Draft, type Profile } from './profileTypes';

type Props = {
  draft: Draft;
  loadLatest: () => Promise<Profile>;
  onResolve: (latest: Profile, keepDraft: boolean) => void;
};
export function ProfileComparison({ draft, loadLatest, onResolve }: Props) {
  const [latest, setLatest] = useState<Profile | null>(null);
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState('');
  const running = useRef(false);
  async function load() {
    if (running.current) return;
    running.current = true;
    setBusy(true); setMessage(''); setLatest(null);
    try { setLatest(await loadLatest()); }
    catch { setMessage('最新の内容を取得できませんでした。入力を控え、ログイン状態や通信を確認してください。'); }
    finally { running.current = false; setBusy(false); }
  }
  const serverDraft = latest ? toDraft(latest) : null;
  const labels = { displayName: '表示名', bio: '自己紹介', weeklyGoal: '週の目標日数' };
  return <section aria-label="保存内容の比較">
    <button type="button" disabled={busy} onClick={load}>最新の内容を取得する</button>
    <p role="status">{message}</p>
    {latest && serverDraft && <>
      <table>
        <caption>まだ保存は行いません。内容を比較してください。</caption>
        <thead><tr><th scope="col">項目</th><th scope="col">現在の入力</th><th scope="col">サーバーの最新値</th></tr></thead>
        <tbody>{(Object.keys(labels) as (keyof Draft)[]).map(key =>
          <tr key={key}><th scope="row">{labels[key]}</th>
            <td style={{ whiteSpace: 'pre-wrap' }}>{draft[key] || '（空欄）'}</td>
            <td style={{ whiteSpace: 'pre-wrap' }}>{serverDraft[key] || '（空欄）'}</td></tr>)}</tbody>
      </table>
      <p>入力を残す場合、次の保存では上の「現在の入力」全体で更新します。</p>
      <button type="button" onClick={() => onResolve(latest, false)}>入力を破棄して最新値を使う</button>
      <button type="button" onClick={() => onResolve(latest, true)}>入力全体を残して編集を続ける</button>
    </>}
  </section>;
}

409を受け取る
    ↓
最新のVersionだけ取得する
    ↓
古い入力を自動で再送する