Fix calls tab clearing clicking on old calls

ts/components/CallsList.tsx

@@ -111,6 +111,7 @@ type CallsListProps = Readonly<{
     options: CallHistoryFilterOptions,
     pagination: CallHistoryPagination
   ) => Promise<Array<CallHistoryGroup>>;
+  callHistoryEdition: number;
   getConversation: (id: string) => ConversationType | void;
   i18n: LocalizerType;
   selectedCallHistoryGroup: CallHistoryGroup | null;
@@ -139,6 +140,7 @@ export function CallsList({
   hasActiveCall,
   getCallHistoryGroupsCount,
   getCallHistoryGroups,
+  callHistoryEdition,
   getConversation,
   i18n,
   selectedCallHistoryGroup,
@@ -154,6 +156,14 @@ export function CallsList({
 
   const prevOptionsRef = useRef<CallHistoryFilterOptions | null>(null);
 
+  const getCallHistoryGroupsCountRef = useRef(getCallHistoryGroupsCount);
+  const getCallHistoryGroupsRef = useRef(getCallHistoryGroups);
+
+  useEffect(() => {
+    getCallHistoryGroupsCountRef.current = getCallHistoryGroupsCount;
+    getCallHistoryGroupsRef.current = getCallHistoryGroups;
+  }, [getCallHistoryGroupsCount, getCallHistoryGroups]);
+
   useEffect(() => {
     const controller = new AbortController();
 
@@ -180,8 +190,8 @@ export function CallsList({
 
       try {
         const [count, items] = await Promise.all([
-          getCallHistoryGroupsCount(options),
+          getCallHistoryGroupsCountRef.current(options),
-          getCallHistoryGroups(options, {
+          getCallHistoryGroupsRef.current(options, {
             offset: 0,
             limit: 100, // preloaded rows
           }),
@@ -226,7 +236,7 @@ export function CallsList({
     return () => {
       controller.abort();
     };
-  }, [getCallHistoryGroupsCount, getCallHistoryGroups, queryInput, status]);
+  }, [queryInput, status, callHistoryEdition]);
 
   const loadMoreRows = useCallback(
     async (props: IndexRange) => {
@@ -250,7 +260,10 @@ export function CallsList({
       const limit = stopIndex - startIndex + 1;
 
       try {
-        const groups = await getCallHistoryGroups(options, { offset, limit });
+        const groups = await getCallHistoryGroupsRef.current(options, {
+          offset,
+          limit,
+        });
 
         if (searchState.options !== options) {
           return;
@@ -275,7 +288,7 @@ export function CallsList({
         log.error('CallsList#loadMoreRows error fetching', error);
       }
     },
-    [getCallHistoryGroups, searchState]
+    [searchState]
   );
 
   const isRowLoaded = useCallback(

ts/components/CallsTab.tsx

@@ -34,6 +34,7 @@ type CallsTabProps = Readonly<{
     options: CallHistoryFilterOptions,
     pagination: CallHistoryPagination
   ) => Promise<Array<CallHistoryGroup>>;
+  callHistoryEdition: number;
   getConversation: (id: string) => ConversationType | void;
   hasFailedStorySends: boolean;
   hasPendingUpdate: boolean;
@@ -59,6 +60,7 @@ export function CallsTab({
   otherTabsUnreadStats,
   getCallHistoryGroupsCount,
   getCallHistoryGroups,
+  callHistoryEdition,
   getConversation,
   hasFailedStorySends,
   hasPendingUpdate,
@@ -221,6 +223,7 @@ export function CallsTab({
               hasActiveCall={activeCall != null}
               getCallHistoryGroupsCount={getCallHistoryGroupsCount}
               getCallHistoryGroups={getCallHistoryGroups}
+              callHistoryEdition={callHistoryEdition}
               getConversation={getConversation}
               i18n={i18n}
               selectedCallHistoryGroup={selected?.callHistoryGroup ?? null}

ts/state/ducks/callHistory.ts

@@ -187,6 +187,7 @@ export function reducer(
     case CALL_HISTORY_ADD:
       return {
         ...state,
+        edition: state.edition + 1,
         callHistoryByCallId: {
           ...state.callHistoryByCallId,
           [action.payload.callId]: action.payload,
@@ -195,6 +196,7 @@ export function reducer(
     case CALL_HISTORY_REMOVE:
       return {
         ...state,
+        edition: state.edition + 1,
         callHistoryByCallId: omit(state.callHistoryByCallId, action.payload),
       };
     case CALL_HISTORY_UPDATE_UNREAD:

ts/state/smart/CallsTab.tsx

@@ -110,8 +110,6 @@ export function SmartCallsTab(): JSX.Element {
 
   const getCallHistoryGroupsCount = useCallback(
     async (options: CallHistoryFilterOptions) => {
-      // Used to fire effects when all calls are erased
-      void callHistoryEdition;
       const callHistoryFilter = getCallHistoryFilter(
         allConversations,
         regionCode,
@@ -125,7 +123,7 @@ export function SmartCallsTab(): JSX.Element {
       );
       return count;
     },
-    [allConversations, regionCode, callHistoryEdition]
+    [allConversations, regionCode]
   );
 
   const getCallHistoryGroups = useCallback(
@@ -133,8 +131,6 @@ export function SmartCallsTab(): JSX.Element {
       options: CallHistoryFilterOptions,
       pagination: CallHistoryPagination
     ) => {
-      // Used to fire effects when all calls are erased
-      void callHistoryEdition;
       const callHistoryFilter = getCallHistoryFilter(
         allConversations,
         regionCode,
@@ -149,7 +145,7 @@ export function SmartCallsTab(): JSX.Element {
       );
       return results;
     },
-    [allConversations, regionCode, callHistoryEdition]
+    [allConversations, regionCode]
   );
 
   useEffect(() => {
@@ -164,6 +160,7 @@ export function SmartCallsTab(): JSX.Element {
       getConversation={getConversation}
       getCallHistoryGroupsCount={getCallHistoryGroupsCount}
       getCallHistoryGroups={getCallHistoryGroups}
+      callHistoryEdition={callHistoryEdition}
       hasFailedStorySends={hasFailedStorySends}
       hasPendingUpdate={hasPendingUpdate}
       i18n={i18n}

ts/util/lint/exceptions.json

@@ -3086,6 +3086,20 @@
     "reasonCategory": "usageTrusted",
     "updated": "2023-08-18T19:09:30.283Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/CallsList.tsx",
+    "line": "  const getCallHistoryGroupsCountRef = useRef(getCallHistoryGroupsCount);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-11-27T20:25:10.634Z"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/CallsList.tsx",
+    "line": "  const getCallHistoryGroupsRef = useRef(getCallHistoryGroups);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-11-27T20:25:10.634Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/CaptchaDialog.tsx",