Fix calls tab clearing clicking on old calls

This commit is contained in:
Jamie Kyle 2023-11-27 14:07:13 -08:00 committed by GitHub
parent c3248be854
commit 55dca745c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 11 deletions

View file

@ -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),
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(

View file

@ -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}

View file

@ -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:

View file

@ -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}

View file

@ -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",