Search call links in calls tab

ts/state/ducks/calling.ts

@@ -31,7 +31,7 @@ import type {
   PresentedSource,
   PresentableSource,
 } from '../../types/Calling';
-import type { CallLinkStateType } from '../../types/CallLink';
+import type { CallLinkStateType, CallLinkType } from '../../types/CallLink';
 import {
   CALLING_REACTIONS_LIFETIME,
   MAX_CALLING_REACTIONS,
@@ -174,15 +174,8 @@ export type AdhocCallsType = {
   [roomId: string]: GroupCallStateType;
 };
 
-export type CallLinksByRoomIdStateType = ReadonlyDeep<
-  CallLinkStateType & {
-    rootKey: string;
-    adminKey: string | null;
-  }
->;
-
 export type CallLinksByRoomIdType = ReadonlyDeep<{
-  [roomId: string]: CallLinksByRoomIdStateType;
+  [roomId: string]: CallLinkType;
 }>;
 
 // eslint-disable-next-line local-rules/type-alias-readonlydeep
@@ -244,8 +237,7 @@ type GroupCallStateChangeActionPayloadType =
   };
 
 type HandleCallLinkUpdateActionPayloadType = ReadonlyDeep<{
-  roomId: string;
-  callLinkDetails: CallLinksByRoomIdStateType;
+  callLink: CallLinkType;
 }>;
 
 type HangUpActionPayloadType = ReadonlyDeep<{
@@ -384,6 +376,7 @@ type StartCallLinkLobbyPayloadType = {
   peekInfo?: GroupCallPeekInfoType;
   remoteParticipants: Array<GroupCallParticipantInfoType>;
   callLinkState: CallLinkStateType;
+  callLinkRoomId: string;
   callLinkRootKey: string;
 };
 
@@ -1333,10 +1326,11 @@ function handleCallLinkUpdate(
       'revoked',
     ]);
 
-    const callLinkDetails: CallLinksByRoomIdStateType = {
+    const callLink: CallLinkType = {
       ...CALL_LINK_DEFAULT_STATE,
       ...existingCallLinkState,
       ...freshCallLinkState,
+      roomId,
       rootKey,
       adminKey,
     };
@@ -1352,19 +1346,13 @@ function handleCallLinkUpdate(
         log.info(`${logId}: Updated existing call link state`);
       }
     } else {
-      await dataInterface.insertCallLink({
-        roomId,
-        ...callLinkDetails,
-      });
+      await dataInterface.insertCallLink(callLink);
       log.info(`${logId}: Saved new call link`);
     }
 
     dispatch({
       type: HANDLE_CALL_LINK_UPDATE,
-      payload: {
-        roomId,
-        callLinkDetails,
-      },
+      payload: { callLink },
     });
   };
 }
@@ -2006,6 +1994,7 @@ const _startCallLinkLobby = async ({
     payload: {
       ...callLobbyData,
       callLinkState,
+      callLinkRoomId: roomId,
       callLinkRootKey: rootKey,
       conversationId: roomId,
       isConversationTooBigToRing: false,
@@ -2415,6 +2404,9 @@ export function reducer(
               ...callLinks,
               [conversationId]: {
                 ...action.payload.callLinkState,
+                roomId:
+                  callLinks[conversationId]?.roomId ??
+                  action.payload.callLinkRoomId,
                 rootKey:
                   callLinks[conversationId]?.rootKey ??
                   action.payload.callLinkRootKey,
@@ -3355,13 +3347,14 @@ export function reducer(
 
   if (action.type === HANDLE_CALL_LINK_UPDATE) {
     const { callLinks } = state;
-    const { roomId, callLinkDetails } = action.payload;
+    const { callLink } = action.payload;
+    const { roomId } = callLink;
 
     return {
       ...state,
       callLinks: {
         ...callLinks,
-        [roomId]: callLinkDetails,
+        [roomId]: callLink,
       },
     };
   }

ts/state/selectors/calling.ts

@@ -79,17 +79,13 @@ export type CallLinkSelectorType = (roomId: string) => CallLinkType | undefined;
 export const getCallLinkSelector = createSelector(
   getCallLinksByRoomId,
   (callLinksByRoomId: CallLinksByRoomIdType): CallLinkSelectorType =>
-    (roomId: string): CallLinkType | undefined => {
-      const callLinkState = getOwn(callLinksByRoomId, roomId);
-      if (!callLinkState) {
-        return;
-      }
+    (roomId: string): CallLinkType | undefined =>
+      getOwn(callLinksByRoomId, roomId)
+);
 
-      return {
-        roomId,
-        ...callLinkState,
-      };
-    }
+export const getAllCallLinks = createSelector(
+  getCallLinksByRoomId,
+  (lookup): Array<CallLinkType> => Object.values(lookup)
 );
 
 export type CallSelectorType = (

ts/state/smart/CallsTab.tsx

@@ -28,6 +28,7 @@ import { useCallingActions } from '../ducks/calling';
 import {
   getActiveCallState,
   getAdhocCallSelector,
+  getAllCallLinks,
   getCallSelector,
   getCallLinkSelector,
 } from '../selectors/calling';
@@ -36,41 +37,67 @@ import { getCallHistoryEdition } from '../selectors/callHistory';
 import { getHasPendingUpdate } from '../selectors/updates';
 import { getHasAnyFailedStorySends } from '../selectors/stories';
 import { getOtherTabsUnreadStats } from '../selectors/nav';
+import type { CallLinkType } from '../../types/CallLink';
+import { filterCallLinks } from '../../util/filterCallLinks';
 
-function getCallHistoryFilter(
-  allConversations: Array<ConversationType>,
-  regionCode: string | undefined,
-  options: CallHistoryFilterOptions
-): CallHistoryFilter | null {
+function getCallHistoryFilter({
+  allCallLinks,
+  allConversations,
+  regionCode,
+  options,
+}: {
+  allConversations: Array<ConversationType>;
+  allCallLinks: Array<CallLinkType>;
+  regionCode: string | undefined;
+  options: CallHistoryFilterOptions;
+}): CallHistoryFilter | null {
+  const { status } = options;
   const query = options.query.normalize().trim();
 
-  if (query !== '') {
-    const currentConversations = allConversations.filter(conversation => {
-      return conversation.removalStage == null;
-    });
-
-    const filteredConversations = filterAndSortConversations(
-      currentConversations,
-      query,
-      regionCode
-    );
-
-    // If there are no matching conversations, then no calls will match.
-    if (filteredConversations.length === 0) {
-      return null;
-    }
-
+  if (query === '') {
     return {
-      status: options.status,
-      conversationIds: filteredConversations.map(conversation => {
-        return conversation.id;
-      }),
+      status,
+      callLinkRoomIds: null,
+      conversationIds: null,
     };
   }
 
+  let callLinkRoomIds = null;
+  let conversationIds = null;
+
+  const currentConversations = allConversations.filter(conversation => {
+    return conversation.removalStage == null;
+  });
+
+  const filteredConversations = filterAndSortConversations(
+    currentConversations,
+    query,
+    regionCode
+  );
+
+  if (filteredConversations.length > 0) {
+    conversationIds = filteredConversations.map(conversation => {
+      return conversation.id;
+    });
+  }
+
+  const filteredCallLinks = filterCallLinks(allCallLinks, query);
+  if (filteredCallLinks.length > 0) {
+    callLinkRoomIds = filteredCallLinks.map(callLink => {
+      return callLink.roomId;
+    });
+  }
+
+  // If the search query resulted in no matching call links or conversations, then
+  // no calls will match.
+  if (callLinkRoomIds == null && conversationIds == null) {
+    return null;
+  }
+
   return {
-    status: options.status,
-    conversationIds: null,
+    status,
+    callLinkRoomIds,
+    conversationIds,
   };
 }
 
@@ -99,6 +126,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
   const { savePreferredLeftPaneWidth, toggleNavTabsCollapse } =
     useItemsActions();
 
+  const allCallLinks = useSelector(getAllCallLinks);
   const allConversations = useSelector(getAllConversations);
   const regionCode = useSelector(getRegionCode);
   const getConversation = useSelector(getConversationSelector);
@@ -129,11 +157,12 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
 
   const getCallHistoryGroupsCount = useCallback(
     async (options: CallHistoryFilterOptions) => {
-      const callHistoryFilter = getCallHistoryFilter(
+      const callHistoryFilter = getCallHistoryFilter({
+        allCallLinks,
         allConversations,
         regionCode,
-        options
-      );
+        options,
+      });
       if (callHistoryFilter == null) {
         return 0;
       }
@@ -142,7 +171,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
       );
       return count;
     },
-    [allConversations, regionCode]
+    [allCallLinks, allConversations, regionCode]
   );
 
   const getCallHistoryGroups = useCallback(
@@ -150,11 +179,12 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
       options: CallHistoryFilterOptions,
       pagination: CallHistoryPagination
     ) => {
-      const callHistoryFilter = getCallHistoryFilter(
+      const callHistoryFilter = getCallHistoryFilter({
+        allCallLinks,
         allConversations,
         regionCode,
-        options
-      );
+        options,
+      });
       if (callHistoryFilter == null) {
         return [];
       }
@@ -164,7 +194,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
       );
       return results;
     },
-    [allConversations, regionCode]
+    [allCallLinks, allConversations, regionCode]
   );
 
   useEffect(() => {