Added todos. Refactored month component to use the day component.

components/calender/Day.tsx

@@ -1,57 +1,75 @@
 import { Box, Text } from "@chakra-ui/react";
-import { add, getYear, getMonth, sub, getDate,format } from "date-fns";
+import { add, getYear, getMonth, sub, getDate } from "date-fns";
 import router from "next/router";
 import React, { Fragment } from "react";
 import AddSticker from "./modals/AddSticker";
 
-const Day = (
+interface DayProps {
-  isOverflow: boolean,
+  isOverflow?: boolean;
-  date: Date,
+  overflowDirection?: "next" | "prev" | null;
-  overflowDirection: "next" | "prev" | null,
+  sticker: -2 | -1 | 0 | 1 | 2 | null;
-  selectedDate: Date
+  date: Date;
-) => {
+  selectedDate: Date;
+}
+
+const Day = (props: DayProps): JSX.Element => {
+  const { isOverflow, overflowDirection, /*sticker,*/ date, selectedDate } =
+    props;
+
+  const handleNav = (direction: "next" | "prev") => {
+    if (direction === "next") {
+      console.log(overflowDirection);
+      const newMonth = add(selectedDate, { months: 1 });
+
+      const year = getYear(newMonth);
+      const month = getMonth(newMonth) + 1;
+
+      router.push(`/calendar/${year}/${month}`);
+    } else if (direction === "prev") {
+      const newMonth = sub(selectedDate, { months: 1 });
+
+      const year = getYear(newMonth);
+      const month = getMonth(newMonth) + 1;
+
+      router.push(`/calendar/${year}/${month}`);
+    }
+  };
+
   return (
     <Fragment>
       {isOverflow && (
         <Box
           bg="transparent"
-          color={isOverflow ? "gray.600" : "whiteAlpha"}
+          color="gray.600"
-          border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+          border="2px solid #181d8f"
           w="100%"
           h="100%"
-          key={format(date, "P")}
+          _hover={{
-          {...(isOverflow && {
+            cursor: "pointer"
-            _hover: {
+          }}
-              cursor: "pointer"
+          onClick={() => handleNav(overflowDirection)}
-            }
-          })}
-          {...(isOverflow && {
-            onClick: () => {
-              if (overflowDirection === "next") {
-                console.log(overflowDirection);
-                const newMonth = add(selectedDate, { months: 1 });
-
-                const year = getYear(newMonth);
-                const month = getMonth(newMonth) + 1;
-
-                router.push(`/calendar/${year}/${month}`);
-              } else if (overflowDirection === "prev") {
-                const newMonth = sub(selectedDate, { months: 1 });
-
-                const year = getYear(newMonth);
-                const month = getMonth(newMonth) + 1;
-
-                router.push(`/calendar/${year}/${month}`);
-              }
-            }
-          })}
         >
           <Text w="100%" h="100%">
-            {!isOverflow && <AddSticker />}
             {`Day ${getDate(date)}`}
           </Text>
         </Box>
       )}
+      {!isOverflow && (
+        <Box
+          bg="transparent"
+          color="whiteAlpha"
+          border="2px solid #0068ff"
+          w="100%"
+          h="100%"
+          /**
+           * TODO: Add an onClick that will trigger the opening of a modal.
+           * Update the modal to take in an isOpen bool that will handle the open state.
+           */
+        >
+          <Text>{`Day ${getDate(date)}`}</Text>
+          <AddSticker />
+        </Box>
+      )}
     </Fragment>
   );
 };

components/calender/index.tsx

@@ -2,9 +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 { getDate, sub, add, getYear, getMonth } from "date-fns";
+import { format } from "date-fns";
-import { useRouter } from "next/router";
+import Day from "./Day";
-import AddSticker from "./modals/AddSticker";
 // TODO: import types
 
 interface UpdateCalendarProps {
@@ -15,7 +14,6 @@ interface UpdateCalendarProps {
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   const { selectedDate, layout, updateDate } = useContext(CalenderContext);
-  const router = useRouter();
 
   useEffect(() => {
     if (newDate) {
@@ -82,48 +80,56 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
         {Object.keys(month).map((week) => {
           const thisWeek = month[week];
 
-          return thisWeek.map((day) => {
+          return thisWeek.map((day: MonthDay) => {
-            const { date, isOverflow, overflowDirection } = day;
+            const { sticker, date, isOverflow, overflowDirection } = day;
 
             return (
-              <Box
+              <Day
-                bg="transparent"
+                isOverflow={isOverflow}
-                color={isOverflow ? "gray.600" : "whiteAlpha"}
+                overflowDirection={overflowDirection}
-                border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+                sticker={sticker}
-                w="100%"
+                date={date}
-                h="100%"
+                selectedDate={selectedDate}
-                key={date}
+                key={format(date, "P")}
-                {...(isOverflow && {
+              />
-                  _hover: {
+              // <Box
-                    cursor: "pointer"
+              //   bg="transparent"
-                  }
+              //   color={isOverflow ? "gray.600" : "whiteAlpha"}
-                })}
+              //   border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
-                {...(isOverflow && {
+              //   w="100%"
-                  onClick: () => {
+              //   h="100%"
-                    if (overflowDirection === "next") {
+              //   key={date}
-                      console.log(overflowDirection);
+              //   {...(isOverflow && {
-                      const newMonth = add(selectedDate, { months: 1 });
+              //     _hover: {
+              //       cursor: "pointer"
+              //     }
+              //   })}
+              //   {...(isOverflow && {
+              //     onClick: () => {
+              //       if (overflowDirection === "next") {
+              //         console.log(overflowDirection);
+              //         const newMonth = add(selectedDate, { months: 1 });
 
-                      const year = getYear(newMonth);
+              //         const year = getYear(newMonth);
-                      const month = getMonth(newMonth) + 1;
+              //         const month = getMonth(newMonth) + 1;
 
-                      router.push(`/calendar/${year}/${month}`);
+              //         router.push(`/calendar/${year}/${month}`);
-                    } else if (overflowDirection === "prev") {
+              //       } else if (overflowDirection === "prev") {
-                      const newMonth = sub(selectedDate, { months: 1 });
+              //         const newMonth = sub(selectedDate, { months: 1 });
 
-                      const year = getYear(newMonth);
+              //         const year = getYear(newMonth);
-                      const month = getMonth(newMonth) + 1;
+              //         const month = getMonth(newMonth) + 1;
 
-                      router.push(`/calendar/${year}/${month}`);
+              //         router.push(`/calendar/${year}/${month}`);
-                    }
+              //       }
-                  }
+              //     }
-                })}
+              //   })}
-              >
+              // >
-                <Text w="100%" h="100%">
+              //   <Text w="100%" h="100%">
-                  {!isOverflow && <AddSticker />}
+              //     {!isOverflow && <AddSticker />}
-                  {`Day ${getDate(date)}`}
+              //     {`Day ${getDate(date)}`}
-                </Text>
+              //   </Text>
-              </Box>
+              // </Box>
             );
           });
         })}

components/calender/modals/AddSticker.tsx

@@ -16,7 +16,10 @@ const AddSticker = (): JSX.Element => {
 
   return (
     <Fragment>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
+      {/**
+       * TODO: Add prop that will be the trigger for opening the modal.
+       * <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
+       */}
 
       <Modal isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
         <ModalOverlay />