fix: added search logic to manage/group members

Author: Bilb

ts/components/dialog/UpdateGroupMembersDialog.tsx

@@ -32,6 +32,10 @@ import { useSelectedIsGroupV2 } from '../../state/selectors/selectedConversation
 import { SessionSpinner } from '../loading';
 import { SessionToggle } from '../basic/SessionToggle';
 import { localize } from '../../localization/localeTools';
+import { SessionSearchInput } from '../SessionSearchInput';
+import { NoGroupMembers } from '../search/NoResults';
+import { useContactsToInviteTo } from '../../hooks/useContactsToInviteToGroup';
+import { searchActions } from '../../state/ducks/search';
 
 type Props = {
   conversationId: string;
@@ -41,10 +45,35 @@ const StyledMemberList = styled.div`
   max-height: 240px;
 `;
 
-/**
- * Admins are always put first in the list of group members.
- * Also, admins have a little crown on their avatar.
- */
+function useSortedListOfMembers(convoId: string) {
+  const groupMembersLegacy = useSortedGroupMembers(convoId);
+  const groupMembers03Group = useStateOf03GroupMembers(convoId);
+  const isV2Group = useSelectedIsGroupV2();
+  const groupAdmins = useGroupAdmins(convoId);
+
+  const sortedMembersNon03 = useMemo(
+    () => [...groupMembersLegacy].sort(m => (groupAdmins?.includes(m) ? -1 : 0)),
+    [groupMembersLegacy, groupAdmins]
+  );
+  const sortedMembers = isV2Group ? groupMembers03Group.map(m => m.pubkeyHex) : sortedMembersNon03;
+
+  return sortedMembers;
+}
+
+const useFilteredSortedListOfMembers = (convoId: string) => {
+  const sortedMembers = useSortedListOfMembers(convoId);
+  const { contactsToInvite: globalSearchResults, searchTerm } =
+    useContactsToInviteTo('manage-group-members');
+
+  return useMemo(
+    () =>
+      !searchTerm || globalSearchResults === undefined
+        ? sortedMembers
+        : sortedMembers.filter(m => globalSearchResults.includes(m)),
+    [sortedMembers, globalSearchResults, searchTerm]
+  );
+};
+
 const MemberList = (props: {
   convoId: string;
   selectedMembers: Array<string>;
@@ -54,17 +83,8 @@ const MemberList = (props: {
   const { onSelect, convoId, onUnselect, selectedMembers } = props;
   const weAreAdmin = useWeAreAdmin(convoId);
   const isV2Group = useSelectedIsGroupV2();
-
   const groupAdmins = useGroupAdmins(convoId);
-  const groupMembersLegacy = useSortedGroupMembers(convoId);
-  const groupMembers03Group = useStateOf03GroupMembers(convoId);
-
-  const sortedMembersNon03 = useMemo(
-    () => [...groupMembersLegacy].sort(m => (groupAdmins?.includes(m) ? -1 : 0)),
-    [groupMembersLegacy, groupAdmins]
-  );
-
-  const sortedMembers = isV2Group ? groupMembers03Group.map(m => m.pubkeyHex) : sortedMembersNon03;
+  const sortedMembers = useFilteredSortedListOfMembers(convoId);
 
   return (
     <>
@@ -114,6 +134,7 @@ export const UpdateGroupMembersDialog = (props: Props) => {
 
   const closeDialog = () => {
     dispatch(updateGroupMembersModal(null));
+    dispatch(searchActions.clearSearch());
   };
 
   const onClickOK = async () => {
@@ -165,8 +186,6 @@ export const UpdateGroupMembersDialog = (props: Props) => {
     removeFrom(member);
   };
 
-  const showNoMembersMessage = existingMembers.length === 0;
-
   return (
     <SessionWrapperModal
       title={
@@ -194,15 +213,19 @@ export const UpdateGroupMembersDialog = (props: Props) => {
           </span>
         </>
       ) : null}
+      <SessionSearchInput searchType="manage-group-members" />
       <StyledMemberList className="contact-selection-list">
-        <MemberList
-          convoId={conversationId}
-          onSelect={onSelect}
-          onUnselect={onUnselect}
-          selectedMembers={membersToRemove}
-        />
+        {!existingMembers.length ? (
+          <NoGroupMembers />
+        ) : (
+          <MemberList
+            convoId={conversationId}
+            onSelect={onSelect}
+            onUnselect={onUnselect}
+            selectedMembers={membersToRemove}
+          />
+        )}
       </StyledMemberList>
-      {showNoMembersMessage && <p>{window.i18n('groupMembersNone')}</p>}
 
       <SpacerLG />
       <SessionSpinner loading={isProcessingUIChange} />

ts/components/search/NoResults.tsx

@@ -23,10 +23,18 @@ const StyledMemberListNoContacts = styled.div`
   padding: 20px;
 `;
 
-export function NoContacts() {
+function NoneAtStart({ token }: { token: 'contactNone' | 'groupMembersNone' }) {
   return (
     <StyledMemberListNoContacts>
-      <Localizer token="contactNone" />
+      <Localizer token={token} />
     </StyledMemberListNoContacts>
   );
 }
+
+export function NoContacts() {
+  return <NoneAtStart token="contactNone" />;
+}
+
+export function NoGroupMembers() {
+  return <NoneAtStart token="groupMembersNone" />;
+}

ts/state/ducks/search.ts

@@ -10,7 +10,7 @@ import { ReduxConversationType } from './conversations';
 import { localize } from '../../localization/localeTools';
 import { BlockedNumberController } from '../../util';
 
-export type SearchType = 'global' | 'create-group' | 'invite-contact-to';
+export type SearchType = 'global' | 'create-group' | 'invite-contact-to' | 'manage-group-members';
 
 export type SearchStateType = {
   /**