Updated current components to use the new calender context. Added nav function to calender context.

components/calender/CalenderNav.tsx

@@ -3,11 +3,11 @@ import { useRouter } from "next/router";
 import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { sub, add, format } from "date-fns";
-import { CalenderContext } from "../../contexts/CalenderContext";
 import DatePicker from "./DatePicker";
+import { NewCalenderContext } from "../../contexts/NewCalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedDate } = useContext(CalenderContext);
+  const { selectedDate } = useContext(NewCalenderContext);
 
   const router = useRouter();
 

components/calender/DatePicker.tsx

@@ -25,8 +25,8 @@ import {
   FieldProps
 } from "formik";
 import { format } from "date-fns";
-import { CalenderContext } from "../../contexts/CalenderContext";
 import FormValidateEmoji from "./FormValidateEmoji";
+import { NewCalenderContext } from "../../contexts/NewCalenderContext";
 
 interface UpdateCalendarProps {
   year: number;
@@ -35,9 +35,7 @@ interface UpdateCalendarProps {
 }
 
 const DatePicker = (): JSX.Element => {
-  const { selectedDate } = useContext(CalenderContext);
-
-  const currentMonth = format(selectedDate, "LLLL uuuu");
+  const { title } = useContext(NewCalenderContext);
 
   const router = useRouter();
 
@@ -134,7 +132,7 @@ const DatePicker = (): JSX.Element => {
       <PopoverTrigger>
         <Button border="none" variant="outline">
           <Heading w="100%" h="auto">
-            {currentMonth}
+            {title}
           </Heading>
         </Button>
       </PopoverTrigger>

components/calender/index.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import CalenderNav from "./CalenderNav";
-import { CalenderContext } from "../../contexts/CalenderContext";
 import { NewCalenderContext } from "../../contexts/NewCalenderContext";
 import { getDate } from "date-fns";
 // TODO: import types
@@ -13,20 +12,19 @@ interface UpdateCalendarProps {
 }
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext);
-  const { layout } = useContext(NewCalenderContext);
+  const { layout, updateDate } = useContext(NewCalenderContext);
 
   useEffect(() => {
     if (newDate) {
       const { year, month, day } = newDate;
 
       if (year > 0 && month > 0 && day > 0) {
-        setDate(newDate);
+        updateDate(newDate);
       } else {
         console.warn("Invalid date format: ", newDate);
       }
     }
-  }, [daysOfMonth, daysOfWeek, newDate, setDate]);
+  }, [newDate, updateDate]);
 
   // Simulated user settings context
   const userSettings = {
@@ -39,7 +37,6 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
   return (
     <VStack h="100vh" w="100%">
-      {/* <NewContext /> */}
       <CalenderNav />
       <HStack
         px={6}

contexts/NewCalenderContext.tsx

@@ -4,11 +4,14 @@ import {
   startOfMonth,
   endOfMonth,
   getDate,
+  getMonth,
+  getYear,
   add,
   sub,
   set,
   isAfter,
-  isBefore
+  isBefore,
+  compareAsc
 } from "date-fns";
 // TODO: import types
 
@@ -62,10 +65,17 @@ interface MonthContext extends MonthInfo {
   layout: MonthLayout;
 }
 
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
+
 interface CalenderContextState {
   selectedDate: Date;
   title: string;
   layout: MonthLayout;
+  updateDate: (input: UpdateCalendarProps) => void;
 }
 
 const NewCalenderContext = createContext({} as CalenderContextState);
@@ -163,10 +173,10 @@ const NewCalenderContextProvider = ({
       date: sunStartDay
     });
 
-    for (let week in sundays) {
+    for (const week in sundays) {
       const thisWeek = sundays[week];
 
-      thisWeek.forEach((e, i, a) => {
+      thisWeek.forEach((e, i) => {
         const day: MonthDay = {
           isOverflow: isOverflow(selectedDate, sunCurrDate),
           date: sunCurrDate
@@ -194,10 +204,10 @@ const NewCalenderContextProvider = ({
       date: monStartDay
     });
 
-    for (let week in mondays) {
+    for (const week in mondays) {
       const thisWeek = mondays[week];
 
-      thisWeek.forEach((e, i, a) => {
+      thisWeek.forEach((e, i) => {
         const day: MonthDay = {
           isOverflow: isOverflow(selectedDate, monCurrDate),
           date: monCurrDate
@@ -224,33 +234,47 @@ const NewCalenderContextProvider = ({
     return output;
   };
 
-  //TODO Add output typing and move the invocation into the monthInfo state, removing any unended info from the state.
-
-  // populateMonth(
-  //   selectedDate,
-  //   format(startOfMonth(selectedDate), "iii"),
-  //   selectedMonthInfo.prevMonth
-  // );
-
-  const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   const [selectedDateInfo, setSelectedMonthInfo] = useState<MonthContext>({
     date: selectedDate,
     title: format(selectedDate, "LLLL uuuu"),
     layout: populateMonth(selectedDate)
   });
 
-  //TODO: Update the MonthInfo to use the new month population function on first render.
+  //TODO Update the MonthInfo to use the new month population function on first render.
+
+  //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.
+  const updateDateInfo = (newDate: Date) => {
+    const output = { ...selectedDateInfo };
+    output.date = newDate;
+    output.title = format(newDate, "LLLL uuuu");
+    output.layout = populateMonth(newDate);
+
+    setSelectedMonthInfo(output);
+  };
 
   //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.
+  const updateDate = (input: UpdateCalendarProps) => {
+    const { year, month: inputMonth, day } = input;
 
-  //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.
+    if (!year || !inputMonth || day < 0 || day > 31) {
+      return false;
+    } else {
+      const month = inputMonth - 1;
+      const customDate: Date = new Date(year, month, day);
 
-  //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
+      if (compareAsc(customDate, selectedDate) !== 0) {
+        setSelectedDate(customDate);
+        updateDateInfo(customDate);
+      }
+    }
+  };
 
   const calenderContextValues = {
-    selectedDate: selectedDate,
+    selectedDate,
     title: selectedDateInfo.title,
-    layout: selectedDateInfo.layout
+    layout: selectedDateInfo.layout,
+    updateDate
   };
 
   return (

pages/calendar/[...date].tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import ErrorPage from "next/error";
 import Calender from "../../components/calender";
 import { CalenderContextProvider } from "../../contexts/CalenderContext";
+import { NewCalenderContextProvider } from "../../contexts/NewCalenderContext";
 
 interface UpdateCalendarProps {
   year: number;
@@ -71,7 +72,9 @@ const DateRoute: React.FC<unknown> = () => {
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <CalenderContextProvider>
-        <Calender {...date} />
+        <NewCalenderContextProvider>
+          <Calender {...date} />
+        </NewCalenderContextProvider>
       </CalenderContextProvider>
     </Box>
   );

theme/layout/Header.tsx

@@ -84,8 +84,8 @@ const Header = (): JSX.Element => {
         open
           ? "brand.main"
           : transparentNavbar
-            ? "rgba(49, 56, 220, 0.9)"
-            : "brand.main"
+          ? "rgba(49, 56, 220, 0.9)"
+          : "brand.main"
       }
       transition=".5s ease"
       borderRadius="0px 0px 10px 10px"