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

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

__test__/features/Calendars/CalendarSlice.test.tsx

@@ -330,7 +330,15 @@ describe("CalendarSlice", () => {
     it("getCalendarDetailAsync.fulfilled adds calendar events", () => {
       const payload = { calId: "c1", events: [{ uid: "e1" }] as any[] };
       const state = reducer(
-        initialState,
+        {
+          ...initialState,
+          list: {
+            ["c1"]: {
+              id: "c1",
+              events: {},
+            } as unknown as Calendars,
+          },
+        },
         getCalendarDetailAsync.fulfilled(payload, "req11", {
           calId: "c1",
           match: { start: "", end: "" },

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,
+            })
+          );
+        }
       }
     });
   }

src/features/Calendars/CalendarApi.ts

@@ -2,13 +2,15 @@ import { api } from "../../utils/apiUtils";
 
 export async function getCalendars(
   userId: string,
-  scope: string = "personal=true&sharedDelegationStatus=accepted&sharedPublicSubscription=true&withRights=true"
+  scope: string = "personal=true&sharedDelegationStatus=accepted&sharedPublicSubscription=true&withRights=true",
+  signal?: AbortSignal
 ) {
   const calendars = await api
     .get(`dav/calendars/${userId}.json?${scope}`, {
       headers: {
         Accept: "application/calendar+json",
       },
+      signal,
     })
     .json();
   return calendars;
@@ -16,7 +18,8 @@ export async function getCalendars(
 
 export async function getCalendar(
   id: string,
-  match: { start: string; end: string }
+  match: { start: string; end: string },
+  signal?: AbortSignal
 ) {
   const response = await api(`dav/calendars/${id}.json`, {
     method: "REPORT",
@@ -26,6 +29,7 @@ export async function getCalendar(
     body: JSON.stringify({
       match,
     }),
+    signal,
   });
   const calendar = await response.json();
   return calendar;

src/features/Calendars/CalendarSlice.ts

@@ -171,13 +171,21 @@ export const getTempCalendarsListAsync = createAsyncThunk<
 
 export const getCalendarDetailAsync = createAsyncThunk<
   { calId: string; events: CalendarEvent[]; calType?: string },
-  { calId: string; match: { start: string; end: string }; calType?: string },
+  {
+    calId: string;
+    match: { start: string; end: string };
+    calType?: string;
+    signal?: AbortSignal;
+  },
   { rejectValue: RejectedError }
 >(
   "calendars/getCalendarDetails",
-  async ({ calId, match, calType }, { rejectWithValue }) => {
+  async ({ calId, match, calType, signal }, { rejectWithValue }) => {
     try {
-      const calendar = (await getCalendar(calId, match)) as Record<string, any>;
+      const calendar = (await getCalendar(calId, match, signal)) as Record<
+        string,
+        any
+      >;
       const color = calendar["apple:color"];
       const events: CalendarEvent[] = calendar._embedded["dav:item"].flatMap(
         (eventdata: any) => {
@@ -736,10 +744,7 @@ const CalendarSlice = createSlice({
           const type = action.payload.calType === "temp" ? "templist" : "list";
 
           if (!state[type][action.payload.calId]) {
-            state[type][action.payload.calId] = {
-              id: action.payload.calId,
-              events: {},
-            } as Calendars;
+            return;
           }
           action.payload.events.forEach((event) => {
             state[type][action.payload.calId].events[event.uid] = event;
@@ -998,6 +1003,12 @@ const CalendarSlice = createSlice({
       })
       .addCase(getTempCalendarsListAsync.rejected, (state, action) => {
         state.pending = false;
+        if (
+          action.payload?.message.includes("aborted") ||
+          action.error.name === "AbortError"
+        ) {
+          return;
+        }
         state.error =
           action.payload?.message ||
           action.error.message ||
@@ -1005,6 +1016,12 @@ const CalendarSlice = createSlice({
       })
       .addCase(getCalendarDetailAsync.rejected, (state, action) => {
         state.pending = false;
+        if (
+          action.payload?.message.includes("aborted") ||
+          action.error.name === "AbortError"
+        ) {
+          return;
+        }
         state.error =
           action.payload?.message ||
           action.error.message ||

src/utils/apiUtils.ts

@@ -11,9 +11,8 @@ export const api = ky.extend({
           : null;
         const access_token = saved?.access_token;
 
-        const modifiedRequest = new Request(request);
-        modifiedRequest.headers.set("Authorization", `Bearer ${access_token}`);
-        return modifiedRequest;
+        request.headers.set("Authorization", `Bearer ${access_token}`);
+        return request;
       },
     ],
     afterResponse: [