Provider para fornecer a funcionalidade de dialogo de confirmação globalmente em aplicações React

ConfirmDialog.tsx

import { faCheck, faTimes, faWarning } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Backdrop,
  styled,
} from '@mui/material';

interface IConfirmDialogProps {
  open: boolean;
  title: string;
  onCancel: () => void;
  onConfirm: () => void;
  children: React.ReactNode;
}

const CustomBackdrop = styled(Backdrop)({
  backgroundColor: 'rgba(0, 0, 0, 0.55)',
});

export default function ConfirmDialog({
  open,
  title,
  onCancel,
  onConfirm,
  children,
}: IConfirmDialogProps) {
  return (
    <Dialog
      open={open}
      BackdropComponent={CustomBackdrop}
      sx={{
        '& .MuiDialog-paper': {
          boxShadow: 'none',
        },
      }}
    >
      <DialogTitle>
        <Box display="inline-block" mr={1} color="warning.dark">
          <FontAwesomeIcon icon={faWarning} color="inherit" />
        </Box>
        {title}
      </DialogTitle>

      <DialogContent>{children}</DialogContent>

      <DialogActions sx={{ px: 3, py: 2 }}>
        <Button
          startIcon={<FontAwesomeIcon icon={faTimes} />}
          onClick={onCancel}
          sx={{ px: 2 }}
        >
          Cancelar
        </Button>

        <Button
          variant="outlined"
          startIcon={<FontAwesomeIcon icon={faCheck} />}
          onClick={onConfirm}
        >
          Prosseguir
        </Button>
      </DialogActions>
    </Dialog>
  );
}

example.tsx

const handleDeleteFolder = async (folderId: number | string) => {
  confirmDialog.showConfirmDialog({
    title: 'Confirmação',
    message: 'Confirmar exclusão da pasta?',
    onConfirm: async () => {
      await deleteFolder(folderId);
      queryClient.invalidateQueries(['pasta', id]);
      setDeleteFolderSuccess(true);
    },
  });
};

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <CssBaseline />
    <ConfirmDialogProvider>
      ...
    </ConfirmDialogProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

ProviderConfirmDialog.tsx

import React, {
  createContext,
  useContext,
  useMemo,
  useRef,
  useState,
} from 'react';
import ConfirmDialog from '../components/ConfirmDialog';

interface IShowConfirmDialogProps {
  title: string;
  message: string;
  onConfirm: () => void;
  onCancel?: () => void;
}

interface IConfirmDialogContext {
  showConfirmDialog: ({
    title,
    message,
    onConfirm,
    onCancel,
  }: IShowConfirmDialogProps) => void;
}

const DEFAULT_STATE: IConfirmDialogContext = {
  showConfirmDialog: () => null,
};

const ConfirmDialogContext =
  createContext<IConfirmDialogContext>(DEFAULT_STATE);

interface IConfirmDialogProviderProps {
  children: React.ReactNode;
}

export function ConfirmDialogProvider({
  children,
}: IConfirmDialogProviderProps) {
  const [show, setShow] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [dialogMessage, setDialogMessage] = useState('');

  const confirmFn = useRef<() => void>();
  const cancelFn = useRef<() => void>();

  const handleCancel = () => {
    if (cancelFn.current != null) {
      cancelFn.current();
    }

    setShow(false);
  };

  const handleConfirm = () => {
    if (confirmFn.current != null) {
      confirmFn.current();
    }

    setShow(false);
  };

  const showConfirmDialog = ({
    title,
    message,
    onConfirm,
    onCancel,
  }: IShowConfirmDialogProps) => {
    setDialogTitle(title);
    setDialogMessage(message);
    confirmFn.current = onConfirm;
    cancelFn.current = onCancel;

    setShow(true);
  };

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

  return (
    <ConfirmDialogContext.Provider value={value}>
      <ConfirmDialog
        onCancel={handleCancel}
        onConfirm={handleConfirm}
        open={show}
        title={dialogTitle}
      >
        {dialogMessage}
      </ConfirmDialog>

      {children}
    </ConfirmDialogContext.Provider>
  );
}

export function useConfirmDialog() {
  return useContext(ConfirmDialogContext);
}