data/stickerSeeder.ts

@@ -7,11 +7,9 @@ import {
 } from "date-fns";
 
 /**
- * This seeder is to simulate the date and sticker info from the database.
+ * Generated a valid sticker value for use when generating a sticker obj.
- * Filling up an array for the current month with sticker from ths first to
+ * @returns {ValidStickerVal} a number that will represent a valid sticker value.
- * the day before the current date, leaving the rest of the month empty.
  */
-
 const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
   const sticker = Math.floor(Math.random() * (2 - -2 + 1)) + -2;
 
@@ -26,6 +24,12 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
   }
 };
 
+/**
+ * This seeder is to simulate the date and sticker info from the database.
+ * Filling up an array for the current month with sticker from ths first to
+ * the day before the current date, leaving the rest of the month empty.
+ * @returns {StickerDays} an array with populated sticker objects that correspond to the current month's info.
+ */
 const stickersSeeder = (): StickerDays => {
   const stickers = [] as Sticker[];
 

lib/populateMonth.ts

@@ -7,7 +7,9 @@ import {
   set,
   add,
   isAfter,
-  isBefore
+  isBefore,
+  subMonths,
+  addDays
 } from "date-fns";
 
 const weekDays: WeekDays = {
@@ -104,10 +106,11 @@ const populateMonth = (selectedDate: Date): MonthLayout => {
     week6: new Array(7).fill(null)
   };
 
+  // The date of the first day in the overflow
   const sunStartDay =
     endLastMonth - (ISOToIndex.sunday[startOfSelectedMonth] - 1);
 
-  let sunCurrDate = set(sub(selectedDate, { months: 1 }), {
+  let sunCurrDate = set(subMonths(selectedDate, 1), {
     date: sunStartDay
   });
 
@@ -122,9 +125,7 @@ const populateMonth = (selectedDate: Date): MonthLayout => {
         date: sunCurrDate.toJSON()
       };
 
-      sunCurrDate = add(sunCurrDate, {
+      sunCurrDate = addDays(sunCurrDate, 1);
-        days: 1
-      });
 
       sundays[week][i] = day;
     });
@@ -139,9 +140,10 @@ const populateMonth = (selectedDate: Date): MonthLayout => {
     week6: new Array(7).fill(null)
   };
 
+  // The date of the first day in the overflow
   const monStartDay = endLastMonth - ISOToIndex.monday[startOfSelectedMonth];
 
-  let monCurrDate = set(sub(selectedDate, { months: 1 }), {
+  let monCurrDate = set(subMonths(selectedDate, 1), {
     date: monStartDay
   });
 
@@ -156,9 +158,7 @@ const populateMonth = (selectedDate: Date): MonthLayout => {
         date: monCurrDate.toJSON()
       };
 
-      monCurrDate = add(monCurrDate, {
+      monCurrDate = addDays(monCurrDate, 1);
-        days: 1
-      });
 
       mondays[week][i] = day;
     });

src/components/calender/modals/AddUpdateSticker.tsx

@@ -57,10 +57,8 @@ const AddUpdateSticker = ({
   const dispatch = useAppDispatch();
   const currDateObj = new Date(date);
 
-  // ! Update these states to say "add" and "edit" for easier reading.
+  const [modalVariant] = useState<"add" | "edit">(
-
+    isSameDay(currDateObj, currDate) ? "add" : "edit"
-  const [modalVariant] = useState<"currDate" | "notCurrDate">(
-    isSameDay(currDateObj, currDate) ? "currDate" : "notCurrDate"
   );
 
   const handleClose = () => {
@@ -79,7 +77,7 @@ const AddUpdateSticker = ({
   // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
   const variants = {
-    currDate: [
+    add: [
       {
         header: `Which sticker did you earn for ${format(
           currDateObj,
@@ -118,7 +116,7 @@ const AddUpdateSticker = ({
         )
       }
     ],
-    notCurrDate: [
+    edit: [
       {
         header: `Which sticker did you want to update for ${format(
           currDateObj,
@@ -234,7 +232,7 @@ const AddUpdateSticker = ({
       onClose={() => handleClose()}
       motionPreset="slideInBottom"
       scrollBehavior="inside"
-      size={modalVariant === "currDate" ? "xl" : "2xl"}
+      size={modalVariant === "add" ? "xl" : "2xl"}
     >
       <ModalOverlay />
       <ModalContent>