WIP: creating the modal

frontend/components/CardItem.js

@@ -9,7 +9,7 @@ import {
 } from "@heroicons/react/outline";
 import { Draggable } from "react-beautiful-dnd";
 
-function CardItem({ data, index }) {
+function CardItem({ data, index, onClick }) {
   return (
     <Draggable index={index} draggableId={data.id.toString()}>
       {(provided) => (
@@ -18,6 +18,7 @@ function CardItem({ data, index }) {
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           className="bg-white rounded-md p-3 m-3 mt-0 last:mb-0"
+          onClick={onClick}
         >
           <label
             className={`bg-gradient-to-r

frontend/package.json

@@ -12,7 +12,8 @@
     "next": "latest",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "reactstrap": "^9.1.6"
   },
   "devDependencies": {
     "autoprefixer": "^10.2.6",

frontend/pages/index.js

@@ -9,6 +9,7 @@ import {
 } from "@heroicons/react/outline";
 import CardItem from "../components/CardItem";
 import BoardData from "../data/board-data.json";
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import { useEffect, useState } from "react";
 
@@ -24,6 +25,8 @@ export default function Home() {
   const [boardData, setBoardData] = useState(BoardData);
   const [showForm, setShowForm] = useState(false);
   const [selectedBoard, setSelectedBoard] = useState(0);
+  const [modal, setModal] = useState(false);
+  const toggle = () => setModal(!modal);
 
   useEffect(() => {
     if (process.browser) {
@@ -74,6 +77,26 @@ export default function Home() {
     }
   }
 
+  const handleModalMount = () => {
+    const modalContainer = document.querySelector('.modal');
+    document.body.appendChild(modalContainer);
+  };
+
+  // render the modal content of the cardItem that was clicked
+  const onClickCardItem = () => {
+    console.log("test")
+    toggle();
+  }
+
+  const renderModal = () => (
+    <Modal isOpen={modal} toggle={toggle} centered={true} unmountOnClose={true}>
+      <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+      <ModalBody>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </ModalBody>
+    </Modal>
+  );
+
   return (
     <Layout>
       <div className="p-10 flex flex-col h-screen">
@@ -165,6 +188,7 @@ export default function Home() {
                                       data={item}
                                       index={iIndex}
                                       className="m-3"
+                                      onClick={onClickCardItem}
                                     />
                                   );
                                 })}
@@ -200,6 +224,8 @@ export default function Home() {
           </DragDropContext>
         )}
       </div>
+      {renderModal()}
+      <div className="modal" onMount={handleModalMount} />
     </Layout>
   );
 }