Expanded the add stickers modal to include a confirmation screen when updating a sticker on a past day. Step state is not resetting on close.

components/calender/DatePicker.tsx

@@ -24,8 +24,8 @@ import {
   Field,
   FieldProps
 } from "formik";
-import { format } from "date-fns"
+import { format } from "date-fns";
-import findValidDateRange from "../../lib/findValidDateRange"
+import findValidDateRange from "../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
 import { CalenderContext } from "../../contexts/CalenderContext";
 

components/calender/Day.tsx

@@ -156,6 +156,7 @@ const Day = ({
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
                 updateSticker={setStickerState}
+                currSticker={stickerState}
               />
             )}
           </StickersContextProvider>

components/calender/modals/AddSticker.tsx

@@ -4,15 +4,14 @@ import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  ModalCloseButton,
   ModalBody,
   ModalFooter,
   Heading,
   HStack,
-  VStack
+  Text
 } from "@chakra-ui/react";
-import React, { Fragment, useState, useContext } from "react";
+import React, { Fragment, useState, useContext, useEffect } from "react";
-import { format } from "date-fns";
+import { format, isSameDay } from "date-fns";
 import DemoStickers from "../stickers/DemoStickers";
 import { StickersContext } from "../../../contexts/StickerContext";
 
@@ -21,6 +20,7 @@ interface AddStickerProps {
   updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   date: Date;
   updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  currSticker: StickerVal;
 }
 
 /**
@@ -35,7 +35,8 @@ const AddSticker = ({
   isOpen,
   updateIsOpen,
   date,
-  updateSticker
+  updateSticker,
+  currSticker
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -49,56 +50,54 @@ const AddSticker = ({
 
   const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
 
+  const [step, setStep] = useState<number | null>(null);
+
   const { addEditSticker } = useContext(StickersContext);
 
+  const [modalVariant] = useState<"currDate" | "notCurrDate">(
+    isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
+  );
+
   const handleClose = () => {
     setSelectedSticker(null);
+    setStep(null);
     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.
   const handleSubmit = (sticker) => {
     const newSticker: Sticker = addEditSticker(date, sticker);
     updateSticker(newSticker.sticker);
     handleClose();
   };
 
-  // TODO: Invalidate submit button if the selected sticker is the same as the current sticker.
+  // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
   // TODO: Display the current sticker above the selection screen if a current sticker exists.
 
-  // TODO: Invalidate the button for the current sticker and gray it out.
-
   // TODO: Trigger a warning if the date is in the past showing the sticker change.
   // ! DO NOT update the sticker state or trigger the edd/edit function until that new warning is accepted.
 
-  return (
+  const variants = {
-    <Fragment>
+    currDate: [
-      <Modal
+      {
-        isCentered
+        header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
-        isOpen={isOpen}
+        body: (
-        onClose={() => handleClose()}
-        motionPreset="slideInBottom"
-        scrollBehavior="inside"
-        size="lg"
-      >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>
-            <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
-              {`Which sticker did you earn for ${format(date, "LLL d, y")}?`}
-            </Heading>
-          </ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <VStack>
           <HStack
             w="100%"
             h="auto"
-                justifyContent="center"
+            justifyContent={"center"}
-                alignContent="center"
+            alignContent={"center"}
-                spacing={6}
+            spacing={14}
           >
             <Button
+              isDisabled={currSticker >= 1}
               border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
               bg={selectedSticker === 1 && "gray.800"}
               onClick={() => setSelectedSticker(1)}
@@ -107,6 +106,7 @@ const AddSticker = ({
               <DemoStickers stickerVal={1} />
             </Button>
             <Button
+              isDisabled={currSticker === 0}
               border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
               bg={selectedSticker === 0 && "gray.800"}
               onClick={() => setSelectedSticker(0)}
@@ -115,6 +115,7 @@ const AddSticker = ({
               <DemoStickers stickerVal={0} />
             </Button>
             <Button
+              isDisabled={currSticker <= -1}
               border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
               bg={selectedSticker === -1 && "gray.800"}
               onClick={() => setSelectedSticker(-1)}
@@ -123,21 +124,143 @@ const AddSticker = ({
               <DemoStickers stickerVal={-1} />
             </Button>
           </HStack>
-            </VStack>
+        ),
-          </ModalBody>
+        footer: (
-          <ModalFooter>
           <Button
-              variant="primary"
+            variant="submit"
-              isDisabled={selectedSticker === null}
+            isDisabled={
-              // mr={3}
+              selectedSticker === null || selectedSticker === currSticker
+            }
             onClick={() => handleSubmit(selectedSticker)}
           >
             {"Submit"}
           </Button>
-            {/* <Button variant="ghost">Secondary Action</Button> */}
+        )
+      }
+    ],
+    notCurrDate: [
+      {
+        header: `Which sticker did you want to update for ${format(
+          date,
+          "LLL d, y"
+        )}?`,
+        body: (
+          <Text
+            w="100%"
+            h="auto "
+            fontSize={"3xl"}
+            textAlign={"center"}
+            fontWeight={"bold"}
+          >
+            {"Filler"}
+          </Text>
+        ),
+        footer: (
+          <Button
+            variant="primary"
+            // isDisabled={
+            //   selectedSticker === null || selectedSticker === currSticker
+            // }
+            onClick={() => setStep(step + 1)}
+          >
+            {"Next"}
+          </Button>
+        )
+      },
+      {
+        header: `Are you sure you want to change the sticker for ${format(
+          date,
+          "M/d/y"
+        )}?`,
+        body: (
+          <Text
+            w="100%"
+            h="auto "
+            fontSize={"3xl"}
+            textAlign={"center"}
+            fontWeight={"bold"}
+          >
+            {"Filler"}
+          </Text>
+        ),
+        footer: (
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent={"space-between"}
+            alignContent={"center"}
+          >
+            <Button variant="primary" onClick={() => setStep(step - 1)}>
+              {"Previous"}
+            </Button>
+            <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
+              <Button
+                variant="submit"
+                // isDisabled={
+                //   selectedSticker === null || selectedSticker === currSticker
+                // }
+                // onClick={() => handleSubmit(selectedSticker)}
+              >
+                {"Confirm"}
+              </Button>
+              <Button
+                backgroundColor="transparent"
+                _hover={{ backgroundColor: "brand.danger" }}
+                onClick={() => updateIsOpen(!isOpen)}
+              >
+                {"Cancel"}
+              </Button>
+            </HStack>
+          </HStack>
+        )
+      }
+    ]
+  };
+
+  // const JSX = <></>;
+  // const example = {
+  //   currDate: [{ header: JSX, body: JSX, footer: JSX }],
+  //   notCurrDate: [
+  //     { header: JSX, body: JSX, footer: JSX },
+  //     { header: JSX, body: JSX, footer: JSX }
+  //   ]
+  // };
+
+  return (
+    <Fragment>
+      {step !== null && (
+        <Modal
+          isCentered
+          isOpen={isOpen}
+          onClose={() => handleClose()}
+          motionPreset="slideInBottom"
+          scrollBehavior="inside"
+          size={modalVariant === "currDate" ? "xl" : "2xl"}
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>
+              <HStack
+                w="100%"
+                h="auto"
+                justifyContent={"space-between"}
+                alignContent={"center"}
+              >
+                <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
+                  {modalVariant && variants[modalVariant][step].header}
+                </Heading>
+                <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
+              </HStack>
+            </ModalHeader>
+            <ModalBody>
+              {modalVariant && variants[modalVariant][step].body}
+            </ModalBody>
+            <ModalFooter>
+              {modalVariant && variants[modalVariant][step].footer}
             </ModalFooter>
           </ModalContent>
         </Modal>
+      )}
     </Fragment>
   );
 };

pages/calendar/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import { Box, Heading } from "@chakra-ui/react";
 
-const DateRoute = () => {
+const DateIndex = () => {
   const router = useRouter();
 
   useEffect(() => {
@@ -20,4 +20,4 @@ const DateRoute = () => {
   );
 };
 
-export default DateRoute;
+export default DateIndex;