diff --git a/src/modals/ConfirmModal.js b/src/modals/ConfirmModal.js
new file mode 100644
index 0000000..70c1402
--- /dev/null
+++ b/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 (
+
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+ConfirmModal.defaultProps = {
+ label: "Are you sure?",
+ description: "",
+ confirmText: "Yes",
+};
+
+export default ConfirmModal;
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index c61b256..c1329fa 100644
--- a/src/modals/SelectMapModal.js
+++ b/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))
}
/>
+ 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."
+ />
+ setIsMapsRemoveModalOpen(false)}
+ onConfirm={handleMapsRemove}
+ confirmText="Remove"
+ label={`Remove ${selectedMapIds.length} Map${
+ selectedMapIds.length > 1 ? "s" : ""
+ }`}
+ description="This operation cannot be undone."
+ />
);
}
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js
index 04066b3..08ee667 100644
--- a/src/modals/SelectTokensModal.js
+++ b/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))
}
/>
+ setIsTokensRemoveModalOpen(false)}
+ onConfirm={handleTokensRemove}
+ confirmText="Remove"
+ label={`Remove ${selectedTokenIds.length} Token${
+ selectedTokenIds.length > 1 ? "s" : ""
+ }`}
+ description="This operation cannot be undone."
+ />
);
}
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 19ba7dd..d1441de 100644
--- a/src/modals/SettingsModal.js
+++ b/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 }) {
- setIsDeleteModalOpen(false)}
- >
-
-
-
-
-
-
-
-
+ onConfirm={handleEraseAllData}
+ label="Erase All Content?"
+ description="This will remove all data including saved maps and tokens."
+ confirmText="Erase"
+ />
>
);
}