Page MenuHomePhabricator
Differential D7206 Diff 24624 web/chat/chat-thread-composer.react.js

Changeset View

Standalone View

View Options

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

// @flow // @flow
import classNames from 'classnames'; import classNames from 'classnames';
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';
import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js'; import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';
import css from './chat-thread-composer.css'; import css from './chat-thread-composer.css';
import Button from '../components/button.react.js'; import Button from '../components/button.react.js';
import Label from '../components/label.react.js'; import Label from '../components/label.react.js';
import Search from '../components/search.react.js'; import Search from '../components/search.react.js';
import UserAvatar from '../components/user-avatar.react.js';
import type { InputState } from '../input/input-state.js'; import type { InputState } from '../input/input-state.js';
import { updateNavInfoActionType } from '../redux/action-types.js'; import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
type Props = { type Props = {
+userInfoInputArray: $ReadOnlyArray<AccountUserInfo>, +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
+otherUserInfos: { [id: string]: AccountUserInfo }, +otherUserInfos: { [id: string]: AccountUserInfo },
+threadID: string, +threadID: string,
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesfunction ChatThreadComposer(props: Props): React.Node {
const userSearchResultList = React.useMemo(() => { const userSearchResultList = React.useMemo(() => {
if ( if (
!userListItemsWithENSNames.length || !userListItemsWithENSNames.length ||
(!usernameInputText && userInfoInputArray.length) (!usernameInputText && userInfoInputArray.length)
) { ) {
return null; return null;
} }
return ( const userItems = userListItemsWithENSNames.map(
<ul className={css.searchResultsContainer}> (userSearchResult: UserListItem) => (
{userListItemsWithENSNames.map((userSearchResult: UserListItem) => (
<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(userSearchResult.id)}
className={css.searchResultsButton} className={css.searchResultsButton}
> >
<div className={css.userContainer}>
<UserAvatar size="small" userID={userSearchResult.id} />
<div className={css.userName}>{userSearchResult.username}</div> <div className={css.userName}>{userSearchResult.username}</div>
</div>
<div className={css.userInfo}>{userSearchResult.alertTitle}</div> <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
</Button> </Button>
</li> </li>
))} ),
</ul>
); );
return <ul className={css.searchResultsContainer}>{userItems}</ul>;
}, [ }, [
onSelectUserFromSearch, onSelectUserFromSearch,
userInfoInputArray.length, userInfoInputArray.length,
userListItemsWithENSNames, userListItemsWithENSNames,
usernameInputText, usernameInputText,
]); ]);
const hideSearch = React.useCallback( const hideSearch = React.useCallback(
▲ Show 20 Lines • Show All 68 Lines • Show Last 20 Lines