From 2ad41dc4f5d4935c836af76d2dc7b8e9517610d1 Mon Sep 17 00:00:00 2001 From: Camille Moussu Date: Fri, 25 Jul 2025 15:29:40 +0200 Subject: [PATCH] [#3] added event deletion to display --- src/components/Calendar/Calendar.tsx | 16 ++++++------ src/features/Calendars/CalendarSlice.ts | 20 ++++++++++++++- src/features/Events/EventApi.ts | 4 +-- src/features/Events/EventDisplay.tsx | 33 ++++++++++++++----------- src/features/Events/EventModal.tsx | 2 +- 5 files changed, 50 insertions(+), 25 deletions(-) diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 93c9a3b..aa7bff2 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -308,13 +308,15 @@ export default function CalendarApp() { open={Boolean(anchorElCal)} onClose={() => setAnchorElCal(null)} /> - + {openEventDisplay && eventDisplayedId && eventDisplayedCalId && ( + + )} ); diff --git a/src/features/Calendars/CalendarSlice.ts b/src/features/Calendars/CalendarSlice.ts index 9385665..5809f06 100644 --- a/src/features/Calendars/CalendarSlice.ts +++ b/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 // 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, 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; }); }, }); diff --git a/src/features/Events/EventApi.ts b/src/features/Events/EventApi.ts index 02c35ee..87cd76c 100644 --- a/src/features/Events/EventApi.ts +++ b/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", } diff --git a/src/features/Events/EventDisplay.tsx b/src/features/Events/EventDisplay.tsx index eb8df5f..3c830da 100644 --- a/src/features/Events/EventDisplay.tsx +++ b/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({ - + { + onClose({}, "backdropClick"); + dispatch(deleteEventAsync({ calId, eventId })); + }} + > person.cal_address === `mailto:${user.userData.email}` + (person) => person.cal_address === user.userData.email ) && ( diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx index c9f828a..2674abe 100644 --- a/src/features/Events/EventModal.tsx +++ b/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,