From c0a69c0eb30f1c0f53977f7c506679236a3f0430 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sun, 3 Apr 2022 01:10:31 -0500 Subject: [PATCH] Updated documentation --- components/calender/Day.tsx | 4 ++- components/calender/modals/AddSticker.tsx | 32 ++++++------------- .../calender/modals/StickerSelector.tsx | 8 +++++ 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx index 7fcc09f..8b7ba03 100644 --- a/components/calender/Day.tsx +++ b/components/calender/Day.tsx @@ -61,12 +61,14 @@ const Day = ({ // This handles the modal for the day. const [isOpen, setIsOpen] = useState(false); + // The current sticker to be displayed on the current date. + // * This is temporary. There should be no need for this once persistent storage is used. This is being used as a workaround to a bug. const [stickerState, setStickerState] = useState(sticker); // The step the modal is at. const [step, setStep] = useState(0); - // The current selected sticker. + // The current selected sticker. (To be added or updated) const [selectedSticker, setSelectedSticker] = useState(null); /** diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx index 22b4f79..b8ba82a 100644 --- a/components/calender/modals/AddSticker.tsx +++ b/components/calender/modals/AddSticker.tsx @@ -13,7 +13,7 @@ import { SimpleGrid, Box } from "@chakra-ui/react"; -import React, { useState, useContext, Fragment } from "react"; +import React, { useState, useContext } from "react"; import { format, isSameDay } from "date-fns"; import { Icon } from "@iconify/react"; import { StickersContext } from "../../../contexts/StickerContext"; @@ -34,13 +34,14 @@ interface AddStickerProps { /** * Handles adding and modifying the stickers for the given month. - * @param {boolean} isOpen tells the component when the modal should be open. - * @param {React.Dispatch>} updateIsOpen used to close the modal. - * @param {date} date the date for which the sticker will be added or modified. - * @param {React.Dispatch>} updateSticker the react state function to update the sticker. - * @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>} updateStep used to navigate the pages of the modal by updating the step the modal is on. + * @param {boolean} isOpen Tells the component when the modal should be open. + * @param {React.Dispatch>} updateIsOpen Used to close the modal. + * @param {date} date The date for which the sticker will be added or modified. + * @param {React.Dispatch>} updateSticker The react state function to update the sticker. + * @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>} updateStep Used to navigate the pages of the modal by updating the step the modal is on. + * @param {React.Dispatch>} updateSticker The react state function to update the selected sticker that will be added or updated. */ const AddSticker = ({ isOpen, @@ -55,22 +56,12 @@ const AddSticker = ({ }: AddStickerProps): JSX.Element => { // TODO: Import the stickers array from the calender context. - // TODO: Add a function that will add or update the sticker for the current date. - - /** - * TODO: Add logic into the contents of the modal to show messages if the selected date is out of range. - * Show a message when a date in the future is selected. - * Show a message when a date before the current date is selected. - */ - const { addEditSticker } = useContext(StickersContext); const [modalVariant] = useState<"currDate" | "notCurrDate">( isSameDay(date, new Date()) ? "currDate" : "notCurrDate" ); - // ! Step is not setting back to 0 when modal is closet. Try to move out of this component and take it in as an arg. - const handleClose = () => { updateIsOpen(false); }; @@ -84,11 +75,6 @@ const AddSticker = ({ // * 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: 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: [ { diff --git a/components/calender/modals/StickerSelector.tsx b/components/calender/modals/StickerSelector.tsx index 0373835..200f9b0 100644 --- a/components/calender/modals/StickerSelector.tsx +++ b/components/calender/modals/StickerSelector.tsx @@ -9,6 +9,14 @@ interface StickerSelectorProps { updateSelectedSticker: React.Dispatch>; } +/** + * Handles displaying a list of dynamic stickers to be selected. + * @param {string} stickerSet The name of the stickers that should be displayed. + * @param {StickerVal} currSticker The current sticker for the date. + * @param {StickerVal} selectedSticker The selected sticker for the current. date + * @param {React.Dispatch>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated. + */ + const StickerSelector = ({ stickerSet, currSticker,