contexts/NewCalenderContext.tsx

@@ -0,0 +1,184 @@
+import React, { createContext, useState, ReactNode } from "react";
+import { format, endOfMonth, getDate, compareAsc } from "date-fns";
+// TODO: import types
+
+type days =
+  | "Sunday"
+  | "Monday"
+  | "Tuesday"
+  | "Wednesday"
+  | "Thursday"
+  | "Friday"
+  | "Saturday";
+
+interface DaysOfWeek {
+  startOfWeek: {
+    Sunday: days[];
+    Monday: days[];
+  };
+}
+
+interface UpdateCalendarProps {
+  direction: "next" | "prev";
+  date: Date;
+}
+
+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;
+  title: string;
+  layout: Calendar;
+  startWeekday: number;
+  endWeekday: number;
+  days: number;
+}
+
+interface CurrentMonth {
+  prev: MonthInfo;
+  curr: MonthInfo;
+  next: MonthInfo;
+}
+
+interface CalenderMemoize {
+  String: CurrentMonth;
+}
+
+interface CalenderContextState {
+  selectedDate: Date;
+  monthInfo: MonthInfo;
+  setDate: (date: UpdateCalendarProps) => boolean;
+}
+
+const CalenderContext = createContext({} as CalenderContextState);
+
+const CalenderContextProvider = ({
+  children,
+}: {
+  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());
+  // All the info for the current month
+  const [monthInfo, setMonthInfo] = useState<MonthInfo>({
+    date: new Date(),
+    title: format(selectedDate, "LLLL uuuu"),
+    layout: {} as Calendar,
+    startWeekday: 1,
+    endWeekday: 2,
+    days: getDate(endOfMonth(selectedDate))
+  })
+
+  // TODO: Repalce this with the new date alignment algorithm. That adds the date weeks obj to the layout key in the monthInfo context.
+  // 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",
+      ],
+    },
+  };
+
+  //TODO: Update nav to switch between the prev and next date or take in a custom date.
+
+  // Navigation
+  const setDate = (input: UpdateCalendarProps): boolean => {
+    // const { year, month: inputMonth, day } = input;
+
+    // if (!year || !inputMonth || day < 0 || day > 31) {
+    //   return false;
+    // } else {
+    //   const month = inputMonth - 1;
+    //   const customDate: Date = new Date(year, month, day);
+
+    //   if (compareAsc(customDate, selectedDate) !== 0) {
+    //     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.
+
+  const calenderContextValues = {
+    selectedDate,
+    monthInfo,
+    daysOfWeek,
+    setDate,
+  };
+
+  return (
+    <CalenderContext.Provider value={calenderContextValues}>
+      {children}
+    </CalenderContext.Provider>
+  );
+};
+
+export { CalenderContextProvider, CalenderContext };