[#7] added MOVE support for changing calendar for event + missing tests for this PR

src/features/Calendars/CalendarSlice.ts

@@ -4,7 +4,7 @@ import { CalendarEvent } from "../Events/EventsTypes";
 import { getCalendar, getCalendars } from "./CalendarApi";
 import { getOpenPaasUser, getUserDetails } from "../User/userAPI";
 import { parseCalendarEvent } from "../Events/eventUtils";
-import { deleteEvent, putEvent } from "../Events/EventApi";
+import { deleteEvent, moveEvent, putEvent } from "../Events/EventApi";
 import { formatDateToYYYYMMDDTHHMMSS } from "../../utils/dateUtils";
 
 export const getCalendarsListAsync = createAsyncThunk<
@@ -92,6 +92,32 @@ export const putEventAsync = createAsyncThunk<
     events,
   };
 });
+export const moveEventAsync = createAsyncThunk<
+  { calId: string; events: CalendarEvent[] }, // Return type
+  { cal: Calendars; newEvent: CalendarEvent } // Arg type
+>("calendars/moveEvent", async ({ cal, newEvent }) => {
+  const response = await moveEvent(newEvent);
+  const calEvents = (await getCalendar(cal.id, {
+    start: formatDateToYYYYMMDDTHHMMSS(new Date(newEvent.start)),
+    end: formatDateToYYYYMMDDTHHMMSS(
+      new Date(new Date(newEvent.start).getTime() + 86400000)
+    ),
+  })) as Record<string, any>;
+  const events: CalendarEvent[] = calEvents._embedded["dav:item"].flatMap(
+    (eventdata: any) => {
+      const vevents = eventdata.data[2] as any[][];
+      const eventURL = eventdata._links.self.href;
+      return vevents.map((vevent: any[]) => {
+        return parseCalendarEvent(vevent[1], cal.color ?? "", cal.id, eventURL);
+      });
+    }
+  );
+
+  return {
+    calId: cal.id,
+    events,
+  };
+});
 
 export const deleteEventAsync = createAsyncThunk<
   { calId: string; eventId: string }, // Return type
@@ -207,6 +233,32 @@ const CalendarSlice = createSlice({
           });
         }
       )
+      .addCase(
+        moveEventAsync.fulfilled,
+        (
+          state,
+          action: PayloadAction<{ calId: string; events: CalendarEvent[] }>
+        ) => {
+          state.pending = false;
+          if (!state.list[action.payload.calId]) {
+            state.list[action.payload.calId] = {
+              id: action.payload.calId,
+              events: {},
+            } as Calendars;
+          }
+          action.payload.events.forEach((event) => {
+            state.list[action.payload.calId].events[event.uid] = event;
+          });
+          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;
+            state.list[action.payload.calId].events[id].timezone =
+              Intl.DateTimeFormat().resolvedOptions().timeZone;
+          });
+        }
+      )
       .addCase(deleteEventAsync.fulfilled, (state, action) => {
         state.pending = false;
         delete state.list[action.payload.calId].events[action.payload.eventId];
@@ -220,6 +272,9 @@ const CalendarSlice = createSlice({
       .addCase(putEventAsync.pending, (state) => {
         state.pending = true;
       })
+      .addCase(moveEventAsync.pending, (state) => {
+        state.pending = true;
+      })
       .addCase(deleteEventAsync.pending, (state) => {
         state.pending = true;
       });

src/features/Events/EventApi.ts

@@ -16,9 +16,19 @@ export async function putEvent(event: CalendarEvent) {
   return response;
 }
 
+export async function moveEvent(event: CalendarEvent) {
+  const response = await api(`dav${event.URL}`, {
+    method: "MOVE",
+    headers: {
+      destination: event.URL,
+    },
+  });
+  return response;
+}
+
 export async function deleteEvent(eventURL: string) {
   const response = await api(`dav${eventURL}`, {
     method: "DELETE",
-  }).json();
+  });
   return response;
 }

src/features/Events/EventDisplay.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
-import { deleteEventAsync, putEventAsync } from "../Calendars/CalendarSlice";
+import {
+  deleteEventAsync,
+  moveEventAsync,
+  putEventAsync,
+} from "../Calendars/CalendarSlice";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
 import {
@@ -86,7 +90,7 @@ export default function EventDisplayModal({
   const [alarm, setAlarm] = useState("");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
   const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
-
+  const [newCalId, setNewCalId] = useState(event.calId);
   const [calendarid, setCalendarid] = useState(
     event?.calId.split("/")[0] === user.userData.openpaasId
       ? userPersonnalCalendars.findIndex((cal) => cal.id === calId)
@@ -169,6 +173,12 @@ export default function EventDisplayModal({
         newEvent,
       })
     );
+
+    if (newCalId !== calId) {
+      dispatch(
+        moveEventAsync({ cal: userPersonnalCalendars[calendarid], newEvent })
+      );
+    }
     onClose({}, "backdropClick");
   };
 
@@ -279,9 +289,11 @@ export default function EventDisplayModal({
               labelId="calendar-select-label"
               value={calendarid.toString()}
               label="Calendar"
-              onChange={(e: SelectChangeEvent) =>
-                setCalendarid(Number(e.target.value))
-              }
+              onChange={(e: SelectChangeEvent) => {
+                const newId = Number(e.target.value);
+                setCalendarid(newId);
+                setNewCalId(userPersonnalCalendars[newId].id);
+              }}
             >
               {calList}
             </Select>
@@ -325,11 +337,6 @@ export default function EventDisplayModal({
                   const endDate = new Date(end);
                   const startDate = new Date(start);
                   setAllDay(!allday);
-                  console.log(
-                    endDate.getDate() === startDate.getDate(),
-                    endDate.getDate(),
-                    startDate.getDate()
-                  );
                   if (endDate.getDate() === startDate.getDate()) {
                     endDate.setDate(startDate.getDate() + 1);
                     setEnd(formatLocalDateTime(endDate));
@@ -390,7 +397,6 @@ export default function EventDisplayModal({
                     onClick={() => {
                       const newAttendeesList = [...attendees];
                       setAttendees(newAttendeesList.splice(idx, 1));
-                      console.log(attendees, newAttendeesList);
                     }}
                   >
                     <CloseIcon fontSize="small" />
@@ -496,18 +502,19 @@ export default function EventDisplayModal({
 
         <CardActions>
           <ButtonGroup>
-            <IconButton
-              size="small"
-              onClick={() => {
-                onClose({}, "backdropClick");
-                dispatch(
-                  deleteEventAsync({ calId, eventId, eventURL: event.URL })
-                );
-              }}
-            >
-              <DeleteIcon fontSize="small" />
-            </IconButton>
-
+            {isOwn && (
+              <IconButton
+                size="small"
+                onClick={() => {
+                  onClose({}, "backdropClick");
+                  dispatch(
+                    deleteEventAsync({ calId, eventId, eventURL: event.URL })
+                  );
+                }}
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            )}
             <Button size="small" onClick={() => setShowMore(!showMore)}>
               {showMore ? "Show Less" : "Show More"}
             </Button>

src/features/Events/EventDisplayPreview.tsx

@@ -324,13 +324,6 @@ function formatEnd(start: Date, end: Date, allday?: boolean) {
     startDate.getDate() === endDate.getDate();
 
   if (allday) {
-    console.log(
-      endDate.toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      })
-    );
     return sameDay
       ? null
       : endDate.toLocaleDateString(undefined, {

src/features/Events/EventModal.tsx

@@ -233,14 +233,8 @@ function EventPopover({
                 const endDate = new Date(end);
                 const startDate = new Date(start);
                 setAllDay(!allday);
-                console.log(
-                  endDate.getDate() === startDate.getDate(),
-                  endDate.getDate(),
-                  startDate.getDate()
-                );
                 if (endDate.getDate() === startDate.getDate()) {
                   endDate.setDate(startDate.getDate() + 1);
-                  console.log("formatedd", formatLocalDateTime(endDate));
                   setEnd(formatLocalDateTime(endDate));
                 }
 
@@ -258,7 +252,6 @@ function EventPopover({
                   ),
                   allDay: allday,
                 };
-                console.log(newRange, selectedRange);
                 setSelectedRange(newRange);
               }}
             />

src/features/Events/eventUtils.ts

@@ -126,11 +126,6 @@ export function calendarEventToJCal(event: CalendarEvent): any[] {
   ];
 
   if (event.end) {
-    console.log(
-      event.end,
-      event.start,
-      event.end.getTime() === event.start.getTime()
-    );
     if (event.allday && event.end.getTime() === event.start.getTime()) {
       event.end.setDate(event.start.getDate() + 1);
     }