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 = (
-  isOverflow: boolean,
-  date: Date,
-  overflowDirection: "next" | "prev" | null,
-  selectedDate: Date
-) => {
+interface DayProps {
+  isOverflow?: boolean;
+  overflowDirection?: "next" | "prev" | null;
+  sticker: -2 | -1 | 0 | 1 | 2 | null;
+  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"}
-          border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+          color="gray.600"
+          border="2px solid #181d8f"
           w="100%"
           h="100%"
-          key={format(date, "P")}
-          {...(isOverflow && {
-            _hover: {
-              cursor: "pointer"
-            }
-          })}
-          {...(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}`);
-              }
-            }
-          })}
+          _hover={{
+            cursor: "pointer"
+          }}
+          onClick={() => handleNav(overflowDirection)}
         >
           <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>
   );
 };