Async Prompt

useAsyncDialog.tsx

import React, { useState, useRef, useCallback } from "react";
import CustomModal from "../component/CustomModal";

type Resolver = ((value?: unknown) => void) | null;
type Rejecter = ((reason?: any) => void) | null;

const useAsyncDialog = ({
  title,
  paragraph,
  confirm,
  cancel
}: {
  title: string;
  paragraph: string;
  confirm: string;
  cancel: string;
}) => {
  const [show, setShow] = useState<boolean>(false);

  const resolver = useRef<Resolver | null>(null);
  const rejecter = useRef<Rejecter | null>(null);

  const dialog = () =>
    new Promise((res) => {
      setShow(true);
      resolver.current = function () {
        resolver.current = null;
        setShow(false);
        res(true);
      };
      rejecter.current = function () {
        rejecter.current = null;
        setShow(false);
        res(false);
      };
    });

  const AsyncPrompt = useCallback<React.FC>(
    () => (
      <CustomModal
        show={show}
        handleClose={() => rejecter.current?.()}
        handleConfirm={() => resolver.current?.()}
        title={title}
        paragraph={paragraph}
        confirm={confirm}
        cancel={cancel}
      />
    ),
    [title, paragraph, confirm, cancel, show]
  );

  return { dialog, AsyncPrompt };
};

export default useAsyncDialog;