[#3] added event deletion to display

src/components/Calendar/Calendar.tsx

@@ -308,13 +308,15 @@ export default function CalendarApp() {
           open={Boolean(anchorElCal)}
           onClose={() => setAnchorElCal(null)}
         />
-        <EventDisplayModal
-          open={openEventDisplay}
-          onClose={handleCloseEventDisplay}
-          anchorEl={anchorElEventDisplay}
-          eventId={eventDisplayedId}
-          calId={eventDisplayedCalId}
-        />
+        {openEventDisplay && eventDisplayedId && eventDisplayedCalId && (
+          <EventDisplayModal
+            eventId={eventDisplayedId}
+            calId={eventDisplayedCalId}
+            anchorEl={anchorElEventDisplay}
+            open={openEventDisplay}
+            onClose={handleCloseEventDisplay}
+          />
+        )}
       </div>
     </main>
   );

src/features/Calendars/CalendarSlice.ts

@@ -4,8 +4,9 @@ import { CalendarEvent } from "../Events/EventsTypes";
 import { getCalendar, getCalendars } from "./CalendarApi";
 import getOpenPaasUserId from "../User/userAPI";
 import { parseCalendarEvent } from "../Events/eventUtils";
-import { putEvent } from "../Events/EventApi";
+import { deleteEvent, putEvent } from "../Events/EventApi";
 import { formatDateToYYYYMMDDTHHMMSS } from "../../utils/dateUtils";
+import { responsiveFontSizes } from "@mui/material";
 
 export const getCalendarsListAsync = createAsyncThunk<
   Record<string, Calendars> // Return type
@@ -75,6 +76,14 @@ export const putEventAsync = createAsyncThunk<
   };
 });
 
+export const deleteEventAsync = createAsyncThunk<
+  { calId: string; eventId: string }, // Return type
+  { calId: string; eventId: string } // Arg type
+>("calendars/delEvent", async ({ calId, eventId }) => {
+  const response = await deleteEvent(calId, eventId);
+  return { calId, eventId };
+});
+
 const CalendarSlice = createSlice({
   name: "calendars",
   initialState: { list: {} as Record<string, Calendars>, pending: false },
@@ -160,9 +169,15 @@ const CalendarSlice = createSlice({
           Object.keys(state.list[action.payload.calId].events).forEach((id) => {
             state.list[action.payload.calId].events[id].color =
               state.list[action.payload.calId].color;
+            state.list[action.payload.calId].events[id].calId =
+              action.payload.calId;
           });
         }
       )
+      .addCase(deleteEventAsync.fulfilled, (state, action) => {
+        state.pending = false;
+        delete state.list[action.payload.calId].events[action.payload.eventId];
+      })
       .addCase(getCalendarDetailAsync.pending, (state) => {
         state.pending = true;
       })
@@ -171,6 +186,9 @@ const CalendarSlice = createSlice({
       })
       .addCase(putEventAsync.pending, (state) => {
         state.pending = true;
+      })
+      .addCase(deleteEventAsync.pending, (state) => {
+        state.pending = true;
       });
   },
 });

src/features/Events/EventApi.ts

@@ -5,7 +5,7 @@ import { calendarEventToJCal } from "./eventUtils";
 
 export async function putEvent(cal: Calendars, event: CalendarEvent) {
   const response = await api(
-    `dav/calendars/${cal.id}/${event.uid.split(".")[0]}.isc`,
+    `dav/calendars/${cal.id}/${event.uid.split("/")[0]}.isc`,
     {
       method: "PUT",
       body: JSON.stringify(calendarEventToJCal(event)),
@@ -19,7 +19,7 @@ export async function putEvent(cal: Calendars, event: CalendarEvent) {
 
 export async function deleteEvent(calId: string, eventId: string) {
   const response = await api(
-    `dav/calendars/${calId}/${eventId.split(".")[0]}.isc`,
+    `dav/calendars/${calId}/${eventId.split("/")[0]}.isc`,
     {
       method: "DELETE",
     }

src/features/Events/EventDisplay.tsx

@@ -1,30 +1,20 @@
-import React, { useEffect, useState } from "react";
-import { addEvent } from "../Calendars/CalendarSlice";
-import { CalendarEvent } from "./EventsTypes";
-import { DateSelectArg } from "@fullcalendar/core";
+import { useEffect, useState } from "react";
+import { deleteEventAsync } from "../Calendars/CalendarSlice";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   Popover,
-  TextField,
   Button,
   Box,
   Typography,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-  Avatar,
   ButtonGroup,
   Card,
   CardContent,
   Divider,
   IconButton,
 } from "@mui/material";
-import EventModal from "./EventModal";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
 import CloseIcon from "@mui/icons-material/Close";
-import VisibilityIcon from "@mui/icons-material/Visibility";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import VideocamIcon from "@mui/icons-material/Videocam";
@@ -45,6 +35,7 @@ function EventDisplayModal({
   onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
 }) {
   if (calId && eventId) {
+    const dispatch = useAppDispatch();
     const calendar = useAppSelector((state) => state.calendars.list[calId]);
     const event = useAppSelector(
       (state) => state.calendars.list[calId].events[eventId]
@@ -53,6 +44,14 @@ function EventDisplayModal({
     const [showAllAttendees, setShowAllAttendees] = useState(false);
     const attendeeDisplayLimit = 3;
 
+    useEffect(() => {
+      if (!event || !calendar) {
+        onClose({}, "backdropClick");
+      }
+    }, [event, calendar, onClose]);
+
+    if (!event || !calendar) return null;
+
     const visibleAttendees = showAllAttendees
       ? event.attendee
       : event.attendee.slice(0, attendeeDisplayLimit);
@@ -73,7 +72,13 @@ function EventDisplayModal({
             <IconButton size="small">
               <EditIcon fontSize="small" />
             </IconButton>
-            <IconButton size="small">
+            <IconButton
+              size="small"
+              onClick={() => {
+                onClose({}, "backdropClick");
+                dispatch(deleteEventAsync({ calId, eventId }));
+              }}
+            >
               <DeleteIcon fontSize="small" />
             </IconButton>
             <IconButton
@@ -187,7 +192,7 @@ function EventDisplayModal({
 
             {/* Attendance options */}
             {event.attendee.find(
-              (person) => person.cal_address === `mailto:${user.userData.email}`
+              (person) => person.cal_address === user.userData.email
             ) && (
               <Box>
                 <Typography variant="body2" sx={{ mb: 1 }}>

src/features/Events/EventModal.tsx

@@ -70,7 +70,7 @@ function EventPopover({
 
   const handleSave = async () => {
     const newEvent: CalendarEvent = {
-      calId: calendarid,
+      calId: userPersonnalCalendars[calendarid].id,
       title,
       start: new Date(start),
       allday,