From 96a9bedf9ac3d435dac93dd14da85e3fa1fdd282 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Wed, 29 Dec 2021 13:52:39 -0600
Subject: [PATCH] Imported the new context to calendar componenet.

---
 components/calender/NewContext.tsx |  5 ++--
 components/calender/index.tsx      | 46 +++++++++++++++++++-----------
 contexts/NewCalenderContext.tsx    | 21 +++++++-------
 theme/AppTheme.ts                  |  3 +-
 4 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/components/calender/NewContext.tsx b/components/calender/NewContext.tsx
index 47d0cfd..fd7135a 100644
--- a/components/calender/NewContext.tsx
+++ b/components/calender/NewContext.tsx
@@ -3,12 +3,11 @@ import { Box, Text } from "@chakra-ui/react";
 import { NewCalenderContext } from "../../contexts/NewCalenderContext";
 
 const NewContext = (): JSX.Element => {
-  const { selectedMonthInfo } = useContext(NewCalenderContext);
-  const { date } = selectedMonthInfo;
+  const { selectedDate } = useContext(NewCalenderContext);
 
   return (
     <Box>
-      <Text>{`New Context Was Provided. Selected date is ${date}`}</Text>
+      <Text>{`New Context Was Provided. Selected date is ${selectedDate}`}</Text>
     </Box>
   );
 };
diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index 0d3f179..ffad149 100644
--- a/components/calender/index.tsx
+++ b/components/calender/index.tsx
@@ -2,7 +2,8 @@ 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 NewContext from "./NewContext";
+import { NewCalenderContext } from "../../contexts/NewCalenderContext";
+import { getDate } from "date-fns";
 
 interface UpdateCalendarProps {
   year: number;
@@ -12,6 +13,7 @@ interface UpdateCalendarProps {
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext);
+  const { layout } = useContext(NewCalenderContext);
 
   useEffect(() => {
     if (newDate) {
@@ -31,9 +33,12 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
     startOfWeek: "Sunday"
   };
 
+  const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
   return (
     <VStack h="100vh" w="100%">
-      <NewContext />
+      {/* <NewContext /> */}
       <CalenderNav />
       <HStack
         px={6}
@@ -44,7 +49,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
         alignContent="center"
         alignItems="center"
       >
-        {daysOfWeek.startOfWeek[userSettings.startOfWeek].map((weekDay) => {
+        {weekdays.map((weekDay) => {
           return (
             <Box
               d="flex"
@@ -73,20 +78,27 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
         // alignContent="center"
         alignItems="center"
       >
-        {daysOfMonth.map((monthDay) => {
-          return (
-            <Box
-              bg="transparent"
-              border="2px solid #0068ff"
-              w="100%"
-              h="100%"
-              key={monthDay}
-            >
-              <Text w="100%" h="100%">
-                {`Day ${monthDay}`}
-              </Text>
-            </Box>
-          );
+        {Object.keys(month).map((week) => {
+          const thisWeek = month[week];
+
+          return thisWeek.map((day) => {
+            const { date, isOverflow } = day;
+
+            return (
+              <Box
+                bg="transparent"
+                color={isOverflow ? "gray.600" : "whiteAlpha"}
+                border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+                w="100%"
+                h="100%"
+                key={date}
+              >
+                <Text w="100%" h="100%">
+                  {`Day ${getDate(date)}`}
+                </Text>
+              </Box>
+            );
+          });
         })}
       </SimpleGrid>
     </VStack>
diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx
index d4391ec..50debbd 100644
--- a/contexts/NewCalenderContext.tsx
+++ b/contexts/NewCalenderContext.tsx
@@ -49,11 +49,11 @@ interface MonthInfo {
 
 interface MonthLayout {
   sunday: {
-    layout: DaysOfWeek;
+    weekdays: DaysOfWeek;
     month: Month;
   };
   monday: {
-    layout: DaysOfWeek;
+    weekdays: DaysOfWeek;
     month: Month;
   };
 }
@@ -63,7 +63,9 @@ interface MonthContext extends MonthInfo {
 }
 
 interface CalenderContextState {
-  selectedMonth: MonthContext;
+  selectedDate: Date;
+  title: string;
+  layout: MonthLayout;
 }
 
 const NewCalenderContext = createContext({} as CalenderContextState);
@@ -210,11 +212,11 @@ const NewCalenderContextProvider = ({
 
     const output = {
       sunday: {
-        layout: weekDays.sunday,
+        weekdays: weekDays.sunday,
         month: sundays
       },
       monday: {
-        layout: weekDays.monday,
+        weekdays: weekDays.monday,
         month: mondays
       }
     };
@@ -231,10 +233,7 @@ const NewCalenderContextProvider = ({
   // );
 
   const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
-  const [prevMonth, setPrevMonth] = useState<Date>(
-    sub(selectedDate, { months: 1 })
-  );
-  const [selectedMonthInfo, setSelectedMonthInfo] = useState<MonthContext>({
+  const [selectedDateInfo, setSelectedMonthInfo] = useState<MonthContext>({
     date: selectedDate,
     title: format(selectedDate, "LLLL uuuu"),
     layout: populateMonth(selectedDate)
@@ -249,7 +248,9 @@ const NewCalenderContextProvider = ({
   //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
 
   const calenderContextValues = {
-    selectedMonthInfo
+    selectedDate: selectedDate,
+    title: selectedDateInfo.title,
+    layout: selectedDateInfo.layout
   };
 
   return (
diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts
index 16de8ea..5c5e786 100644
--- a/theme/AppTheme.ts
+++ b/theme/AppTheme.ts
@@ -1,5 +1,5 @@
 import { extendTheme, ThemeConfig } from "@chakra-ui/react";
-import { createBreakpoints } from "@chakra-ui/theme-tools";
+// import { createBreakpoints } from "@chakra-ui/theme-tools";
 import buttons from "./components/buttonStyles";
 
 const config: ThemeConfig = {
@@ -20,6 +20,7 @@ const AppTheme = extendTheme({
   colors: {
     brand: {
       main: "#3138dc",
+      mainInactive: "#181d8f",
       primary: "#0068ff",
       secondary: "#0086ff",
       hover: "#00aec1",