From dff09977f9a9639440f57423d76d60b68c7be41d Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Tue, 14 Jun 2022 17:38:40 -0500 Subject: [PATCH] Rename type definition files. Update documentation. Update date-fn functions being used. --- lib/populateMonth.ts | 4 +--- src/components/calender/Day.tsx | 22 ++++++++++--------- src/components/calender/index.tsx | 2 +- .../calender/modals/AddUpdateSticker.tsx | 22 ++++++++++--------- .../calender/modals/StickerSelector.tsx | 1 + src/features/calender/stickers.ts | 9 ++++---- types/{CalenderContext.d.ts => Calender.d.ts} | 0 types/{StickerContext.d.ts => Stickers.d.ts} | 6 +++++ 8 files changed, 37 insertions(+), 29 deletions(-) rename types/{CalenderContext.d.ts => Calender.d.ts} (100%) rename types/{StickerContext.d.ts => Stickers.d.ts} (76%) diff --git a/lib/populateMonth.ts b/lib/populateMonth.ts index 84a442f..c78984a 100644 --- a/lib/populateMonth.ts +++ b/lib/populateMonth.ts @@ -1,11 +1,9 @@ import { getDate, endOfMonth, - sub, format, startOfMonth, set, - add, isAfter, isBefore, subMonths, @@ -73,7 +71,7 @@ const isOverflow = ( * @returns The month layout object for the provided month. */ const populateMonth = (selectedDate: Date): MonthLayout => { - const endLastMonth = getDate(endOfMonth(sub(selectedDate, { months: 1 }))); + const endLastMonth = getDate(endOfMonth(subMonths(selectedDate, 1))); const startOfSelectedMonth = format(startOfMonth(selectedDate), "iii"); const ISOToIndex = { diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 8d9239e..ad5336d 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -18,7 +18,7 @@ import { store } from "../../app/store"; interface DayProps { isOverflow?: boolean; overflowDirection?: "next" | "prev" | null; - sticker: StickerVal; + currSticker: StickerVal; date: string; selectedDate: string; currDate: Date; @@ -29,14 +29,16 @@ interface DayProps { * The individual days in the calender component. * @param {boolean} isOverflow is the current date being given before or after the current month. * @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month. - * @param {StickerVal} sticker the sticker for this date. - * @param {date} string the date for this day. + * @param {StickerVal} currSticker the sticker for this date. + * @param {date} date the date for this day. * @param {date} selectedDate the date for the selected month. + * @param {Date} currDate today's date. + * @param {boolean} isToday is the current iteration of this component in today's date. */ const Day = ({ isOverflow, overflowDirection, - sticker, + currSticker, date, selectedDate, currDate, @@ -108,8 +110,8 @@ const Day = ({ {`${getDate(currDateObj)}`} - - + + )} @@ -150,16 +152,16 @@ const Day = ({ > {`${getDate(currDateObj)}`} - - + + {isBefore(currDateObj, endOfDay(currDate)) && ( { >; - date: string; + stickerDate: string; currSticker: StickerVal; step: number; updateStep: React.Dispatch>; @@ -37,16 +37,18 @@ 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} string The date for which the sticker will be added or modified. + * @param {date} stickerDate The date for which the sticker will be added or modified. * @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. + * @param {StickerVal} selectedSticker the value of the selected sticker. + * @param {React.Dispatch>} updateSelectedSticker The react state function to update the selected sticker that will be added or updated. + * @param {Date} currDate the current date. */ const AddUpdateSticker = ({ isOpen, updateIsOpen, - date, + stickerDate, currSticker, step, updateStep, @@ -55,10 +57,10 @@ const AddUpdateSticker = ({ currDate }: AddStickerProps): JSX.Element => { const dispatch = useAppDispatch(); - const currDateObj = new Date(date); + const stickerDateObj = new Date(stickerDate); const [modalVariant] = useState<"add" | "edit">( - isSameDay(currDateObj, currDate) ? "add" : "edit" + isSameDay(stickerDateObj, currDate) ? "add" : "edit" ); const handleClose = () => { @@ -67,7 +69,7 @@ const AddUpdateSticker = ({ // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted. const handleSubmit = (sticker: StickerVal) => { - dispatch(addEditSticker({ date, sticker })); + dispatch(addEditSticker({ stickerDate, sticker })); handleClose(); }; @@ -80,7 +82,7 @@ const AddUpdateSticker = ({ add: [ { header: `Which sticker did you earn for ${format( - currDateObj, + stickerDateObj, "LLL d, y" )}?`, body: ( @@ -119,7 +121,7 @@ const AddUpdateSticker = ({ edit: [ { header: `Which sticker did you want to update for ${format( - currDateObj, + stickerDateObj, "LLL d, y" )}?`, body: ( @@ -161,7 +163,7 @@ const AddUpdateSticker = ({ }, { header: `Are you sure you want to change the sticker for ${format( - currDateObj, + stickerDateObj, "M/d/y" )}?`, body: ( diff --git a/src/components/calender/modals/StickerSelector.tsx b/src/components/calender/modals/StickerSelector.tsx index e2eba7b..63b5199 100644 --- a/src/components/calender/modals/StickerSelector.tsx +++ b/src/components/calender/modals/StickerSelector.tsx @@ -16,6 +16,7 @@ interface StickerSelectorProps { * @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. + * @param {React.MutableRefObject} initialSticker the sticker that should have be in focus when the modal opens. */ const StickerSelector = ({ diff --git a/src/features/calender/stickers.ts b/src/features/calender/stickers.ts index f4d9b5f..7e2c05a 100644 --- a/src/features/calender/stickers.ts +++ b/src/features/calender/stickers.ts @@ -7,7 +7,7 @@ interface StickersSlice { } interface UpdateStickerSlicePayload { - date: string; + stickerDate: string; sticker: StickerVal; } @@ -23,14 +23,13 @@ const stickersSlice = createSlice({ state: StickersSlice, actions: PayloadAction ) { - const { date, sticker } = actions.payload; + const { stickerDate, sticker } = actions.payload; - const dateObj = new Date(date); + const dateObj = new Date(stickerDate); // Getting index for the stickers array, sticker from the stickers array, and the date from the sticker. const index: number = getDate(dateObj) - 1; const currSticker: Sticker = state.stickersMonth[index]; - const { date: stickerDate } = currSticker; // Updating the edited status by checking if the sticker date is today's date. const edited = currSticker.edited @@ -48,7 +47,7 @@ const stickersSlice = createSlice({ // Updating the information of the sticker. const newSticker: Sticker = { id: id, - date: date, + date: stickerDate, sticker: sticker, edited: edited, manual: false diff --git a/types/CalenderContext.d.ts b/types/Calender.d.ts similarity index 100% rename from types/CalenderContext.d.ts rename to types/Calender.d.ts diff --git a/types/StickerContext.d.ts b/types/Stickers.d.ts similarity index 76% rename from types/StickerContext.d.ts rename to types/Stickers.d.ts index 9a42cc1..d57cbbd 100644 --- a/types/StickerContext.d.ts +++ b/types/Stickers.d.ts @@ -16,3 +16,9 @@ interface Sticker { } type StickerDays = Sticker[]; + +interface StickerModal { + isOpen: boolean; + selectedSticker: StickerVal; + step: number; +}