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}