MM-52944: Fix profile popover view issue on RHS when searching channel member (#23930)

webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {useIntl} from 'react-intl';
 import {useHistory} from 'react-router-dom';
@@ -91,13 +91,13 @@ function NotificationFromMembersModal(props: Props) {
         };
     });
 
-    const openDirectMessage = async (user: UserProfile) => {
+    const openDirectMessage = useCallback(async (user: UserProfile) => {
         // we first prepare the DM channel...
         await dispatch(openDirectChannelToUserId(user.id));
 
         // ... and then redirect to it
         history.push(teamUrl + '/messages/@' + user.username);
-    };
+    }, [openDirectChannelToUserId, history, teamUrl]);
 
     const handleOnClose = () => {
         dispatch(closeModal(ModalIdentifiers.SUM_OF_MEMBERS_MODAL));
@@ -131,7 +131,8 @@ function NotificationFromMembersModal(props: Props) {
                     members={members}
                     searchTerms={''}
                     editing={false}
-                    actions={{openDirectMessage, loadMore}}
+                    openDirectMessage={openDirectMessage}
+                    loadMore={loadMore}
                     hasNextPage={false}
                     isNextPageLoading={false}
                 />

webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx

@@ -51,7 +51,7 @@ export interface Props {
 
     actions: {
         openModal: <P>(modalData: ModalData<P>) => void;
-        openDirectChannelToUserId: (userId: string) => Promise<{ data: Channel }>;
+        openDirectChannelToUserId: (userId: string) => Promise<{data: Channel}>;
         closeRightHandSide: () => void;
         goBack: () => void;
         setChannelMembersRhsSearchTerm: (terms: string) => void;
@@ -150,7 +150,9 @@ export default function ChannelMembersRHS({
 
             listcp.push({type: ListItemType.Member, data: member});
         }
+        if (JSON.stringify(list) !== JSON.stringify(listcp)) {
             setList(listcp);
+        }
     }, [channelMembers]);
 
     useEffect(() => {
@@ -200,7 +202,7 @@ export default function ChannelMembersRHS({
         });
     };
 
-    const openDirectMessage = async (user: UserProfile) => {
+    const openDirectMessage = useCallback(async (user: UserProfile) => {
         // we first prepare the DM channel...
         await actions.openDirectChannelToUserId(user.id);
 
@@ -208,16 +210,17 @@ export default function ChannelMembersRHS({
         history.push(teamUrl + '/messages/@' + user.username);
 
         await actions.closeRightHandSide();
-    };
+    }, [actions.openDirectChannelToUserId, history, teamUrl, actions.closeRightHandSide]);
 
-    const loadMore = async () => {
+    const loadMore = useCallback(async () => {
         setIsNextPageLoading(true);
 
         await actions.loadProfilesAndReloadChannelMembers(page + 1, USERS_PER_PAGE, channel.id, ProfilesInChannelSortBy.Admin);
         setPage(page + 1);
 
         setIsNextPageLoading(false);
-    };
+    }, [actions.loadProfilesAndReloadChannelMembers, page, channel.id],
+    );
 
     return (
         <div
@@ -281,7 +284,8 @@ export default function ChannelMembersRHS({
                         members={list}
                         editing={editing}
                         channel={channel}
-                        actions={{openDirectMessage, loadMore}}
+                        openDirectMessage={openDirectMessage}
+                        loadMore={loadMore}
                         hasNextPage={channelMembers.length < membersCount}
                         isNextPageLoading={isNextPageLoading}
                     />

webapp/channels/src/components/channel_members_rhs/member_list.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useRef, useState} from 'react';
+import React, {memo, useEffect, useRef, useState} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {VariableSizeList, ListChildComponentProps} from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -19,11 +19,8 @@ export interface Props {
     hasNextPage: boolean;
     isNextPageLoading: boolean;
     searchTerms: string;
-
-    actions: {
     openDirectMessage: (user: UserProfile) => void;
     loadMore: () => void;
-    };
 }
 
 const MemberList = ({
@@ -33,7 +30,8 @@ const MemberList = ({
     members,
     searchTerms,
     editing,
-    actions,
+    openDirectMessage,
+    loadMore,
 }: Props) => {
     const infiniteLoaderRef = useRef<InfiniteLoader | null>(null);
     const variableSizeListRef = useRef<VariableSizeList | null>(null);
@@ -53,7 +51,7 @@ const MemberList = ({
 
     const itemCount = hasNextPage ? members.length + 1 : members.length;
 
-    const loadMoreItems = isNextPageLoading ? () => {} : actions.loadMore;
+    const loadMoreItems = isNextPageLoading ? () => {} : loadMore;
 
     const isItemLoaded = (index: number) => {
         return !hasNextPage || index < members.length;
@@ -91,7 +89,7 @@ const MemberList = ({
                             totalUsers={members.length}
                             member={member}
                             editing={editing}
-                            actions={{openDirectMessage: actions.openDirectMessage}}
+                            actions={{openDirectMessage}}
                         />
                     </div>
                 );
@@ -149,4 +147,4 @@ const MemberList = ({
     );
 };
 
-export default MemberList;
+export default memo(MemberList);