refactor: Added confirmation dialog template

michaelkoelle · May 14, 2021 · 3f4d2be · 3f4d2be
1 parent 5839b77
commit 3f4d2be
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 13 deletions.
diff --git a/app/components/SettingsDialog.tsx b/app/components/SettingsDialog.tsx
@@ -33,19 +33,8 @@ import {
 } from '../model/SettingsSlice';
 import { Theme } from '../model/Theme';
 import { ModalProps, useModal } from '../dialogs/ModalProvider';
+import ConfirmationDialog from '../dialogs/ConfirmationDialog';
 
-type SDProps = DialogProps & {
-  title: string;
-};
-
-const SimpleDialog: React.FC<SDProps> = ({ title, ...props }) => (
-  <Dialog {...props}>
-    <DialogTitle>{title}</DialogTitle>
-    <DialogActions>
-      <Button onClick={() => (props as ModalProps).close()}> Close </Button>
-    </DialogActions>
-  </Dialog>
-);
 interface SettingsDialogProps {
   open: boolean;
   handleClose: () => void;
@@ -73,7 +62,13 @@ export default function SettingsDialog(props: SettingsDialogProps) {
       <DialogContent dividers>
         <Button
           onClick={() => {
-            modal(SimpleDialog, { title: 'TEST DIALOG' });
+            modal(ConfirmationDialog, {
+              title: 'TEST DIALOG',
+              text: 'hi this is a test dialog',
+              onConfirm: () => {
+                console.log('YEY!');
+              },
+            });
           }}
         >
           Test

diff --git a/app/dialogs/ConfirmationDialog.tsx b/app/dialogs/ConfirmationDialog.tsx
@@ -0,0 +1,72 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogProps,
+  DialogTitle,
+} from '@material-ui/core';
+import React, { FC } from 'react';
+
+import { ModalProps } from './ModalProvider';
+
+type ConfimationDialogProps = DialogProps & {
+  title: string;
+  text: string;
+  onConfirm: () => unknown;
+  onReject?: () => unknown;
+  onCancel?: undefined | (() => unknown);
+};
+
+const ConfirmationDialog: FC<ConfimationDialogProps> = ({
+  title,
+  text,
+  onConfirm,
+  onReject,
+  onCancel,
+  ...props
+}) => (
+  <Dialog disableBackdropClick aria-labelledby="confirm-dialog" {...props}>
+    <DialogTitle id="confirm-dialog">{title}</DialogTitle>
+    <DialogContent>
+      <DialogContentText>{text}</DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button
+        onClick={() => {
+          (props as ModalProps).close();
+          onConfirm();
+        }}
+        color="primary"
+        autoFocus
+      >
+        Yes
+      </Button>
+      <Button
+        onClick={() => {
+          (props as ModalProps).close();
+          if (onReject) onReject();
+        }}
+        color="primary"
+      >
+        No
+      </Button>
+      {onCancel && (
+        <Button
+          onClick={() => {
+            (props as ModalProps).close();
+            onCancel();
+          }}
+          color="default"
+        >
+          Cancel
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+export default ConfirmationDialog;