Rename type definition files. Update documentation. Update date-fn functions being used.

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 = {

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 {StickerVal} currSticker the sticker for this date.
- * @param {date} string the date for this day.
+ * @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 = ({
           <Text w="auto" h="auto">
             {`${getDate(currDateObj)}`}
           </Text>
-          <Box key={sticker} fontSize="1.5rem">
+          <Box key={currSticker} fontSize="1.5rem">
-            <DemoStickers stickerVal={sticker} />
+            <DemoStickers stickerVal={currSticker} />
           </Box>
         </VStack>
       )}
@@ -150,16 +152,16 @@ const Day = ({
           >
             {`${getDate(currDateObj)}`}
           </Text>
-          <Box key={sticker} fontSize="1.5rem">
+          <Box key={currSticker} fontSize="1.5rem">
-            <DemoStickers stickerVal={sticker} />
+            <DemoStickers stickerVal={currSticker} />
           </Box>
           <Provider store={store}>
             {isBefore(currDateObj, endOfDay(currDate)) && (
               <AddUpdateSticker
-                date={date}
+                stickerDate={date}
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
-                currSticker={sticker}
+                currSticker={currSticker}
                 step={step}
                 updateStep={setStep}
                 selectedSticker={selectedSticker}

src/components/calender/index.tsx

@@ -120,7 +120,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                 <Day
                   isOverflow={isOverflow}
                   overflowDirection={overflowDirection}
-                  sticker={sticker}
+                  currSticker={sticker}
                   date={date}
                   selectedDate={selectedDate.date}
                   currDate={currDateObj}

src/components/calender/modals/AddUpdateSticker.tsx

@@ -24,7 +24,7 @@ import { addEditSticker } from "../../../features/calender/stickers";
 interface AddStickerProps {
   isOpen: boolean;
   updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  date: string;
+  stickerDate: string;
   currSticker: StickerVal;
   step: number;
   updateStep: React.Dispatch<React.SetStateAction<number>>;
@@ -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<React.SetStateAction<boolean>>} 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<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.
+ * @param {StickerVal} selectedSticker the value of the selected sticker.
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} 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: (

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<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
+ * @param {React.MutableRefObject<undefined>} initialSticker the sticker that should have be in focus when the modal opens.
  */
 
 const StickerSelector = ({

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<UpdateStickerSlicePayload>
     ) {
-      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

types/Stickers.d.ts

@@ -16,3 +16,9 @@ interface Sticker {
 }
 
 type StickerDays = Sticker[];
+
+interface StickerModal {
+  isOpen: boolean;
+  selectedSticker: StickerVal;
+  step: number;
+}