From fb531874383ae31f5c18f4deee76146967ef2b26 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sun, 27 Mar 2022 01:32:15 -0500 Subject: [PATCH] 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 | 14 +- components/calender/Day.tsx | 1 + components/calender/modals/AddSticker.tsx | 259 ++++++++++++++++------ pages/calendar/index.tsx | 4 +- 4 files changed, 201 insertions(+), 77 deletions(-) diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 2a346f5..0e259c4 100644 --- a/components/calender/DatePicker.tsx +++ b/components/calender/DatePicker.tsx @@ -24,8 +24,8 @@ import { Field, FieldProps } from "formik"; -import { format } from "date-fns" -import findValidDateRange from "../../lib/findValidDateRange" +import { format } from "date-fns"; +import findValidDateRange from "../../lib/findValidDateRange"; import FormValidateEmoji from "./FormValidateEmoji"; import { CalenderContext } from "../../contexts/CalenderContext"; @@ -220,13 +220,13 @@ const DatePicker = (): JSX.Element => { max={format(validDateRange.end, "yyyy-MM-dd")} {...(!form.errors.date && form.touched.date ? { - borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c", - _hover: { borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c" + boxShadow: "0 0 0 1px #00c17c", + _hover: { + borderColor: "brand.valid", + boxShadow: "0 0 0 1px #00c17c" + } } - } : "")} /> {!form.touched.date && ( diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx index 8a71e32..c36d5e4 100644 --- a/components/calender/Day.tsx +++ b/components/calender/Day.tsx @@ -156,6 +156,7 @@ const Day = ({ isOpen={isOpen} updateIsOpen={setIsOpen} updateSticker={setStickerState} + currSticker={stickerState} /> )} diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx index b835278..bdfb8e2 100644 --- a/components/calender/modals/AddSticker.tsx +++ b/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 { format } from "date-fns"; +import React, { Fragment, useState, useContext, useEffect } from "react"; +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>; date: Date; updateSticker: React.Dispatch>; + 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,95 +50,217 @@ const AddSticker = ({ const [selectedSticker, setSelectedSticker] = useState(null); + const [step, setStep] = useState(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. + const variants = { + currDate: [ + { + header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`, + body: ( + + + + + + ), + footer: ( + + ) + } + ], + notCurrDate: [ + { + header: `Which sticker did you want to update for ${format( + date, + "LLL d, y" + )}?`, + body: ( + + {"Filler"} + + ), + footer: ( + + ) + }, + { + header: `Are you sure you want to change the sticker for ${format( + date, + "M/d/y" + )}?`, + body: ( + + {"Filler"} + + ), + footer: ( + + + + + + + + ) + } + ] + }; + + // 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 ( - handleClose()} - motionPreset="slideInBottom" - scrollBehavior="inside" - size="lg" - > - - - - - {`Which sticker did you earn for ${format(date, "LLL d, y")}?`} - - - - - + {step !== null && ( + handleClose()} + motionPreset="slideInBottom" + scrollBehavior="inside" + size={modalVariant === "currDate" ? "xl" : "2xl"} + > + + + - - - + + {modalVariant && variants[modalVariant][step].header} + + - - - - - {/* */} - - - + + + {modalVariant && variants[modalVariant][step].body} + + + {modalVariant && variants[modalVariant][step].footer} + + + + )} ); }; diff --git a/pages/calendar/index.tsx b/pages/calendar/index.tsx index 7db5a70..ad0dc52 100644 --- a/pages/calendar/index.tsx +++ b/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;