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>
    );
}