Calender context moved into redux.

src/components/calender/CalenderNav.tsx

@@ -1,14 +1,19 @@
-import React, { useContext } from "react";
+import React from "react";
 import { useRouter } from "next/router";
 import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { format, isSameMonth, addMonths, subMonths } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import DatePicker from "./DatePicker";
-import { CalenderContext } from "../../../contexts/CalenderContext";
+import { useAppSelector } from "../../app/hooks";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedDate } = useContext(CalenderContext);
+  const selectedDate = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { date } = selectedDate;
+
+  const selectedDateObj = new Date(date);
 
   const validDateRange = findValidDateRange();
   const { start: validStart, end: validEnd } = validDateRange;
@@ -17,14 +22,14 @@ const CalenderNav = (): JSX.Element => {
 
   const handleNavButtons = (direction: "next" | "prev") => {
     if (direction === "next") {
-      const newMonth = addMonths(selectedDate, 1);
+      const newMonth = addMonths(selectedDateObj, 1);
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");
 
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
-      const newMonth = subMonths(selectedDate, 1);
+      const newMonth = subMonths(selectedDateObj, 1);
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");
@@ -36,14 +41,14 @@ const CalenderNav = (): JSX.Element => {
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
-        isDisabled={isSameMonth(selectedDate, validStart)}
+        isDisabled={isSameMonth(selectedDateObj, validStart)}
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
         onClick={() => handleNavButtons("prev")}
       />
       <DatePicker />
       <IconButton
-        isDisabled={isSameMonth(selectedDate, validEnd)}
+        isDisabled={isSameMonth(selectedDateObj, validEnd)}
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
         onClick={() => handleNavButtons("next")}