Updated documentation
This commit is contained in:
@@ -61,12 +61,14 @@ const Day = ({
|
||||
// This handles the modal for the day.
|
||||
const [isOpen, setIsOpen] = useState<boolean>(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<StickerVal>(sticker);
|
||||
|
||||
// The step the modal is at.
|
||||
const [step, setStep] = useState<number>(0);
|
||||
|
||||
// The current selected sticker.
|
||||
// The current selected sticker. (To be added or updated)
|
||||
const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
|
||||
|
||||
/**
|
||||
|
||||
@@ -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<React.SetStateAction<boolean>>} updateIsOpen used to close the modal.
|
||||
* @param {date} 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 {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.
|
||||
* @param {boolean} isOpen Tells the component when the modal should be open.
|
||||
* @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
|
||||
* @param {date} 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 {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.
|
||||
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} 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: [
|
||||
{
|
||||
|
||||
@@ -9,6 +9,14 @@ interface StickerSelectorProps {
|
||||
updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
|
||||
*/
|
||||
|
||||
const StickerSelector = ({
|
||||
stickerSet,
|
||||
currSticker,
|
||||
|
||||
Reference in New Issue
Block a user