[#168] added refresh to temp calendars when updating

src/features/Calendars/CalendarSlice.ts

@@ -422,6 +422,11 @@ const CalendarSlice = createSlice({
     removeTempCal: (state, action: PayloadAction<string>) => {
       delete state.templist[action.payload];
     },
+    emptyTempCal: (state) => {
+      Object.keys(state.templist).forEach(
+        (calId) => (state.templist[calId].events = {})
+      );
+    },
     updateEventLocal: (
       state,
       action: PayloadAction<{ calId: string; event: CalendarEvent }>
@@ -702,6 +707,7 @@ export const {
   createCalendar,
   updateEventLocal,
   removeTempCal,
+  emptyTempCal,
   setTimeZone,
   clearFetchCache,
 } = CalendarSlice.actions;

src/features/Events/EventDisplayPreview.tsx

@@ -36,8 +36,12 @@ import {
   handleRSVP,
 } from "../../components/Event/eventHandlers/eventHandlers";
 import { InfoRow } from "../../components/Event/InfoRow";
-import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
+import {
+  refreshCalendars,
+  renderAttendeeBadge,
+} from "../../components/Event/utils/eventUtils";
 import { getTimezoneOffset } from "../../components/Calendar/TimezoneSelector";
+import { getCalendarRange } from "../../utils/dateUtils";
 export default function EventPreviewModal({
   eventId,
   calId,
@@ -110,6 +114,18 @@ export default function EventPreviewModal({
     (a) => a.cal_address === event.organizer?.cal_address
   );
 
+  const updateTempList = () => {
+    if (calendars.templist) {
+      const calendarRange = getCalendarRange(new Date(event.start));
+      refreshCalendars(
+        dispatch,
+        Object.values(calendars.templist),
+        calendarRange,
+        "temp"
+      );
+    }
+  };
+
   return (
     <>
       <ResponsiveDialog
@@ -143,25 +159,26 @@ export default function EventPreviewModal({
                       <FileDownloadOutlinedIcon />
                     </IconButton>
                   )}
-                  {user.userData.email === event.organizer?.cal_address && (
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        if (isRecurring) {
-                          setAfterChoiceFunc(() => () => {
+                  {user.userData.email === event.organizer?.cal_address &&
+                    calendar.ownerEmails?.includes(user.userData.email) && (
+                      <IconButton
+                        size="small"
+                        onClick={() => {
+                          if (isRecurring) {
+                            setAfterChoiceFunc(() => () => {
+                              setHidePreview(true);
+                              setOpenUpdateModal(true);
+                            });
+                            setOpenEditModePopup("edit");
+                          } else {
                             setHidePreview(true);
                             setOpenUpdateModal(true);
-                          });
-                          setOpenEditModePopup("edit");
-                        } else {
-                          setHidePreview(true);
-                          setOpenUpdateModal(true);
-                        }
-                      }}
-                    >
-                      <EditIcon />
-                    </IconButton>
-                  )}
+                          }
+                        }}
+                      >
+                        <EditIcon />
+                      </IconButton>
+                    )}
                   <IconButton
                     size="small"
                     onClick={(e) => setToggleActionMenu(e.currentTarget)}
@@ -190,7 +207,7 @@ export default function EventPreviewModal({
                     <EventDuplication event={event} onClose={onClose} />
                     {user.userData.email === event.organizer?.cal_address && (
                       <MenuItem
-                        onClick={() => {
+                        onClick={async () => {
                           if (isRecurring) {
                             setAfterChoiceFunc(
                               () =>
@@ -209,7 +226,7 @@ export default function EventPreviewModal({
                             setOpenEditModePopup("edit");
                           } else {
                             onClose({}, "backdropClick");
-                            dispatch(
+                            await dispatch(
                               deleteEventAsync({
                                 calId,
                                 eventId,
@@ -217,6 +234,7 @@ export default function EventPreviewModal({
                               })
                             );
                           }
+                          updateTempList();
                         }}
                       >
                         Delete event

src/features/Events/EventModal.tsx

@@ -48,6 +48,8 @@ import {
   getTimezoneOffset,
   resolveTimezone,
 } from "../../components/Calendar/TimezoneSelector";
+import { getCalendarRange } from "../../utils/dateUtils";
+import { refreshCalendars } from "../../components/Event/utils/eventUtils";
 
 // Helper component for field with label
 const FieldWithLabel = React.memo(
@@ -123,6 +125,7 @@ function EventPopover({
   const organizer = useAppSelector((state) => state.user.organiserData);
   const userId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
+  const tempList = useAppSelector((state) => state.calendars.templist);
   const selectPersonnalCalendars = createSelector(
     (state) => state.calendars,
     (calendars) =>
@@ -398,12 +401,21 @@ function EventPopover({
     resetAllStateToDefault();
 
     // Save to API in background
-    dispatch(
+    await dispatch(
       putEventAsync({
         cal: userPersonnalCalendars[calendarid],
         newEvent,
       })
     );
+    if (tempList) {
+      const calendarRange = getCalendarRange(new Date(start));
+      refreshCalendars(
+        dispatch,
+        Object.values(tempList),
+        calendarRange,
+        "temp"
+      );
+    }
   };
 
   const dialogActions = (

src/features/Events/EventUpdateModal.tsx

@@ -1,12 +1,6 @@
 import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import React, {
-  useEffect,
-  useState,
-  useMemo,
-  useCallback,
-  useRef,
-} from "react";
+import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { ResponsiveDialog } from "../../components/Dialog";
 import {
@@ -56,7 +50,7 @@ function EventUpdateModal({
   typeOfAction?: "solo" | "all";
 }) {
   const dispatch = useAppDispatch();
-
+  const tempList = useAppSelector((state) => state.calendars.templist);
   // Get event from Redux store (cached data) as fallback
   const cachedEvent = useAppSelector(
     (state) => state.calendars.list[calId]?.events[eventId]
@@ -482,7 +476,15 @@ function EventUpdateModal({
         console.error("Failed to convert recurring to non-recurring:", err);
         // Keep modal open on error, user can retry or cancel
       }
-
+      if (tempList) {
+        const calendarRange = getCalendarRange(new Date(start));
+        refreshCalendars(
+          dispatch,
+          Object.values(tempList),
+          calendarRange,
+          "temp"
+        );
+      }
       return;
     }
 
@@ -502,7 +504,7 @@ function EventUpdateModal({
           })
         );
 
-        dispatch(
+        await dispatch(
           updateEventInstanceAsync({
             cal: targetCalendar,
             event: { ...newEvent, recurrenceId },
@@ -590,7 +592,7 @@ function EventUpdateModal({
           });
 
           // Update server in background with removeOverrides=false
-          dispatch(
+          await dispatch(
             updateSeriesAsync({
               cal: targetCalendar,
               event: { ...newEvent, recurrenceId },
@@ -622,7 +624,7 @@ function EventUpdateModal({
         const oldEventUID = event.uid;
 
         // API call: putEventAsync will create recurring event and fetch all instances
-        dispatch(putEventAsync({ cal: targetCalendar, newEvent }))
+        await dispatch(putEventAsync({ cal: targetCalendar, newEvent }))
           .unwrap()
           .then(() => {
             // Remove old single event AFTER new recurring instances are added to store
@@ -639,13 +641,13 @@ function EventUpdateModal({
           });
       } else {
         // Normal non-recurring event update
-        dispatch(putEventAsync({ cal: targetCalendar, newEvent }));
+        await dispatch(putEventAsync({ cal: targetCalendar, newEvent }));
       }
     }
 
     // Handle calendar change
     if (newCalId !== calId) {
-      dispatch(
+      await dispatch(
         moveEventAsync({
           cal: targetCalendar,
           newEvent,
@@ -654,6 +656,15 @@ function EventUpdateModal({
       );
       dispatch(removeEvent({ calendarUid: calId, eventUid: event.uid }));
     }
+    if (tempList) {
+      const calendarRange = getCalendarRange(new Date(start));
+      refreshCalendars(
+        dispatch,
+        Object.values(tempList),
+        calendarRange,
+        "temp"
+      );
+    }
   };
 
   const dialogActions = (