contexts/CalenderContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, ReactNode, useEffect } from "react";
-import { endOfMonth, getDate, sub, add, compareAsc } from "date-fns";
+import { endOfMonth, getDate, sub, compareAsc } from "date-fns";
 // TODO: import types
 
 type days =
@@ -10,7 +10,6 @@ type days =
   | "Thursday"
   | "Friday"
   | "Saturday";
-
 interface DaysOfWeek {
   startOfWeek: {
     Sunday: days[];
@@ -23,6 +22,43 @@ interface UpdateCalendarProps {
   month: number;
   day: number;
 }
+
+interface Month {
+  week1: Date[];
+  week2: Date[];
+  week3: Date[];
+  week4: Date[];
+  week5: Date[];
+  week6: Date[];
+}
+
+interface Calendar {
+  startOfWeek: {
+    Sunday: Month;
+    Monday: Month;
+  };
+}
+
+// Will replace all states and be used in redis as a form of memoization.
+interface MonthInfo {
+  date: Date;
+  format: string;
+  layout: Calendar;
+  startDay: string;
+  endDay: string;
+  days: number;
+}
+
+interface CurrentMonth {
+  prev: MonthInfo;
+  curr: MonthInfo;
+  next: MonthInfo;
+}
+
+interface CalenderMemoize {
+  String: CurrentMonth;
+}
+
 interface CalenderContextState {
   selectedDate: Date;
   daysOfMonth: [number];
@@ -37,14 +73,47 @@ const CalenderContextProvider = ({
 }: {
   children: ReactNode;
 }): JSX.Element => {
+  const indexToDay = {
+    startOfWeek: {
+      Sunday: {
+        0: "Sunday",
+        1: "Monday",
+        2: "Tuesday",
+        3: "Wednesday",
+        4: "Thursday",
+        5: "Friday",
+        6: "Saturday",
+      },
+      Monday: {
+        0: "Monday",
+        1: "Tuesday",
+        2: "Wednesday",
+        3: "Thursday",
+        4: "Friday",
+        5: "Saturday",
+        6: "Sunday",
+      },
+    },
+  };
+
   // Selected month & year
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  // Update this to have the day of week and the last numerical day.
   const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState<number>(
     getDate(endOfMonth(selectedDate))
   );
+  // Update this to have the day of week and the last numerical day.
+  const [endOfPrevMonth, setEndOfPrevMonth] = useState<number>(
+    getDate(endOfMonth(sub(selectedDate, { months: 1 })))
+  );
+  // Add start of selected month and start of next month, including day of week and numerical day.
 
+  const [calendar, setCalendar] = useState<Calendar>({} as Calendar);
+
+  // TODO: Remove this state and all referenced to it once the date alignment algorithm is complete.
   const [daysOfMonth, setDaysOfMonth] = useState<[number]>([1]);
 
+  // TODO: Repalce this with the new date alignment algorithm.
   // Update or populate the days of the month.
   const populateDays = (): void => {
     let newDaysOfMonth: [number] = [...daysOfMonth];
@@ -60,6 +129,7 @@ const CalenderContextProvider = ({
     setDaysOfMonth(newDaysOfMonth);
   };
 
+  // TODO: Update new referenced once they are added.
   // Update selected month sates when the selected month is updated.
 
   // Update days of month.