[#3] added event deletion to display

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;
       });
   },
 });