wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Modal step/page resets to 0 when re-opened.

Browse Source
This commit is contained in:
Lucid Kobold
2022-03-28 13:56:43 -05:00
parent 93de5cd16d
commit 5abad3a40a
2 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/calender/Day.tsx
View File

@@ -58,11 +58,14 @@ const Day = ({
} }
}; };
// This handles the modal for this date. // This handles the modal for the day.
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
const [stickerState, setStickerState] = useState<StickerVal>(sticker); const [stickerState, setStickerState] = useState<StickerVal>(sticker);
// The step the modal is at.
const [step, setStep] = useState<number>(0);
/** /**
* TODO: Add logic to remove the onClick within overflow dates. * TODO: Add logic to remove the onClick within overflow dates.
* Do not give dates for the next month an onClick. * Do not give dates for the next month an onClick.
@@ -114,7 +117,10 @@ const Day = ({
border="1px solid #0068ff" border="1px solid #0068ff"
w="100%" w="100%"
h="100%" h="100%"
onClick={() => setIsOpen(true)} onClick={() => {
setStep(0);
setIsOpen(true);
}}
alignContent="center" alignContent="center"
justifyContent="flex-start" justifyContent="flex-start"
pt={2} pt={2}
@@ -157,6 +163,8 @@ const Day = ({
updateIsOpen={setIsOpen} updateIsOpen={setIsOpen}
updateSticker={setStickerState} updateSticker={setStickerState}
currSticker={stickerState} currSticker={stickerState}
step={step}
updateStep={setStep}
/> />
)} )}
</StickersContextProvider> </StickersContextProvider>

98
components/calender/modals/AddSticker.tsx
View File

@@ -10,7 +10,7 @@ import {
HStack, HStack,
Text Text
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import React, { Fragment, useState, useContext, useEffect } from "react"; import React, { useState, useContext } from "react";
import { format, isSameDay } from "date-fns"; import { format, isSameDay } from "date-fns";
import DemoStickers from "../stickers/DemoStickers"; import DemoStickers from "../stickers/DemoStickers";
import { StickersContext } from "../../../contexts/StickerContext"; import { StickersContext } from "../../../contexts/StickerContext";
@@ -21,23 +21,28 @@ interface AddStickerProps {
date: Date; date: Date;
updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>; updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
currSticker: StickerVal; currSticker: StickerVal;
step: number;
updateStep: React.Dispatch<React.SetStateAction<number>>;
} }
/** /**
* Handles adding and modifying the stickers for the given month. * Handles adding and modifying the stickers for the given month.
* @param props the props for this component. * @param {boolean} isOpen tells the component when the modal should be open.
* @param {boolean} props.isOpen tells the component when the modal should be open. * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen used to close the modal.
* @param {React.Dispatch<React.SetStateAction<boolean>>} props.updateIsOpen used to close the modal. * @param {date} date the date for which the sticker will be added or modified.
* @param {date} props.date the date for which the sticker will be added or modified.
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker the react state function to update the sticker. * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker the react state function to update the sticker.
* @param {StickerVal}currSticker the current sticker for the date. * @param {StickerVal} currSticker the current sticker for the date.
* @param {number} step a numerical variable that represents the page the modal should be at.
* @param {React.Dispatch<React.SetStateAction<number>>} updateStep used to navigate the pages of the modal by updating the step the modal is on.
*/ */
const AddSticker = ({ const AddSticker = ({
isOpen, isOpen,
updateIsOpen, updateIsOpen,
date, date,
updateSticker, updateSticker,
currSticker currSticker,
step,
updateStep
}: AddStickerProps): JSX.Element => { }: AddStickerProps): JSX.Element => {
// TODO: Import the stickers array from the calender context. // TODO: Import the stickers array from the calender context.
@@ -51,8 +56,6 @@ const AddSticker = ({
const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null); const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
const [step, setStep] = useState<number | null>(null);
const { addEditSticker } = useContext(StickersContext); const { addEditSticker } = useContext(StickersContext);
const [modalVariant] = useState<"currDate" | "notCurrDate">( const [modalVariant] = useState<"currDate" | "notCurrDate">(
@@ -63,16 +66,9 @@ const AddSticker = ({
const handleClose = () => { const handleClose = () => {
setSelectedSticker(null); setSelectedSticker(null);
setStep(null);
updateIsOpen(false); updateIsOpen(false);
}; };
useEffect(() => {
if (step === null) {
setStep(0);
}
}, [step]);
// TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted. // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
const handleSubmit = (sticker) => { const handleSubmit = (sticker) => {
const newSticker: Sticker = addEditSticker(date, sticker); const newSticker: Sticker = addEditSticker(date, sticker);
@@ -164,7 +160,7 @@ const AddSticker = ({
// isDisabled={ // isDisabled={
// selectedSticker === null || selectedSticker === currSticker // selectedSticker === null || selectedSticker === currSticker
// } // }
onClick={() => setStep(step + 1)} onClick={() => updateStep(step + 1)}
> >
{"Next"} {"Next"}
</Button> </Button>
@@ -193,7 +189,7 @@ const AddSticker = ({
justifyContent={"space-between"} justifyContent={"space-between"}
alignContent={"center"} alignContent={"center"}
> >
<Button variant="primary" onClick={() => setStep(step - 1)}> <Button variant="primary" onClick={() => updateStep(step - 1)}>
{"Previous"} {"Previous"}
</Button> </Button>
<HStack w="auto" h="auto" alignContent={"center"} spacing={6}> <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
@@ -230,41 +226,37 @@ const AddSticker = ({
// }; // };
return ( return (
<Fragment> <Modal
{step !== null && ( isCentered
<Modal isOpen={isOpen}
isCentered onClose={() => handleClose()}
isOpen={isOpen} motionPreset="slideInBottom"
onClose={() => handleClose()} scrollBehavior="inside"
motionPreset="slideInBottom" size={modalVariant === "currDate" ? "xl" : "2xl"}
scrollBehavior="inside" >
size={modalVariant === "currDate" ? "xl" : "2xl"} <ModalOverlay />
> <ModalContent>
<ModalOverlay /> <ModalHeader>
<ModalContent> <HStack
<ModalHeader> w="100%"
<HStack h="auto"
w="100%" justifyContent={"space-between"}
h="auto" alignContent={"center"}
justifyContent={"space-between"} >
alignContent={"center"} <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
> {modalVariant && variants[modalVariant][step].header}
<Heading textAlign="center" as="h2" size="md" w="100%" h="auto"> </Heading>
{modalVariant && variants[modalVariant][step].header} <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
</Heading> </HStack>
<Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button> </ModalHeader>
</HStack> <ModalBody>
</ModalHeader> {modalVariant && variants[modalVariant][step].body}
<ModalBody> </ModalBody>
{modalVariant && variants[modalVariant][step].body} <ModalFooter>
</ModalBody> {modalVariant && variants[modalVariant][step].footer}
<ModalFooter> </ModalFooter>
{modalVariant && variants[modalVariant][step].footer} </ModalContent>
</ModalFooter> </Modal>
</ModalContent>
</Modal>
)}
</Fragment>
); );
}; };