1724 - Add MUI Modal open/close behavior

client/src/components/manageProjects/editMeetingTimes.jsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 import '../../sass/ManageProjects.scss';
 import { useSnackbar } from '../../context/snackbarContext';
 import EditableMeeting from './editableMeeting';
 import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
 import { addDurationToTime } from './utilities/addDurationToTime';
 import { timeConvertFromForm } from './utilities/timeConvertFromForm';
 import validateEventForm from './utilities/validateEventForm';
+import { Box, Button, Modal } from '@mui/material';
 
 // This component displays current meeting times for selected project and offers the option to edit those times.
 const EditMeetingTimes = ({
@@ -16,111 +17,140 @@ const EditMeetingTimes = ({
   updateRecurringEvent,
 }) => {
   const [formErrors, setFormErrors] = useState({});
+  const [open, setOpen] = useState(false);
   const { showSnackbar } = useSnackbar();
-  const handleEventUpdate = (
-    eventID,
-    values,
-    startTimeOriginal,
-    durationOriginal
-  ) => async () => {
-    const errors = validateEventForm(values, projectToEdit);
-    if (!errors) {
-      let theUpdatedEvent = {};
 
-      if (values.name) {
-        theUpdatedEvent = {
-          ...theUpdatedEvent,
-          name: values.name,
-        };
-      }
+  useEffect(() => {
+    if (selectedEvent) {
+      setOpen(true);
+    }
+  }, [selectedEvent]);
+
+  const handleClose = () => {
+    setOpen(false);
+    setFormErrors(null);
+    setSelectedEvent(null);
+  };
+
+  const handleEventUpdate =
+    (
+      eventID,
+      values,
+      // startTimeOriginal,
+      // durationOriginal
+    ) =>
+    async () => {
+      const errors = validateEventForm(values, projectToEdit);
+      if (!errors) {
+        let theUpdatedEvent = {};
+
+        if (values.name) {
+          theUpdatedEvent = {
+            ...theUpdatedEvent,
+            name: values.name,
+          };
+        }
+
+        if (values.eventType) {
+          theUpdatedEvent = {
+            ...theUpdatedEvent,
+            eventType: values.eventType,
+          };
+        }
 
-      if (values.eventType) {
         theUpdatedEvent = {
           ...theUpdatedEvent,
-          eventType: values.eventType,
+          description: values.description,
         };
-      }
 
-      theUpdatedEvent = {
-        ...theUpdatedEvent,
-        description: values.description,
-      };
+        if (values.videoConferenceLink) {
+          theUpdatedEvent = {
+            ...theUpdatedEvent,
+            videoConferenceLink: values.videoConferenceLink,
+          };
+        }
 
-      if (values.videoConferenceLink) {
+        // Set updated date to today and add it to the object
+        const updatedDate = new Date().toISOString();
         theUpdatedEvent = {
           ...theUpdatedEvent,
-          videoConferenceLink: values.videoConferenceLink,
+          updatedDate,
         };
-      }
 
-      // Set updated date to today and add it to the object
-      const updatedDate = new Date().toISOString();
-      theUpdatedEvent = {
-        ...theUpdatedEvent,
-        updatedDate,
-      };
+        // Find next occurance of Day in the future
+        // Assign new start time and end time
+        const date = findNextOccuranceOfDay(values.day);
+        const startTimeDate = timeConvertFromForm(date, values.startTime);
+        const endTime = addDurationToTime(startTimeDate, values.duration);
 
-      // Find next occurance of Day in the future
-      // Assign new start time and end time
-      const date = findNextOccuranceOfDay(values.day);
-      const startTimeDate = timeConvertFromForm(date, values.startTime);
-      const endTime = addDurationToTime(startTimeDate, values.duration);
+        // Revert timestamps to GMT
+        const startDateTimeGMT = new Date(startTimeDate).toISOString();
+        const endTimeGMT = new Date(endTime).toISOString();
 
-      // Revert timestamps to GMT
-      const startDateTimeGMT = new Date(startTimeDate).toISOString();
-      const endTimeGMT = new Date(endTime).toISOString();
-
-      theUpdatedEvent = {
-        ...theUpdatedEvent,
-        date: startDateTimeGMT,
-        startTime: startDateTimeGMT,
-        endTime: endTimeGMT,
-        duration: values.duration
-      };
+        theUpdatedEvent = {
+          ...theUpdatedEvent,
+          date: startDateTimeGMT,
+          startTime: startDateTimeGMT,
+          endTime: endTimeGMT,
+          duration: values.duration,
+        };
 
-      updateRecurringEvent(theUpdatedEvent, eventID);
-      showSnackbar("Recurring event updated", 'info')
-      setSelectedEvent(null);
-    }
-    setFormErrors(errors);
-  };
+        updateRecurringEvent(theUpdatedEvent, eventID);
+        showSnackbar('Recurring event updated', 'info');
+        handleClose();
+      }
+      setFormErrors(errors);
+    };
 
   const handleEventDelete = (eventID) => async () => {
     deleteRecurringEvent(eventID);
-    setSelectedEvent(null);
-    showSnackbar("Recurring event deleted", 'info');
+    showSnackbar('Recurring event deleted', 'info');
+    handleClose();
   };
 
   return (
-    <div>
-      <button
-        type="button"
-        className="meeting-cancel-button"
-        onClick={() => {
-          setFormErrors(null);
-          setSelectedEvent(null);
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="edit-meeting-modal-title"
+      aria-describedby="edit-meeting-modal-description"
+    >
+      <Box
+        className="modal-box"
+        sx={{
+          position: 'absolute',
+          top: '42%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 450,
+          bgcolor: 'background.paper',
+          border: '2px solid #000',
+          boxShadow: 24,
+          pt: 4,
+          px: 4,
+          pb: 0,
         }}
       >
-        X
-      </button>
-      {selectedEvent && (
-        <EditableMeeting
-          key={selectedEvent.event_id}
-          eventId={selectedEvent.event_id}
-          eventName={selectedEvent.name}
-          eventDescription={selectedEvent.description}
-          eventType={selectedEvent.eventType}
-          eventDayNumber={selectedEvent.dayOfTheWeekNumber}
-          eventStartTime={selectedEvent.startTime}
-          eventEndTime={selectedEvent.endTime}
-          eventDuration={selectedEvent.duration}
-          videoConferenceLink={selectedEvent.videoConferenceLink}
-          formErrors={formErrors}
-          handleEventUpdate={handleEventUpdate}
-          handleEventDelete={handleEventDelete}
-        />
-      )}
-    </div>
+        {selectedEvent && (
+          <EditableMeeting
+            key={selectedEvent.event_id}
+            eventId={selectedEvent.event_id}
+            eventName={selectedEvent.name}
+            eventDescription={selectedEvent.description}
+            eventType={selectedEvent.eventType}
+            eventDayNumber={selectedEvent.dayOfTheWeekNumber}
+            eventStartTime={selectedEvent.startTime}
+            eventEndTime={selectedEvent.endTime}
+            eventDuration={selectedEvent.duration}
+            videoConferenceLink={selectedEvent.videoConferenceLink}
+            formErrors={formErrors}
+            handleEventUpdate={handleEventUpdate}
+            handleEventDelete={handleEventDelete}
+          />
+        )}
+        <Button onClick={handleClose}>Close</Button>
+      </Box>
+    </Modal>
   );
 };
-export default EditMeetingTimes;
+export default EditMeetingTimes;