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" + /> ); }