Rewritten from scratch. New todos. New interfaces. New States.

contexts/NewCalenderContext.tsx

@@ -1,8 +1,15 @@
 import React, { createContext, useState, ReactNode } from "react";
-import { format, endOfMonth, getDate, compareAsc } from "date-fns";
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  getDate,
+  sub,
+  compareAsc,
+} from "date-fns";
 // TODO: import types
 
-type days =
+type Days =
   | "Sunday"
   | "Monday"
   | "Tuesday"
@@ -11,16 +18,13 @@ type days =
   | "Friday"
   | "Saturday";
 
-interface DaysOfWeek {
+type DaysOfWeek = Days[];
-  startOfWeek: {
-    Sunday: days[];
-    Monday: days[];
-  };
-}
 
-interface UpdateCalendarProps {
+interface WeekDays {
-  direction: "next" | "prev";
+  startOfWeek: {
-  date: Date;
+    sunday: DaysOfWeek;
+    monday: DaysOfWeek;
+  };
 }
 
 interface Month {
@@ -32,153 +36,135 @@ interface Month {
   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;
   title: string;
-  layout: Calendar;
+  startDay: string;
-  startWeekday: number;
+  endDay: string;
-  endWeekday: number;
   days: number;
+  prevMonth: {
+    date: Date;
+    endDay: number;
+    days: number;
+  };
 }
 
-interface CurrentMonth {
+interface MonthContext extends MonthInfo {
-  prev: MonthInfo;
+  startOfWeek: {
-  curr: MonthInfo;
+    sunday: {
-  next: MonthInfo;
+      layout: DaysOfWeek;
-}
+      month: Month;
-
+    };
-interface CalenderMemoize {
+    monday: {
-  String: CurrentMonth;
+      layout: DaysOfWeek;
+      month: Month;
+    };
+  };
 }
 
 interface CalenderContextState {
-  selectedDate: Date;
+  selectedMonth: MonthContext;
-  monthInfo: MonthInfo;
-  setDate: (date: UpdateCalendarProps) => boolean;
 }
 
-const CalenderContext = createContext({} as CalenderContextState);
+const NewCalenderContext = createContext({} as CalenderContextState);
 
-const CalenderContextProvider = ({
+const NewCalenderContextProvider = ({
   children,
 }: {
   children: ReactNode;
 }): JSX.Element => {
-  const indexToDay = {
+  const weekDays: WeekDays = {
     startOfWeek: {
-      Sunday: {
+      sunday: [
-        0: "Sunday",
+        "Sunday",
-        1: "Monday",
+        "Monday",
-        2: "Tuesday",
+        "Tuesday",
-        3: "Wednesday",
+        "Wednesday",
-        4: "Thursday",
+        "Thursday",
-        5: "Friday",
+        "Friday",
-        6: "Saturday",
+        "Saturday",
+      ],
+      monday: [
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+        "Sunday",
+      ],
+    },
+  };
+
+  const ISOToIndex = {
+    startOfWeek: {
+      sunday: {
+        Sun: 0,
+        Mon: 1,
+        Tue: 2,
+        Wed: 3,
+        Thu: 4,
+        Fri: 5,
+        Sat: 6,
       },
-      Monday: {
+      monday: {
-        0: "Monday",
+        Mon: 0,
-        1: "Tuesday",
+        Tue: 1,
-        2: "Wednesday",
+        Wed: 2,
-        3: "Thursday",
+        Thu: 3,
-        4: "Friday",
+        Fri: 4,
-        5: "Saturday",
+        Sat: 5,
-        6: "Sunday",
+        Sun: 6,
       },
     },
   };
 
-  // Selected month & year
+  const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [prevMonth, setPrevMonth] = useState<Date>(
-  // All the info for the current month
+    sub(selectedDate, { months: 1 })
-  const [monthInfo, setMonthInfo] = useState<MonthInfo>({
+  );
-    date: new Date(),
+  const [selectedMonthInfo, setSelectedMonthInfo] = useState<MonthContext>({
+    date: selectedDate,
     title: format(selectedDate, "LLLL uuuu"),
-    layout: {} as Calendar,
+    startDay: format(startOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences.
-    startWeekday: 1,
+    endDay: format(endOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences.
-    endWeekday: 2,
+    days: getDate(endOfMonth(selectedDate)),
-    days: getDate(endOfMonth(selectedDate))
+    prevMonth: {
-  })
+      date: prevMonth,
-
+      endDay: getDate(endOfMonth(prevMonth)),
-  // TODO: Repalce this with the new date alignment algorithm. That adds the date weeks obj to the layout key in the monthInfo context.
+      days: getDate(endOfMonth(prevMonth)),
-  // Update or populate the days of the month.
-  const populateDays = (): void => {
-    // let newDaysOfMonth: [number] = [...daysOfMonth];
-
-    // if (newDaysOfMonth.length > 1) {
-    //   newDaysOfMonth = [1];
-    // }
-
-    // for (let i = 1; i < endOfSelectedMonth; i++) {
-    //   newDaysOfMonth.push(i + 1);
-    // }
-
-    // setDaysOfMonth(newDaysOfMonth);
-  };
-
-  // Calender Layout
-  const daysOfWeek: DaysOfWeek = {
-    startOfWeek: {
-      Sunday: [
-        "Sunday",
-        "Monday",
-        "Tuesday",
-        "Wednesday",
-        "Thursday",
-        "Friday",
-        "Saturday",
-      ],
-      Monday: [
-        "Monday",
-        "Tuesday",
-        "Wednesday",
-        "Thursday",
-        "Friday",
-        "Saturday",
-        "Sunday",
-      ],
     },
-  };
+    startOfWeek: {
+      sunday: {
+        layout: weekDays.startOfWeek.sunday,
+        month: {} as Month,
+      },
+      monday: {
+        layout: weekDays.startOfWeek.monday,
+        month: {} as Month,
+      },
+    },
+  });
 
-  //TODO: Update nav to switch between the prev and next date or take in a custom date.
+  //TODO: Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference.
 
-  // Navigation
+  //TODO: Update the MonthInfo to use the new month population function on first render.
-  const setDate = (input: UpdateCalendarProps): boolean => {
-    // const { year, month: inputMonth, day } = input;
 
-    // if (!year || !inputMonth || day < 0 || day > 31) {
+  //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below.
-    //   return false;
-    // } else {
-    //   const month = inputMonth - 1;
-    //   const customDate: Date = new Date(year, month, day);
 
-    //   if (compareAsc(customDate, selectedDate) !== 0) {
+  //TODO: Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above.
-    //     setSelectedDate(customDate);
-    //   }
-    // }
-  };
 
-  //TODO: Add some functions that will update the MonthInfo state when the month changes. Each function should take care of each key in the context.
+  //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
 
   const calenderContextValues = {
-    selectedDate,
+    selectedMonthInfo,
-    monthInfo,
-    daysOfWeek,
-    setDate,
   };
 
   return (
-    <CalenderContext.Provider value={calenderContextValues}>
+    <NewCalenderContext.Provider value={calenderContextValues}>
       {children}
-    </CalenderContext.Provider>
+    </NewCalenderContext.Provider>
   );
 };
 
-export { CalenderContextProvider, CalenderContext };
+export { NewCalenderContextProvider, NewCalenderContext };