React 確認ダイアログの結果をPromiseで受け取る

import { createContext, useContext } from 'react';

export type ConfirmOptions = {
  message: string;
  confirmLabel?: string;
};

type DialogApi = {
  showConfirm: (options: ConfirmOptions) => Promise<boolean>;
};

export const DialogContext = createContext<DialogApi | undefined>(undefined);

export const useDialog = () => {
  const context = useContext(DialogContext);
  if (context === undefined) {
    throw new Error('DialogProviderが必要です。');
  }
  return context;
};

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from 'react';
import { DialogContext, type ConfirmOptions } from './DialogContext';

export const DialogProvider = ({ children }: { children: ReactNode }) => {
  const [options, setOptions] = useState<ConfirmOptions | null>(null);
  const dialogRef = useRef<HTMLDialogElement>(null);
  const resolveRef = useRef<((value: boolean) => void) | null>(null);
  const mountedRef = useRef(false);
  const titleId = useId();
  const messageId = useId();

  useEffect(() => {
    mountedRef.current = true;

    return () => {
      mountedRef.current = false;
      const resolve = resolveRef.current;
      resolveRef.current = null;
      resolve?.(false);
    };
  }, []);

  const showConfirm = useCallback((nextOptions: ConfirmOptions) => {
    // 表示中の要求を上書きせず、追加の要求はキャンセル扱いにする。
    if (!mountedRef.current || resolveRef.current !== null) {
      return Promise.resolve(false);
    }

    return new Promise<boolean>((resolve) => {
      resolveRef.current = resolve;
      setOptions(nextOptions);
    });
  }, []);

  const close = useCallback((result: boolean) => {
    const resolve = resolveRef.current;
    if (resolve === null) return;

    resolveRef.current = null;
    dialogRef.current?.close();
    setOptions(null);
    resolve(result);
  }, []);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (dialog === null) return;

    if (options !== null && !dialog.open) {
      dialog.showModal();
    } else if (options === null && dialog.open) {
      dialog.close();
    }
  }, [options]);

  const value = useMemo(() => ({ showConfirm }), [showConfirm]);

  return (
    <DialogContext.Provider value={value}>
      {children}
      <dialog
        ref={dialogRef}
        aria-labelledby={titleId}
        aria-describedby={messageId}
        onCancel={(event) => {
          event.preventDefault();
          close(false);
        }}
      >
        <h2 id={titleId}>操作の確認</h2>
        <p id={messageId} style={{ whiteSpace: 'pre-line' }}>
          {options?.message}
        </p>
        <button type="button" autoFocus onClick={() => close(false)}>
          キャンセル
        </button>
        <button type="button" onClick={() => close(true)}>
          {options?.confirmLabel ?? '実行'}
        </button>
      </dialog>
    </DialogContext.Provider>
  );
};

import { useState } from 'react';
import { DialogProvider } from './DialogProvider';
import { useDialog } from './DialogContext';

const ShoppingList = () => {
  const { showConfirm } = useDialog();
  const [items, setItems] = useState(['りんご', '牛乳']);
  const [message, setMessage] = useState('');

  const handleDelete = async (name: string) => {
    const confirmed = await showConfirm({
      message: `「${name}」を一覧から削除しますか？`,
      confirmLabel: '削除',
    });

    if (!confirmed) return;

    setItems((current) => current.filter((item) => item !== name));
    setMessage(`「${name}」を削除しました。`);
  };

  return (
    <main>
      <h1>買い物リスト</h1>
      <ul>
        {items.map((item) => (
          <li key={item}>
            {item}
            <button type="button" onClick={() => void handleDelete(item)}>
              {item}を削除
            </button>
          </li>
        ))}
      </ul>
      <p role="status">{message}</p>
    </main>
  );
};

export default function App() {
  return (
    <DialogProvider>
      <ShoppingList />
    </DialogProvider>
  );
}