diff --git a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx index 54c94a2cdf..d93491e8f8 100644 --- a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx +++ b/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} /> diff --git a/webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx b/webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx index 23f6d84deb..730b0b766d 100644 --- a/webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx +++ b/webapp/channels/src/components/channel_members_rhs/channel_members_rhs.tsx @@ -51,7 +51,7 @@ export interface Props { actions: { openModal:
(modalData: ModalData
) => 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}); } - setList(listcp); + 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 (
diff --git a/webapp/channels/src/components/channel_members_rhs/member_list.tsx b/webapp/channels/src/components/channel_members_rhs/member_list.tsx index 5589f98a55..bf339b2562 100644 --- a/webapp/channels/src/components/channel_members_rhs/member_list.tsx +++ b/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; - }; + openDirectMessage: (user: UserProfile) => void; + loadMore: () => void; } const MemberList = ({ @@ -33,7 +30,8 @@ const MemberList = ({ members, searchTerms, editing, - actions, + openDirectMessage, + loadMore, }: Props) => { const infiniteLoaderRef = useRef