From 55dca745c756688e3c2d32b2c003eec8775bffb0 Mon Sep 17 00:00:00 2001 From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:07:13 -0800 Subject: [PATCH] Fix calls tab clearing clicking on old calls --- ts/components/CallsList.tsx | 23 ++++++++++++++++++----- ts/components/CallsTab.tsx | 3 +++ ts/state/ducks/callHistory.ts | 2 ++ ts/state/smart/CallsTab.tsx | 9 +++------ ts/util/lint/exceptions.json | 14 ++++++++++++++ 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/ts/components/CallsList.tsx b/ts/components/CallsList.tsx index ca8aa8702ff3..e2782ba206f0 100644 --- a/ts/components/CallsList.tsx +++ b/ts/components/CallsList.tsx @@ -111,6 +111,7 @@ type CallsListProps = Readonly<{ options: CallHistoryFilterOptions, pagination: CallHistoryPagination ) => Promise>; + 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(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), - getCallHistoryGroups(options, { + getCallHistoryGroupsCountRef.current(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( diff --git a/ts/components/CallsTab.tsx b/ts/components/CallsTab.tsx index 06970f772052..37bdadea782d 100644 --- a/ts/components/CallsTab.tsx +++ b/ts/components/CallsTab.tsx @@ -34,6 +34,7 @@ type CallsTabProps = Readonly<{ options: CallHistoryFilterOptions, pagination: CallHistoryPagination ) => Promise>; + 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} diff --git a/ts/state/ducks/callHistory.ts b/ts/state/ducks/callHistory.ts index 10d94b0257cd..3fc3fd70aea0 100644 --- a/ts/state/ducks/callHistory.ts +++ b/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: diff --git a/ts/state/smart/CallsTab.tsx b/ts/state/smart/CallsTab.tsx index 9f017b5b8eec..7fcc5313d9f9 100644 --- a/ts/state/smart/CallsTab.tsx +++ b/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} diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 13b63c56373b..77eef614b2bd 100644 --- a/ts/util/lint/exceptions.json +++ b/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",