confirmation dialog wrapper component/ confirm deleting row

src/components/Confirmation.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles, createStyles } from "@material-ui/core";
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      display: "flex",
+      flexWrap: "wrap",
+    },
+    dryWrapper: {},
+    dryField: {},
+  })
+);
+
+interface Props {
+  children: JSX.Element;
+  message?: {
+    title?: string;
+    customBody?: string;
+    body?: string;
+    cancel?: string;
+    confirm?: string | JSX.Element;
+  };
+  confirmationCommand?: string;
+}
+const Confirmation = (props: Props) => {
+  const { children, message, confirmationCommand } = props;
+  const classes = useStyles();
+  const [showDialog, setShowDialog] = useState(false);
+  const [dryText, setDryText] = useState("");
+
+  const handleClose = () => {
+    setShowDialog(false);
+  };
+
+  const confirmHandler = children.props.onClick;
+  const button = React.cloneElement(children, {
+    onClick: () => {
+      setShowDialog(true);
+    },
+  });
+
+  return (
+    <>
+      {button}
+      <Dialog open={showDialog} onClose={handleClose}>
+        <DialogTitle>
+          {(message && message.title) || "Are you sure?"}
+        </DialogTitle>
+        {message && (
+          <DialogContent>
+            {message.customBody}
+            {message.body && (
+              <DialogContentText>{message.body}</DialogContentText>
+            )}
+            {confirmationCommand && (
+              <div className={classes.dryWrapper}>
+                <DialogContentText>
+                  Type {confirmationCommand} below to continue:
+                </DialogContentText>
+                <TextField
+                  value={dryText}
+                  variant="filled"
+                  onChange={e => {
+                    setDryText(e.target.value);
+                  }}
+                  className={classes.dryField}
+                  InputProps={{ disableUnderline: true }}
+                  autoFocus
+                  margin="dense"
+                  label={confirmationCommand}
+                  fullWidth
+                />
+              </div>
+            )}
+          </DialogContent>
+        )}
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            {(message && message.cancel) || "Cancel"}
+          </Button>
+          <Button
+            onClick={() => {
+              confirmHandler();
+              handleClose();
+            }}
+            color="primary"
+            variant="contained"
+            autoFocus
+            disabled={
+              confirmationCommand ? dryText !== confirmationCommand : false
+            }
+          >
+            {(message && message.confirm) || "Confirm"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default Confirmation;

src/components/Table/index.tsx

@@ -29,6 +29,8 @@ import SettingsIcon from "@material-ui/icons/Settings";
 
 import useWindowSize from "../../hooks/useWindowSize";
 import { DraggableHeader } from "react-data-grid-addons";
+import Confirmation from "components/Confirmation";
+import DeleteIcon from "@material-ui/icons/Delete";
 const { DraggableContainer } = DraggableHeader;
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
@@ -156,8 +158,6 @@ function Table(props: Props) {
             >
               <SettingsIcon />
             </IconButton>
-            {/* <EditIcon /> */}
-            {/* </Button> */}
           </div>
         );
     }
@@ -189,18 +189,30 @@ function Table(props: Props) {
       width: 160,
       headerRenderer: headerRenderer,
       formatter: (props: any) => (
-        <Button
-          color="primary"
-          onClick={async () => {
-            props.row.ref.delete();
-            await deleteAlgoliaRecord({
-              id: props.row.ref.id,
-              collection: props.row.ref.parent.path,
-            });
+        <Confirmation
+          message={{
+            title: "Delete Row",
+            body: "Are you sure you want do delete this row",
+            confirm: (
+              <>
+                <DeleteIcon /> Delete
+              </>
+            ),
           }}
         >
-          Delete row
-        </Button>
+          <Button
+            color="primary"
+            onClick={async () => {
+              props.row.ref.delete();
+              await deleteAlgoliaRecord({
+                id: props.row.ref.id,
+                collection: props.row.ref.parent.path,
+              });
+            }}
+          >
+            Delete row
+          </Button>
+        </Confirmation>
       ),
     });
     const rows = tableState.rows;