ConfirmDialog

[bnicholson]

I needed to add a confirmation dialog to enable us to confirm the deletion of items such as tournaments, divisions, rooms, rounds, quizzes, schedules or any other things. I tried to make the ConfirmDialogCompoent very general so that it could be used to confirm anything. Take a look and see if it can be improved.

[TheSecondPower]

It looks good. I haven't worked with material UI very much; it handles a lot of complex issues with dialogs (especially placing the dialog in a modal root element in the DOM so it appears over all other things and locking the focus so that keyboard users don't interact with the rest of the page) which is helpful.

I'd prefer being able to use ConfirmDialog using JSX syntax instead of as a function call.

<ConfirmDialog message={"Are you sure?"} />

I made some changes including fixing the import for the CloseIcon, adding an ARIA label for the close button, passing in a Props object instead of a string so that this can be called with JSX syntax, added props for title, cancel click, and confirm click, and changed the export to a named export instead of a default export. (I've found default exports to be prone to accidents and prefer named exports.)

I also changed the tab spacing to 2px because some other files use 2px tabs and because JSX nesting gets to be a bit much with 4px tabs.

import CloseIcon from '@mui/icons-material/Close';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import React from 'react';

interface Props {
  message: string;
  onCancel: React.MouseEventHandler<HTMLButtonElement>;
  onConfirm: React.MouseEventHandler<HTMLButtonElement>;
  title: string;
}

/**
 * This renders a confirmation dialog to confirm an action.
 */
export const ConfirmDialog = (props: Props) => {
  return (
    <Dialog open={true} maxWidth="sm" fullWidth>
      <DialogTitle>{props.title}</DialogTitle>
      <Box position="absolute" top={0} right={0}>
        <IconButton aria-label="Close">
          <CloseIcon />
        </IconButton>
      </Box>
      <DialogContent>
        <Typography>{props.message}</Typography>
      </DialogContent>
      <DialogActions>
        <Button color="primary" onClick={props.onCancel} variant="contained">
          Cancel
        </Button>
        <Button color="secondary" onClick={props.onConfirm} variant="contained">
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
};