From f7a35bc3f570231ecc6de351e639694f0e62e45a Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Tue, 30 Nov 2021 21:49:37 -0600
Subject: [PATCH] Linked navigation functions to navigation buttons. Calender
 layout props are not updating properly.

---
 components/calender/CalenderNav.tsx |  6 ++++--
 contexts/CalenderContext.tsx        | 24 +++++++++++-------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx
index ef02500..01832d1 100644
--- a/components/calender/CalenderNav.tsx
+++ b/components/calender/CalenderNav.tsx
@@ -5,15 +5,16 @@ import { format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const { today } = useContext(CalenderContext);
+  const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext);
 
-  const currentMonth = format(today, "LLLL uuuu");
+  const currentMonth = format(selectedMonth, "LLLL uuuu");
 
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
+        onClick={() => prevMonth()}
       />
       <Heading w="100%" h="auto">
         {currentMonth}
@@ -21,6 +22,7 @@ const CalenderNav = (): JSX.Element => {
       <IconButton
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
+        onClick={() => nextMonth()}
       />
     </HStack>
   );
diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx
index 11e42d6..36f8e1d 100644
--- a/contexts/CalenderContext.tsx
+++ b/contexts/CalenderContext.tsx
@@ -11,15 +11,14 @@ type days =
   | "Friday"
   | "Saturday";
 
-  interface DaysOfWeek {
-    startOfWeek: {
-      Sunday: days[];
-      Monday: days[];
-    };
-  }
+interface DaysOfWeek {
+  startOfWeek: {
+    Sunday: days[];
+    Monday: days[];
+  };
+}
 
 interface CalenderContextState {
-  today: Date;
   selectedMonth: Date;
   daysOfMonth: [number] | [null];
   daysOfWeek: DaysOfWeek;
@@ -65,7 +64,7 @@ const CalenderContextProvider = ({
 
       setDaysOfMonth(newDaysOfMonth);
     }
-  }, [selectedMonth, lastDayOfCurrMonth]);
+  }, [selectedMonth, lastDayOfSelectedMonth]);
 
   // Update selected month sates when the selected month is updated.
   useEffect(() => {
@@ -106,23 +105,22 @@ const CalenderContextProvider = ({
 
   // Navigation
   const prevMonth = (): void => {
-    const newMonth = sub(today, {
-      years: 1,
+    const newMonth = sub(selectedMonth, {
+      months: 1,
     });
 
     setSelectedMonth(newMonth);
   };
 
   const nextMonth = (): void => {
-    const newMonth = add(today, {
-      years: 1,
+    const newMonth = add(selectedMonth, {
+      months: 1,
     });
 
     setSelectedMonth(newMonth);
   };
 
   const calenderContextValues = {
-    today,
     selectedMonth,
     daysOfMonth,
     daysOfWeek,