React 申請・承認機能を作る④ 状態に応じた画面を作る

export type ApprovalDetail = {
  id: string;
  title: string;
  description: string;
  status: 'Draft' | 'Submitted' | 'Approved' | 'Rejected';
  version: number;
  decisionReason: string | null;
  allowedActions: {
    canEdit: boolean;
    canSubmit: boolean;
    canApprove: boolean;
    canReject: boolean;
  };
};

export class ApiError extends Error {
  constructor(public status: number, public code: string) {
    super(code);
  }
}

export async function approvalApi<T>(
  url: string, method = 'GET', body?: unknown, signal?: AbortSignal,
): Promise<T> {
  const headers: Record<string, string> = {};
  if (method !== 'GET') {
    const tokenResponse = await fetch('/api/csrf', {
      credentials: 'same-origin', cache: 'no-store', signal,
    });
    if (!tokenResponse.ok) throw new ApiError(tokenResponse.status, 'csrf_failed');
    const data: { token: string } = await tokenResponse.json();
    headers['X-CSRF-TOKEN'] = data.token;
    headers['Content-Type'] = 'application/json';
  }
  const response = await fetch(url, {
    method, credentials: 'same-origin', cache: 'no-store', headers, signal,
    body: body === undefined ? undefined : JSON.stringify(body),
  });
  if (!response.ok) {
    const problem: { code?: string } = await response.json().catch(() => ({}));
    throw new ApiError(response.status, problem.code ?? 'request_failed');
  }
  return response.json() as Promise<T>;
}

import { useEffect, useRef, useState } from 'react';
import { ApiError, approvalApi, type ApprovalDetail } from './approvalApi';

type Props = { organizationId: string; requestId: string };
type Command = 'save' | 'submit' | 'approve' | 'reject';

export function ApprovalPage(props: Props) {
  return <ApprovalEditor key={`${props.organizationId}/${props.requestId}`} {...props} />;
}

function ApprovalEditor({ organizationId, requestId }: Props) {
  const url = `/api/organizations/${encodeURIComponent(organizationId)}/approvals/${encodeURIComponent(requestId)}`;
  const [item, setItem] = useState<ApprovalDetail | null>(null);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [reason, setReason] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [needsReload, setNeedsReload] = useState(false);
  const [reload, setReload] = useState(0);
  const running = useRef(false);

  function apply(data: ApprovalDetail) {
    setItem(data);
    setTitle(data.title);
    setDescription(data.description);
    setReason('');
    setNeedsReload(false);
  }

  useEffect(() => {
    const controller = new AbortController();
    let ignore = false;
    setLoading(true);
    approvalApi<ApprovalDetail>(url, 'GET', undefined, controller.signal)
      .then(data => { if (!ignore) apply(data); })
      .catch(() => {
        if (!ignore) {
          setNeedsReload(true);
          setMessage('取得できませんでした。ログイン状態や通信を確認してください。');
        }
      })
      .finally(() => { if (!ignore) setLoading(false); });
    return () => { ignore = true; controller.abort(); };
  }, [url, reload]);

  const dirty = item !== null && (title !== item.title || description !== item.description);
  const blocked = busy || loading || needsReload;

  async function execute(command: Command) {
    if (!item || blocked || running.current) return;
    if (command === 'submit' && dirty) {
      setMessage('変更内容を保存してから申請してください。');
      return;
    }
    running.current = true;
    setBusy(true);
    setMessage('');
    const body = command === 'save'
      ? { title, description, expectedVersion: item.version }
      : command === 'reject'
        ? { reason, expectedVersion: item.version }
        : { expectedVersion: item.version };
    try {
      const result = await approvalApi<ApprovalDetail>(
        command === 'save' ? url : `${url}/${command}`,
        command === 'save' ? 'PUT' : 'POST', body,
      );
      apply(result);
      setMessage('操作が完了しました。');
    } catch (error) {
      if (error instanceof ApiError && error.status === 400) {
        setMessage('入力内容を確認してください。申請には件名と内容、却下には理由が必要です。');
      } else {
        setNeedsReload(true);
        setMessage(error instanceof ApiError && error.status === 409
          ? '別の操作で更新されています。入力を控えてから最新状態を読み直してください。'
          : '操作結果を確認できません。再送する前に最新状態を読み直してください。');
      }
    } finally {
      running.current = false;
      setBusy(false);
    }
  }

  const labels = { Draft: '下書き', Submitted: '申請中', Approved: '承認済み', Rejected: '却下' };
  return (
    <section>
      {loading && <p>読み込み中…</p>}
      {item && <>
        <p>状態：{labels[item.status]}</p>
        <label>件名
          <input value={title} maxLength={100}
            disabled={blocked || !item.allowedActions.canEdit}
            onChange={e => setTitle(e.target.value)} />
        </label>
        <label>内容
          <textarea value={description} maxLength={2000}
            disabled={blocked || !item.allowedActions.canEdit}
            onChange={e => setDescription(e.target.value)} />
        </label>
        {item.allowedActions.canEdit &&
          <button disabled={blocked || !dirty} onClick={() => execute('save')}>保存</button>}
        {item.allowedActions.canSubmit &&
          <button disabled={blocked || dirty} onClick={() => execute('submit')}>申請する</button>}
        {item.allowedActions.canApprove &&
          <button disabled={blocked} onClick={() => execute('approve')}>承認する</button>}
        {item.allowedActions.canReject && <>
          <label>却下理由
            <textarea value={reason} maxLength={500} disabled={blocked}
              onChange={e => setReason(e.target.value)} />
          </label>
          <button disabled={blocked || !reason.trim()}
            onClick={() => execute('reject')}>却下する</button>
        </>}
        {item.decisionReason && <p>却下理由：{item.decisionReason}</p>}
        {dirty && <p>未保存の変更があります。</p>}
      </>}
      <p role="status">{message}</p>
      <button disabled={busy || loading} onClick={() => {
        if ((dirty || reason) && !window.confirm('入力を破棄して最新状態を読み込みますか？')) return;
        setMessage('');
        setReload(value => value + 1);
      }}>最新状態を読み直す</button>
    </section>
  );
}