Create reusable Modal component

Author: zachspang

frontend/package-lock.json

@@ -16,7 +16,6 @@
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
-    "reactjs-popup": "^2.0.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/package.json

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+
+/**
+ * Modal component
+ * @param {string} title - A string which is the title at the top of the modal.
+ * @param {React.JSX.Element} trigger - React.JSX.Element that when clicked will open the modal.
+ * @param {Map} inputFields - {var : "Input Var Here", ...} A map of variables where things typed into a text box will be stored to the string that the user will see above that text box.
+ * @param {(e: any) => void} changeHandler - The handler that handles changes in text and assigns them to a variable.
+ * @param {(e: any) => Promise<void>} confirmHandler - The handler that calls an API upon clicking confirm
+ */
+export const Modal = ({title, trigger, inputFields, changeHandler, confirmHandler}) => {
+
+    const [showModal, setShowModal] = useState(false);
+
+    const close = () => {
+        setShowModal(false);
+    };
+
+    const open = () => {
+        setShowModal(true);
+    };
+
+    var fieldList = []
+    Object.entries(inputFields).map(([name, text]) => (
+        fieldList.push(
+            <div className="p-2">
+                <label>{text+ ": "} </label>
+                <input className="border-2 border-black rounded p-2 size-11/12"
+                type="text"
+                name={name}
+                onChange={changeHandler}
+                />
+            </div>
+        )
+    ));
+
+    return (
+        <div>
+            <div onClick={open}>{trigger}</div>
+            {showModal ? 
+            <div>
+                <div className='opacity-50 bg-black fixed top-0 left-0 h-full w-full' onClick={close}/>
+                <div className="flex-auto bg-white rounded-lg border-2 border-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-3">
+                    <h3 className="font-semibold">
+                        {title}
+                    </h3>
+                    {fieldList}
+                    <div className="grid grid-rows-1 grid-cols-2 p-2">
+                        <button className="justify-self-start border-2 border-black p-1 rounded" onClick=
+                            {() => close()}>
+                                Cancel
+                        </button>
+                        <button className="justify-self-end border-2 border-black p-1 rounded bg-green-400" onClick={confirmHandler}>
+                            Confirm
+                        </button>
+                    </div> 
+                </div>
+            </div>:null}
+        </div>
+    );
+}

frontend/src/components/Modal.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import Popup from 'reactjs-popup';
-import 'reactjs-popup/dist/index.css';
 import Notiflix from 'notiflix';
+import {Modal} from '../Modal.js';
 
 export function CourseDashboard() {
     const [courseInfo, setCourseInfo] = useState(null);
@@ -94,45 +93,20 @@ export function CourseDashboard() {
 
     let createButton = null;
     if (userInfo.role === "educator"){
-        createButton =
-        <Popup trigger={<div className="bg-blue-500 p-2 rounded shadow hover:bg-blue-700 text-center text-sm text-white font-semibold hover:cursor-pointer" > 
-            <div>+ New Course</div> </div>} modal nested>
-            {close => (
-                <div className="flex-auto">
-                    <h3 className="font-semibold">
-                        Create New Course
-                    </h3>
-                    <div className="p-2">
-                        <label>Course Name: </label>
-                        <input className="border-2 border-black rounded p-2 size-11/12"
-                        type="text"
-                        name="title"
-                        onChange={handleChange}
-                        />
-                    </div>
-                    <div className="p-2">
-                        <label>Course Description: </label>
-                        <input className="border-2 border-black rounded p-2 size-11/12"
-                        type="text"
-                        name="description"
-                        onChange={handleChange}
-                        />
-                    </div>
-                    <div className="grid grid-rows-1 grid-cols-2">
-                        <button className="justify-self-start border-2 border-black p-1 rounded" onClick=
-                            {() => close()}>
-                                Cancel
-                        </button>
-                        <button className="justify-self-end border-2 border-black p-1 rounded bg-green-400" 
-                            onClick={handleCreateCourse}>
-                                Create
-                        </button>
-                    </div>
+        createButton = <Modal
+            title={"Create New Course"}
+            trigger={
+                <div className="bg-blue-500 p-2 rounded shadow hover:bg-blue-700 m-auto text-center text-sm text-white font-semibold hover:cursor-pointer" > 
+                    <div>+ New Course</div> 
                 </div>
-                )
             }
-        </Popup>
-        
+            inputFields={{
+                title : "Course Name",
+                description : "Course Description"
+            }}
+            changeHandler={handleChange}
+            confirmHandler={handleCreateCourse}
+        />
     }
 
     var courseList = [];