[#168] added refresh to temp calendars when updating

src/components/Calendar/CalendarLayout.tsx

@@ -1,44 +1,39 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Menubar, MenubarProps } from "../Menubar/Menubar";
 import CalendarApp from "./Calendar";
 import { useAppDispatch } from "../../app/hooks";
-import {
-  getCalendarDetailAsync,
-  getCalendarsListAsync,
-} from "../../features/Calendars/CalendarSlice";
-import {
-  formatDateToYYYYMMDDTHHMMSS,
-  getCalendarRange,
-} from "../../utils/dateUtils";
+import { getCalendarRange } from "../../utils/dateUtils";
 import { useAppSelector } from "../../app/hooks";
+import { refreshCalendars } from "../Event/utils/eventUtils";
 
 export default function CalendarLayout() {
   const calendarRef = useRef<any>(null);
   const dispatch = useAppDispatch();
   const selectedCalendars = useAppSelector((state) => state.calendars.list);
+  const tempcalendars = useAppSelector((state) => state.calendars.templist);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
 
   const handleRefresh = async () => {
-    await dispatch(getCalendarsListAsync());
-
     // Get current calendar range
     if (calendarRef.current) {
       const view = calendarRef.current.view;
       const calendarRange = getCalendarRange(view.activeStart);
 
       // Refresh events for selected calendars
-      Object.keys(selectedCalendars).forEach((id) => {
-        dispatch(
-          getCalendarDetailAsync({
-            calId: id,
-            match: {
-              start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
-              end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
-            },
-          })
+      await refreshCalendars(
+        dispatch,
+        Object.values(selectedCalendars),
+        calendarRange
+      );
+      if (tempcalendars) {
+        await refreshCalendars(
+          dispatch,
+          Object.values(tempcalendars),
+          calendarRange,
+          "temp"
         );
-      });
+      }
     }
   };
 

src/components/Calendar/handlers/eventHandlers.ts

@@ -106,7 +106,7 @@ export const createEventHandlers = (props: EventHandlersProps) => {
     return true;
   };
 
-  const handleEventDrop = (arg: any) => {
+  const handleEventDrop = async (arg: any) => {
     if (!arg.event || !arg.event._def || !arg.event._def.extendedProps) {
       return;
     }
@@ -136,7 +136,7 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       setAfterChoiceFunc(
         () => async (typeOfAction: "solo" | "all" | undefined) => {
           if (typeOfAction === "solo") {
-            dispatch(
+            await dispatch(
               updateEventInstanceAsync({ cal: calendar, event: newEvent })
             );
             dispatch(
@@ -159,16 +159,34 @@ export const createEventHandlers = (props: EventHandlersProps) => {
               Object.values(calendars),
               calendarRange
             );
+            if (tempcalendars) {
+              await refreshCalendars(
+                dispatch,
+                Object.values(tempcalendars),
+                calendarRange,
+                "temp"
+              );
+            }
           }
         }
       );
     } else {
       dispatch(updateEventLocal({ calId: newEvent.calId, event: newEvent }));
-      dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+      await dispatch(
+        putEventAsync({ cal: calendars[newEvent.calId], newEvent })
+      );
+    }
+    if (tempcalendars) {
+      await refreshCalendars(
+        dispatch,
+        Object.values(tempcalendars),
+        calendarRange,
+        "temp"
+      );
     }
   };
 
-  const handleEventResize = (arg: any) => {
+  const handleEventResize = async (arg: any) => {
     if (!arg.event || !arg.event._def || !arg.event._def.extendedProps) {
       return;
     }
@@ -201,7 +219,7 @@ export const createEventHandlers = (props: EventHandlersProps) => {
       setAfterChoiceFunc(
         () => async (typeOfAction: "solo" | "all" | undefined) => {
           if (typeOfAction === "solo") {
-            dispatch(
+            await dispatch(
               updateEventInstanceAsync({ cal: calendar, event: newEvent })
             );
             dispatch(
@@ -225,11 +243,29 @@ export const createEventHandlers = (props: EventHandlersProps) => {
               Object.values(calendars),
               calendarRange
             );
+            if (tempcalendars) {
+              await refreshCalendars(
+                dispatch,
+                Object.values(tempcalendars),
+                calendarRange,
+                "temp"
+              );
+            }
           }
         }
       );
     } else {
-      dispatch(putEventAsync({ cal: calendars[newEvent.calId], newEvent }));
+      await dispatch(
+        putEventAsync({ cal: calendars[newEvent.calId], newEvent })
+      );
+    }
+    if (tempcalendars) {
+      await refreshCalendars(
+        dispatch,
+        Object.values(tempcalendars),
+        calendarRange,
+        "temp"
+      );
     }
   };
 

src/components/Event/utils/eventUtils.tsx

@@ -6,6 +6,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { ThunkDispatch } from "@reduxjs/toolkit";
 import {
+  emptyTempCal,
   getCalendarDetailAsync,
   getCalendarsListAsync,
 } from "../../../features/Calendars/CalendarSlice";
@@ -114,9 +115,11 @@ export function stringAvatar(name: string) {
 export async function refreshCalendars(
   dispatch: ThunkDispatch<any, any, any>,
   calendars: Calendars[],
-  calendarRange: { start: Date; end: Date }
+  calendarRange: { start: Date; end: Date },
+  calType?: "temp"
 ) {
-  await dispatch(getCalendarsListAsync());
+  !calType && (await dispatch(getCalendarsListAsync()));
+  calType && dispatch(emptyTempCal());
 
   calendars.map(
     async (cal) =>
@@ -127,6 +130,7 @@ export async function refreshCalendars(
             start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
             end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
           },
+          calType,
         })
       )
   );