chakra-alert-manager

manager.tsx

import { useDisclosure } from "@chakra-ui/react";
import ConfirmDialog from "app/core/chakra-prompts/ConfirmDialog";
import FormPrompt from "app/core/chakra-prompts/FormPrompt";
import React, { useContext, useState } from "react";

const ChakraPromptsContext = React.createContext<any>(null);
export const useChakraPrompts = () => useContext(ChakraPromptsContext);

const Manager = ({ children }) => {
  const [config, setConfig] = useState<any>({});
  const promptDisclosure = useDisclosure();
  const confirmDisclosure = useDisclosure();

  const closeAllPopups = () => {
    promptDisclosure.onClose();
    confirmDisclosure.onClose();
  };
  const submitPrompt = (results) => {
    config.res?.(results);
    closeAllPopups();
  };

  const close = () => {
    config.res?.();
    closeAllPopups();
  };

  const prompt = (config) =>
    new Promise((res) => {
      setConfig({ ...config, res });
      promptDisclosure.onOpen();
    });

  const confirm = (config) =>
    new Promise((res) => {
      setConfig({ ...config, res });
      confirmDisclosure.onOpen();
    });

  return (
    <ChakraPromptsContext.Provider value={{ prompt, confirm }}>
      {children}
      <FormPrompt
        close={close}
        submit={submitPrompt}
        disclosure={promptDisclosure}
        config={config}
      />
      <ConfirmDialog
        submit={submitPrompt}
        close={close}
        config={config}
        disclosure={confirmDisclosure}
      />
    </ChakraPromptsContext.Provider>
  );
};

export default Manager;