diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js
--- a/web/chat/chat-message-list-container.react.js
+++ b/web/chat/chat-message-list-container.react.js
@@ -2,7 +2,6 @@
import classNames from 'classnames';
import invariant from 'invariant';
-import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react';
import { useDrop } from 'react-dnd';
import { NativeTypes } from 'react-dnd-html5-backend';
@@ -28,46 +27,14 @@
function ChatMessageListContainer(props: Props): React.Node {
const { activeChatThreadID } = props;
- const {
- isChatCreation,
- selectedUserIDs,
- otherUserInfos,
- userInfoInputArray,
- } = useInfosForPendingThread();
+ const { isChatCreation, selectedUserInfos, otherUserInfos } =
+ useInfosForPendingThread();
const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID);
invariant(threadInfo, 'ThreadInfo should be set');
const dispatch = useDispatch();
- // The effect removes members from list in navInfo
- // if some of the user IDs don't exist in redux store
- React.useEffect(() => {
- if (!isChatCreation) {
- return;
- }
- const existingSelectedUsersSet = new Set(
- userInfoInputArray.map(userInfo => userInfo.id),
- );
- if (
- selectedUserIDs?.length !== existingSelectedUsersSet.size ||
- !_isEqual(new Set(selectedUserIDs), existingSelectedUsersSet)
- ) {
- dispatch({
- type: updateNavInfoActionType,
- payload: {
- selectedUserList: Array.from(existingSelectedUsersSet),
- },
- });
- }
- }, [
- dispatch,
- isChatCreation,
- otherUserInfos,
- selectedUserIDs,
- userInfoInputArray,
- ]);
-
React.useEffect(() => {
if (isChatCreation && activeChatThreadID !== threadInfo?.id) {
let payload = {
@@ -158,14 +125,14 @@
}
const chatUserSelection = (
);
- if (!userInfoInputArray.length) {
+ if (!selectedUserInfos.length) {
return chatUserSelection;
}
return (
@@ -179,8 +146,8 @@
inputState,
isChatCreation,
otherUserInfos,
+ selectedUserInfos,
threadInfo,
- userInfoInputArray,
]);
return connectDropTarget(
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -1,5 +1,7 @@
// @flow
+
import classNames from 'classnames';
+import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react';
import { useDispatch } from 'react-redux';
@@ -57,12 +59,11 @@
const userListItemsWithENSNames = useENSNames(userListItems);
const onSelectUserFromSearch = React.useCallback(
- (id: string) => {
- const selectedUserIDs = userInfoInputArray.map(user => user.id);
+ (user: AccountUserInfo) => {
dispatch({
type: updateNavInfoActionType,
payload: {
- selectedUserList: [...selectedUserIDs, id],
+ selectedUserList: [...userInfoInputArray, user],
},
});
setUsernameInputText('');
@@ -71,15 +72,17 @@
);
const onRemoveUserFromSelected = React.useCallback(
- (id: string) => {
- const selectedUserIDs = userInfoInputArray.map(user => user.id);
- if (!selectedUserIDs.includes(id)) {
+ (userID: string) => {
+ const newSelectedUserList = userInfoInputArray.filter(
+ ({ id }) => userID !== id,
+ );
+ if (_isEqual(userInfoInputArray)(newSelectedUserList)) {
return;
}
dispatch({
type: updateNavInfoActionType,
payload: {
- selectedUserList: selectedUserIDs.filter(userID => userID !== id),
+ selectedUserList: newSelectedUserList,
},
});
},
@@ -102,23 +105,27 @@
}
const userItems = userListItemsWithENSNames.map(
- (userSearchResult: UserListItem) => (
-
-