Added confirm modal and added confirmation for deleting and resetting maps and tokens

src/modals/ConfirmModal.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Box, Label, Flex, Button, Text } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+function ConfirmModal({
+  isOpen,
+  onRequestClose,
+  onConfirm,
+  confirmText,
+  label,
+  description,
+}) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ maxWidth: "300px" }}
+    >
+      <Box>
+        <Label py={2}>{label}</Label>
+        {description && (
+          <Text as="p" mb={2} variant="caption">
+            {description}
+          </Text>
+        )}
+        <Flex py={2}>
+          <Button sx={{ flexGrow: 1 }} m={1} ml={0} onClick={onRequestClose}>
+            Cancel
+          </Button>
+          <Button sx={{ flexGrow: 1 }} m={1} mr={0} onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        </Flex>
+      </Box>
+    </Modal>
+  );
+}
+
+ConfirmModal.defaultProps = {
+  label: "Are you sure?",
+  description: "",
+  confirmText: "Yes",
+};
+
+export default ConfirmModal;

src/modals/SelectMapModal.js

@@ -5,6 +5,7 @@ import Case from "case";
 
 import EditMapModal from "./EditMapModal";
 import EditGroupModal from "./EditGroupModal";
+import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import MapTiles from "../components/map/MapTiles";
@@ -224,7 +225,9 @@ function SelectMapModal({
     setSelectedMapIds([map.id]);
   }
 
+  const [isMapsRemoveModalOpen, setIsMapsRemoveModalOpen] = useState(false);
   async function handleMapsRemove() {
+    setIsMapsRemoveModalOpen(false);
     await removeMaps(selectedMapIds);
     setSelectedMapIds([]);
     // Removed the map from the map screen if needed
@@ -233,7 +236,9 @@ function SelectMapModal({
     }
   }
 
+  const [isMapsResetModalOpen, setIsMapsResetModalOpen] = useState(false);
   async function handleMapsReset() {
+    setIsMapsResetModalOpen(false);
     for (let id of selectedMapIds) {
       const newState = await resetMap(id);
       // Reset the state of the current map if needed
@@ -349,8 +354,8 @@ function SelectMapModal({
             groups={mapGroups}
             onMapAdd={openImageDialog}
             onMapEdit={() => setIsEditModalOpen(true)}
-            onMapsReset={handleMapsReset}
-            onMapsRemove={handleMapsRemove}
+            onMapsReset={() => setIsMapsResetModalOpen(true)}
+            onMapsRemove={() => setIsMapsRemoveModalOpen(true)}
             selectedMaps={selectedMaps}
             selectedMapStates={selectedMapStates}
             onMapSelect={handleMapSelect}
@@ -393,6 +398,26 @@ function SelectMapModal({
             .reduce((prev, curr) => (prev === curr ? curr : undefined))
         }
       />
+      <ConfirmModal
+        isOpen={isMapsResetModalOpen}
+        onRequestClose={() => setIsMapsResetModalOpen(false)}
+        onConfirm={handleMapsReset}
+        confirmText="Reset"
+        label={`Reset ${selectedMapIds.length} Map${
+          selectedMapIds.length > 1 ? "s" : ""
+        }`}
+        description="This will remove all fog, drawings and tokens from the selected maps."
+      />
+      <ConfirmModal
+        isOpen={isMapsRemoveModalOpen}
+        onRequestClose={() => setIsMapsRemoveModalOpen(false)}
+        onConfirm={handleMapsRemove}
+        confirmText="Remove"
+        label={`Remove ${selectedMapIds.length} Map${
+          selectedMapIds.length > 1 ? "s" : ""
+        }`}
+        description="This operation cannot be undone."
+      />
     </Modal>
   );
 }

src/modals/SelectTokensModal.js

@@ -5,6 +5,7 @@ import Case from "case";
 
 import EditTokenModal from "./EditTokenModal";
 import EditGroupModal from "./EditGroupModal";
+import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import ImageDrop from "../components/ImageDrop";
@@ -131,7 +132,9 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     setSelectedTokenIds([token.id]);
   }
 
+  const [isTokensRemoveModalOpen, setIsTokensRemoveModalOpen] = useState(false);
   async function handleTokensRemove() {
+    setIsTokensRemoveModalOpen(false);
     await removeTokens(selectedTokenIds);
     setSelectedTokenIds([]);
   }
@@ -223,7 +226,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
             groups={tokenGroups}
             onTokenAdd={openImageDialog}
             onTokenEdit={() => setIsEditModalOpen(true)}
-            onTokensRemove={handleTokensRemove}
+            onTokensRemove={() => setIsTokensRemoveModalOpen(true)}
             selectedTokens={selectedTokens}
             onTokenSelect={handleTokenSelect}
             selectMode={selectMode}
@@ -262,6 +265,16 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
             .reduce((prev, curr) => (prev === curr ? curr : undefined))
         }
       />
+      <ConfirmModal
+        isOpen={isTokensRemoveModalOpen}
+        onRequestClose={() => setIsTokensRemoveModalOpen(false)}
+        onConfirm={handleTokensRemove}
+        confirmText="Remove"
+        label={`Remove ${selectedTokenIds.length} Token${
+          selectedTokenIds.length > 1 ? "s" : ""
+        }`}
+        description="This operation cannot be undone."
+      />
     </Modal>
   );
 }

src/modals/SettingsModal.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext } from "react";
 import {
-  Box,
   Label,
   Flex,
   Button,
@@ -17,6 +16,8 @@ import DatabaseContext from "../contexts/DatabaseContext";
 
 import useSetting from "../helpers/useSetting";
 
+import ConfirmModal from "./ConfirmModal";
+
 function SettingsModal({ isOpen, onRequestClose }) {
   const { database } = useContext(DatabaseContext);
   const { userId } = useContext(AuthContext);
@@ -103,26 +104,14 @@ function SettingsModal({ isOpen, onRequestClose }) {
           </Flex>
         </Flex>
       </Modal>
-      <Modal
+      <ConfirmModal
         isOpen={isDeleteModalOpen}
         onRequestClose={() => setIsDeleteModalOpen(false)}
-      >
-        <Box>
-          <Label py={2}>Are you sure?</Label>
-          <Flex py={2}>
-            <Button
-              sx={{ flexGrow: 1 }}
-              m={1}
-              onClick={() => setIsDeleteModalOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button m={1} sx={{ flexGrow: 1 }} onClick={handleEraseAllData}>
-              Erase
-            </Button>
-          </Flex>
-        </Box>
-      </Modal>
+        onConfirm={handleEraseAllData}
+        label="Erase All Content?"
+        description="This will remove all data including saved maps and tokens."
+        confirmText="Erase"
+      />
     </>
   );
 }