Differential D8011 Diff 27741 web/chat/chat-thread-composer.react.js

Changeset View

Standalone View

web/chat/chat-thread-composer.react.js

// @flow		// @flow

import classNames from 'classnames';		import classNames from 'classnames';
		import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react';		import * as React from 'react';
import { useDispatch } from 'react-redux';		import { useDispatch } from 'react-redux';

import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';		import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';		import { useENSNames } from 'lib/hooks/ens-cache.js';
import { userSearchIndexForPotentialMembers } from 'lib/selectors/user-selectors.js';		import { userSearchIndexForPotentialMembers } from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js';		import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
import { threadIsPending } from 'lib/shared/thread-utils.js';		import { threadIsPending } from 'lib/shared/thread-utils.js';
Show All 40 Lines	() =>
searchIndex: userSearchIndex,		searchIndex: userSearchIndex,
excludeUserIDs: userInfoInputIDs,		excludeUserIDs: userInfoInputIDs,
}),		}),
[usernameInputText, otherUserInfos, userSearchIndex, userInfoInputIDs],		[usernameInputText, otherUserInfos, userSearchIndex, userInfoInputIDs],
);		);
const userListItemsWithENSNames = useENSNames(userListItems);		const userListItemsWithENSNames = useENSNames(userListItems);

const onSelectUserFromSearch = React.useCallback(		const onSelectUserFromSearch = React.useCallback(
(id: string) => {		(user: AccountUserInfo) => {
const selectedUserIDs = userInfoInputArray.map(user => user.id);
dispatch({		dispatch({
type: updateNavInfoActionType,		type: updateNavInfoActionType,
payload: {		payload: {
selectedUserList: [...selectedUserIDs, id],		selectedUserList: [...userInfoInputArray, user],
},		},
});		});
setUsernameInputText('');		setUsernameInputText('');
},		},
[dispatch, userInfoInputArray],		[dispatch, userInfoInputArray],
);		);

const onRemoveUserFromSelected = React.useCallback(		const onRemoveUserFromSelected = React.useCallback(
(id: string) => {		(userID: string) => {
const selectedUserIDs = userInfoInputArray.map(user => user.id);		const newSelectedUserList = userInfoInputArray.filter(
if (!selectedUserIDs.includes(id)) {		({ id }) => userID !== id,
		);
		if (_isEqual(userInfoInputArray)(newSelectedUserList)) {
return;		return;
}		}
dispatch({		dispatch({
type: updateNavInfoActionType,		type: updateNavInfoActionType,
payload: {		payload: {
selectedUserList: selectedUserIDs.filter(userID => userID !== id),		selectedUserList: newSelectedUserList,
},		},
});		});
},		},
[dispatch, userInfoInputArray],		[dispatch, userInfoInputArray],
);		);

const userSearchResultList = React.useMemo(() => {		const userSearchResultList = React.useMemo(() => {
if (		if (
!userListItemsWithENSNames.length \|\|		!userListItemsWithENSNames.length \|\|
(!usernameInputText && userInfoInputArray.length)		(!usernameInputText && userInfoInputArray.length)
) {		) {
return null;		return null;
}		}

const userItems = userListItemsWithENSNames.map(		const userItems = userListItemsWithENSNames.map(
(userSearchResult: UserListItem) => (		(userSearchResult: UserListItem) => {
		const { alertTitle, alertText, notice, disabled, ...accountUserInfo } =
		userSearchResult;
		return (
<li key={userSearchResult.id} className={css.searchResultsItem}>		<li key={userSearchResult.id} className={css.searchResultsItem}>
<Button		<Button
variant="text"		variant="text"
onClick={() => onSelectUserFromSearch(userSearchResult.id)}		onClick={() => onSelectUserFromSearch(accountUserInfo)}
className={css.searchResultsButton}		className={css.searchResultsButton}
>		>
<div className={css.userContainer}>		<div className={css.userContainer}>
<UserAvatar size="small" userID={userSearchResult.id} />		<UserAvatar size="small" userID={userSearchResult.id} />
<div className={css.userName}>{userSearchResult.username}</div>		<div className={css.userName}>{userSearchResult.username}</div>
</div>		</div>
<div className={css.userInfo}>{userSearchResult.alertTitle}</div>		<div className={css.userInfo}>{userSearchResult.alertTitle}</div>
</Button>		</Button>
</li>		</li>
),		);
		},
);		);

return <ul className={css.searchResultsContainer}>{userItems}</ul>;		return <ul className={css.searchResultsContainer}>{userItems}</ul>;
}, [		}, [
onSelectUserFromSearch,		onSelectUserFromSearch,
userInfoInputArray.length,		userInfoInputArray.length,
userListItemsWithENSNames,		userListItemsWithENSNames,
usernameInputText,		usernameInputText,
▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines