Modal opens and closes properly when dates are clicked. Removed todos.

components/calender/Day.tsx

@@ -1,7 +1,7 @@
 import { Box, Text } from "@chakra-ui/react";
 import { add, getYear, getMonth, sub, getDate } from "date-fns";
 import router from "next/router";
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import AddSticker from "./modals/AddSticker";
 
 interface DayProps {
@@ -35,6 +35,8 @@ const Day = (props: DayProps): JSX.Element => {
     }
   };
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   return (
     <Fragment>
       {isOverflow && (
@@ -61,13 +63,10 @@ const Day = (props: DayProps): JSX.Element => {
           border="2px solid #0068ff"
           w="100%"
           h="100%"
-          /**
+          onClick={() => setIsOpen(true)}
-           * 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 />
+          <AddSticker date={date} isOpen={isOpen} updateIsOpen={setIsOpen} />
         </Box>
       )}
     </Fragment>

components/calender/modals/AddSticker.tsx

@@ -6,25 +6,37 @@ import {
   ModalHeader,
   ModalCloseButton,
   ModalBody,
-  ModalFooter
+  ModalFooter,
-  // Lorem
+  Heading
 } from "@chakra-ui/react";
-import React, { Fragment, useState } from "react";
+import React, { Fragment } from "react";
+import { format } from "date-fns";
 
-const AddSticker = (): JSX.Element => {
+interface AddStickerProps {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  isOpen: boolean;
+  updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  date: Date;
+}
+
+const AddSticker = (props: AddStickerProps): JSX.Element => {
+  const { isOpen, updateIsOpen, date } = props;
 
   return (
     <Fragment>
-      {/**
+      <Modal
-       * TODO: Add prop that will be the trigger for opening the modal.
+        isCentered
-       * <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
+        isOpen={isOpen}
-       */}
+        onClose={() => updateIsOpen(!isOpen)}
-
+        motionPreset="slideInBottom"
-      <Modal isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
+        scrollBehavior="inside"
+      >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Modal Title</ModalHeader>
+          <ModalHeader>
+            <Heading textAlign="center" as="h2" size="md" w="100%">
+              {format(date, "LLLL do, y")}
+            </Heading>
+          </ModalHeader>
           <ModalCloseButton />
           <ModalBody></ModalBody>
 
@@ -32,7 +44,7 @@ const AddSticker = (): JSX.Element => {
             <Button
               colorScheme="blue"
               mr={3}
-              onClick={() => setIsOpen(!isOpen)}
+              onClick={() => updateIsOpen(!isOpen)}
             >
               Close
             </Button>