[#271] abort truly goes through when removing user in cal search (#295)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.tsx

@@ -211,6 +211,10 @@ export default function CalendarApp({
   const [prevTempCalendars, setPrevTempCalendars] = useState<string[]>([]);
   const [prevRangeKey, setPrevRangeKey] = useState<string>("");
 
+  const tempCalendarControllersRef = useRef<Map<string, AbortController>>(
+    new Map()
+  );
+
   useEffect(() => {
     updateCalsDetails(
       Object.keys(tempcalendars),
@@ -220,9 +224,21 @@ export default function CalendarApp({
       prevRangeKey,
       dispatch,
       calendarRange,
-      "temp"
+      "temp",
+      tempCalendarControllersRef.current
     );
 
+    prevTempCalendars.forEach((calId) => {
+      if (!Object.keys(tempcalendars).includes(calId)) {
+        const controller = tempCalendarControllersRef.current.get(calId);
+        if (controller) {
+          controller.abort();
+          tempCalendarControllersRef.current.delete(calId);
+        }
+        delete fetchedRangesRef.current[calId];
+      }
+    });
+
     setPrevTempCalendars(Object.keys(tempcalendars));
     setPrevRangeKey(rangeKey);
   }, [rangeKey, Object.keys(tempcalendars).join(","), pending]);

src/components/Calendar/utils/calendarUtils.ts

@@ -107,7 +107,8 @@ export const updateCalsDetails = (
   previousRangeKey: string,
   dispatch: Function,
   calendarRange: { start: Date; end: Date },
-  calType?: "temp"
+  calType?: "temp",
+  controllers?: Map<string, AbortController>
 ) => {
   if (pending || !rangeKey) return;
 
@@ -116,31 +117,65 @@ export const updateCalsDetails = (
   );
 
   newCalendars.forEach((id) => {
-    dispatch(
-      getCalendarDetailAsync({
-        calId: id,
-        match: {
-          start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
-          end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
-        },
-        calType,
-      })
-    );
+    if (controllers) {
+      const controller = new AbortController();
+      controllers.set(id, controller);
+
+      dispatch(
+        getCalendarDetailAsync({
+          calId: id,
+          match: {
+            start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+            end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+          },
+          calType,
+          signal: controller.signal,
+        })
+      );
+    } else {
+      dispatch(
+        getCalendarDetailAsync({
+          calId: id,
+          match: {
+            start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+            end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+          },
+          calType,
+        })
+      );
+    }
   });
 
   if (rangeKey !== previousRangeKey) {
     selectedCalendars?.forEach((id) => {
       if (id) {
-        dispatch(
-          getCalendarDetailAsync({
-            calId: id,
-            match: {
-              start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
-              end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
-            },
-            calType,
-          })
-        );
+        if (controllers) {
+          const controller = new AbortController();
+          controllers.set(id, controller);
+
+          dispatch(
+            getCalendarDetailAsync({
+              calId: id,
+              match: {
+                start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+                end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+              },
+              calType,
+              signal: controller.signal,
+            })
+          );
+        } else {
+          dispatch(
+            getCalendarDetailAsync({
+              calId: id,
+              match: {
+                start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+                end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+              },
+              calType,
+            })
+          );
+        }
       }
     });
   }