Updated to use context.

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"

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");
 

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">
+      <CalenderContextProvider>
         <Calender />
+      </CalenderContextProvider>
     </Box>
   );
 };