From 10c474c50dd390fd7df5cb41af261c3fde71beb4 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Tue, 30 Nov 2021 21:26:51 -0600
Subject: [PATCH] Updated to use context.

---
 components/calender/Calender.tsx    | 40 ++++-------------------------
 components/calender/CalenderNav.tsx |  5 ++--
 pages/index.tsx                     |  5 +++-
 3 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/components/calender/Calender.tsx b/components/calender/Calender.tsx
index f6f6a76..98a81c4 100644
--- a/components/calender/Calender.tsx
+++ b/components/calender/Calender.tsx
@@ -1,42 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
-import { endOfMonth, getDate } from "date-fns";
 import CalenderNav from "./CalenderNav";
+import { CalenderContext } from "../../contexts/CalenderContext";
 
 const Calender = (): JSX.Element => {
-  const today = new Date();
-
-  const endOfCurrMonth = endOfMonth(today);
-  const lastDay = getDate(endOfCurrMonth);
-
-  // console.info(`This month has ${lastDay} days.`);
-
-  const daysOfMonth = [];
-  for (let i = daysOfMonth.length; i < lastDay; i++) {
-    daysOfMonth.push(daysOfMonth.length + 1);
-  }
-
-  const daysOfWeek = {
-    Sunday: [
-      "Sunday",
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday",
-    ],
-    Monday: [
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday",
-      "Sunday",
-    ],
-  };
+  const { daysOfMonth, daysOfWeek } = useContext(CalenderContext);
 
+  // Simulated user settings context
   const userSettings = {
     theme: "default",
     startOfWeek: "Sunday",
@@ -54,7 +24,7 @@ const Calender = (): JSX.Element => {
         alignContent="center"
         alignItems="center"
       >
-        {daysOfWeek[userSettings.startOfWeek].map((weekDay) => {
+        {daysOfWeek.startOfWeek[userSettings.startOfWeek].map((weekDay) => {
           return (
             <Box
               d="flex"
diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx
index 5e6903d..ef02500 100644
--- a/components/calender/CalenderNav.tsx
+++ b/components/calender/CalenderNav.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Heading, HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { format } from "date-fns";
+import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const today = new Date();
+  const { today } = useContext(CalenderContext);
 
   const currentMonth = format(today, "LLLL uuuu");
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 8a1bedd..0505f2c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { Box } from "@chakra-ui/react";
 import Calender from "../components/calender/Calender";
+import { CalenderContextProvider } from "../contexts/CalenderContext";
 
 const IndexPage = (): JSX.Element => {
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
-      <Calender />
+      <CalenderContextProvider>
+        <Calender />
+      </CalenderContextProvider>
     </Box>
   );
 };