Merge branch 'MAILWEB-3599-duplicate-email-stale' into 'main'

[MAILWEB-3599] Hotfix duplicate email when Stale 1

See merge request web/clients!3473

Changelog: 

4 files changed, 29 insertions, 17 deletions

diff --git a/applications/mail/src/app/hooks/mailbox/useApplyEncryptedSearch.ts b/applications/mail/src/app/hooks/mailbox/useApplyEncryptedSearch.ts
index d85b5ab4be..544c61c86f 100644
--- a/applications/mail/src/app/hooks/mailbox/useApplyEncryptedSearch.ts
+++ b/applications/mail/src/app/hooks/mailbox/useApplyEncryptedSearch.ts
@@ -54,7 +54,7 @@ export const useApplyEncryptedSearch = ({
     const esDBStatus = getESDBStatus();
     const { esEnabled } = esDBStatus;
 
-    const params = { labelID, page, conversationMode, sort, filter, search, esEnabled };
+    const params = { labelID, conversationMode, sort, filter, search, esEnabled };
 
     const isES = useSelector((state: RootState) => isESSelector(state, { search, esDBStatus }));
     const shouldSendRequest = useSelector((state: RootState) => shouldSendRequestSelector(state, { page, params }));
diff --git a/applications/mail/src/app/hooks/mailbox/useElements.ts b/applications/mail/src/app/hooks/mailbox/useElements.ts
index d1f8a02e38..a1518529fc 100644
--- a/applications/mail/src/app/hooks/mailbox/useElements.ts
+++ b/applications/mail/src/app/hooks/mailbox/useElements.ts
@@ -85,7 +85,7 @@ export const useElements: UseElements = ({ conversationMode, labelID, search, pa
 
     const globalCache = useCache();
 
-    const params = { labelID, conversationMode, page, sort, filter, search, esEnabled };
+    const params = { labelID, conversationMode, sort, filter, search, esEnabled };
     const counts = { counts: countValues, loading: countsLoading };
 
     const stateParams = useSelector(paramsSelector);
diff --git a/applications/mail/src/app/logic/elements/elementsActions.ts b/applications/mail/src/app/logic/elements/elementsActions.ts
index a6665ff94f..f12aa04866 100644
--- a/applications/mail/src/app/logic/elements/elementsActions.ts
+++ b/applications/mail/src/app/logic/elements/elementsActions.ts
@@ -1,6 +1,7 @@
 import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
 
 import { moveAll as moveAllRequest, queryMessageMetadata } from '@proton/shared/lib/api/messages';
+import isDeepEqual from '@proton/shared/lib/helpers/isDeepEqual';
 import { Api } from '@proton/shared/lib/interfaces';
 import diff from '@proton/utils/diff';
 import noop from '@proton/utils/noop';
@@ -54,7 +55,11 @@ export const load = createAsyncThunk<{ result: QueryResults; taskRunning: TaskRu
             const ms = 1000 * REFRESHES[count];
             // Wait few seconds before retrying
             setTimeout(() => {
-                void dispatch(load({ api, call, page, params, abortController, conversationMode, count: count + 1 }));
+                if (isDeepEqual((getState() as RootState).elements.params, params)) {
+                    void dispatch(
+                        load({ api, call, page, params, abortController, conversationMode, count: count + 1 })
+                    );
+                }
             }, ms);
         }
         const taskLabels = Object.keys(result.TasksRunning || {});
diff --git a/applications/mail/src/app/logic/elements/elementsReducers.ts b/applications/mail/src/app/logic/elements/elementsReducers.ts
index 47318ea41e..9ff548ce19 100644
--- a/applications/mail/src/app/logic/elements/elementsReducers.ts
+++ b/applications/mail/src/app/logic/elements/elementsReducers.ts
@@ -52,12 +52,18 @@ export const retry = (
     state.retry = newRetry(state.retry, action.payload.queryParameters, action.payload.error);
 };
 
+const hasSameMode = (state: Draft<ElementsState>, arg: QueryParams) => {
+    return state.params.conversationMode === arg.params.conversationMode;
+};
+
 export const loadPending = (
     state: Draft<ElementsState>,
     action: PayloadAction<undefined, string, { arg: QueryParams }>
 ) => {
-    state.pendingRequest = true;
-    state.page = action.meta.arg.page;
+    if (hasSameMode(state, action.meta.arg)) {
+        state.pendingRequest = true;
+        state.page = action.meta.arg.page;
+    }
 };
 
 export const loadFulfilled = (
@@ -69,18 +75,19 @@ export const loadFulfilled = (
         result: { Total, Elements },
         taskRunning,
     } = action.payload;
-
-    Object.assign(state, {
-        beforeFirstLoad: false,
-        invalidated: false,
-        pendingRequest: false,
-        page,
-        total: Total,
-        retry: newRetry(state.retry, params, undefined),
-    });
-    state.pages.push(page);
-    Object.assign(state.elements, toMap(Elements, 'ID'));
-    state.taskRunning = taskRunning;
+    if (hasSameMode(state, action.meta.arg)) {
+        Object.assign(state, {
+            beforeFirstLoad: false,
+            invalidated: false,
+            pendingRequest: false,
+            page,
+            total: Total,
+            retry: newRetry(state.retry, params, undefined),
+        });
+        state.pages.push(page);
+        Object.assign(state.elements, toMap(Elements, 'ID'));
+        state.taskRunning = taskRunning;
+    }
 };
 
 export const manualPending = (state: Draft<ElementsState>) => {