Skip to content

Commit c59853c

Browse files
bconti123bconti123
authored
Merge pull request #1965 from adam-abundis/1703-migrate-editproject-mui
refactor(edit-project): Standardize MUI & Fix Modal Ripples (#1703)
2 parents d3b2018 + 447c4ba commit c59853c

File tree

4 files changed

+467
-402
lines changed

4 files changed

+467
-402
lines changed

‎client/src/components/manageProjects/createNewEvent.jsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -84,17 +84,6 @@ const CreateNewEvent = ({
8484
};
8585
return (
8686
<div>
87-
<button
88-
type="button"
89-
className="meeting-cancel-button"
90-
onClick={() => {
91-
setFormValues(initialFormValues);
92-
setFormErrors(null);
93-
setIsCreateNew(false);
94-
}}
95-
>
96-
X
97-
</button>
9887
<EventForm
9988
handleInputChange={handleInputChange}
10089
formValues={formValues}

‎client/src/components/manageProjects/editMeetingTimes.jsx‎

Lines changed: 68 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
66
import { addDurationToTime } from './utilities/addDurationToTime';
77
import { timeConvertFromForm } from './utilities/timeConvertFromForm';
88
import validateEventForm from './utilities/validateEventForm';
9-
import { Box, Button, Modal } from '@mui/material';
109

1110
// This component displays current meeting times for selected project and offers the option to edit those times.
1211
const EditMeetingTimes = ({
@@ -17,76 +16,76 @@ const EditMeetingTimes = ({
1716
updateRecurringEvent,
1817
}) => {
1918
const [formErrors, setFormErrors] = useState({});
20-
const open = Boolean(selectedEvent);
2119
const { showSnackbar } = useSnackbar();
2220

2321
const handleClose = () => {
2422
setFormErrors(null);
2523
setSelectedEvent(null);
2624
};
2725

28-
const handleEventUpdate = (eventID, values) => async () => {
29-
const errors = validateEventForm(values, projectToEdit);
30-
if (!errors) {
31-
let theUpdatedEvent = {};
26+
const handleEventUpdate =
27+
(eventID, values, startTimeOriginal, durationOriginal) => async () => {
28+
const errors = validateEventForm(values, projectToEdit);
29+
if (!errors) {
30+
let theUpdatedEvent = {};
3231

33-
if (values.name) {
34-
theUpdatedEvent = {
35-
...theUpdatedEvent,
36-
name: values.name,
37-
};
38-
}
32+
if (values.name) {
33+
theUpdatedEvent = {
34+
...theUpdatedEvent,
35+
name: values.name,
36+
};
37+
}
38+
39+
if (values.eventType) {
40+
theUpdatedEvent = {
41+
...theUpdatedEvent,
42+
eventType: values.eventType,
43+
};
44+
}
3945

40-
if (values.eventType) {
4146
theUpdatedEvent = {
4247
...theUpdatedEvent,
43-
eventType: values.eventType,
48+
description: values.description,
4449
};
45-
}
4650

47-
theUpdatedEvent = {
48-
...theUpdatedEvent,
49-
description: values.description,
50-
};
51+
if (values.videoConferenceLink) {
52+
theUpdatedEvent = {
53+
...theUpdatedEvent,
54+
videoConferenceLink: values.videoConferenceLink,
55+
};
56+
}
5157

52-
if (values.videoConferenceLink) {
58+
// Set updated date to today and add it to the object
59+
const updatedDate = new Date().toISOString();
5360
theUpdatedEvent = {
5461
...theUpdatedEvent,
55-
videoConferenceLink: values.videoConferenceLink,
62+
updatedDate,
5663
};
57-
}
5864

59-
// Set updated date to today and add it to the object
60-
const updatedDate = new Date().toISOString();
61-
theUpdatedEvent = {
62-
...theUpdatedEvent,
63-
updatedDate,
64-
};
65+
// Find next occurance of Day in the future
66+
// Assign new start time and end time
67+
const date = findNextOccuranceOfDay(values.day);
68+
const startTimeDate = timeConvertFromForm(date, values.startTime);
69+
const endTime = addDurationToTime(startTimeDate, values.duration);
6570

66-
// Find next occurrence of Day in the future
67-
// Assign new start time and end time
68-
const date = findNextOccuranceOfDay(values.day);
69-
const startTimeDate = timeConvertFromForm(date, values.startTime);
70-
const endTime = addDurationToTime(startTimeDate, values.duration);
71+
// Revert timestamps to GMT
72+
const startDateTimeGMT = new Date(startTimeDate).toISOString();
73+
const endTimeGMT = new Date(endTime).toISOString();
7174

72-
// Revert timestamps to GMT
73-
const startDateTimeGMT = new Date(startTimeDate).toISOString();
74-
const endTimeGMT = new Date(endTime).toISOString();
75-
76-
theUpdatedEvent = {
77-
...theUpdatedEvent,
78-
date: startDateTimeGMT,
79-
startTime: startDateTimeGMT,
80-
endTime: endTimeGMT,
81-
duration: values.duration,
82-
};
75+
theUpdatedEvent = {
76+
...theUpdatedEvent,
77+
date: startDateTimeGMT,
78+
startTime: startDateTimeGMT,
79+
endTime: endTimeGMT,
80+
duration: values.duration,
81+
};
8382

84-
updateRecurringEvent(theUpdatedEvent, eventID);
85-
showSnackbar('Recurring event updated', 'info');
86-
handleClose();
87-
}
88-
setFormErrors(errors);
89-
};
83+
updateRecurringEvent(theUpdatedEvent, eventID);
84+
showSnackbar('Recurring event updated', 'info');
85+
handleClose();
86+
}
87+
setFormErrors(errors);
88+
};
9089

9190
const handleEventDelete = (eventID) => async () => {
9291
deleteRecurringEvent(eventID);
@@ -95,43 +94,25 @@ const EditMeetingTimes = ({
9594
};
9695

9796
return (
98-
<Modal open={open} onClose={handleClose}>
99-
<Box
100-
className="modal-box"
101-
sx={{
102-
position: 'absolute',
103-
top: '42%',
104-
left: '50%',
105-
transform: 'translate(-50%, -50%)',
106-
width: 450,
107-
bgcolor: 'background.paper',
108-
border: '2px solid #000',
109-
boxShadow: 24,
110-
pt: 4,
111-
px: 4,
112-
pb: 0,
113-
}}
114-
>
115-
{selectedEvent && (
116-
<EditableMeeting
117-
key={selectedEvent.event_id}
118-
eventId={selectedEvent.event_id}
119-
eventName={selectedEvent.name}
120-
eventDescription={selectedEvent.description}
121-
eventType={selectedEvent.eventType}
122-
eventDayNumber={selectedEvent.dayOfTheWeekNumber}
123-
eventStartTime={selectedEvent.startTime}
124-
eventEndTime={selectedEvent.endTime}
125-
eventDuration={selectedEvent.duration}
126-
videoConferenceLink={selectedEvent.videoConferenceLink}
127-
formErrors={formErrors}
128-
handleEventUpdate={handleEventUpdate}
129-
handleEventDelete={handleEventDelete}
130-
/>
131-
)}
132-
<Button onClick={handleClose}>Close</Button>
133-
</Box>
134-
</Modal>
97+
<div>
98+
{selectedEvent && (
99+
<EditableMeeting
100+
key={selectedEvent.event_id}
101+
eventId={selectedEvent.event_id}
102+
eventName={selectedEvent.name}
103+
eventDescription={selectedEvent.description}
104+
eventType={selectedEvent.eventType}
105+
eventDayNumber={selectedEvent.dayOfTheWeekNumber}
106+
eventStartTime={selectedEvent.startTime}
107+
eventEndTime={selectedEvent.endTime}
108+
eventDuration={selectedEvent.duration}
109+
videoConferenceLink={selectedEvent.videoConferenceLink}
110+
formErrors={formErrors}
111+
handleEventUpdate={handleEventUpdate}
112+
handleEventDelete={handleEventDelete}
113+
/>
114+
)}
115+
</div>
135116
);
136117
};
137118
export default EditMeetingTimes;

0 commit comments

Comments
 (0)