Added confirm modal and added confirmation for deleting and resetting maps and tokens
This commit is contained in:
parent
f7ba35ec29
commit
8d85f6e347
46
src/modals/ConfirmModal.js
Normal file
46
src/modals/ConfirmModal.js
Normal file
@ -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;
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user