Changeset View
Changeset View
Standalone View
Standalone View
web/settings/relationship/add-users-list.react.js
| // @flow | // @flow | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { | import { | ||||
| updateRelationships, | updateRelationships, | ||||
| updateRelationshipsActionTypes, | updateRelationshipsActionTypes, | ||||
| } from 'lib/actions/relationship-actions.js'; | } from 'lib/actions/relationship-actions.js'; | ||||
| import { useENSNames } from 'lib/hooks/ens-cache.js'; | import { useENSNames } from 'lib/hooks/ens-cache.js'; | ||||
| import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; | import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; | ||||
| import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js'; | import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; | ||||
| import { useSearchUsers } from 'lib/shared/search-utils.js'; | import { useSearchUsers } from 'lib/shared/search-utils.js'; | ||||
| import type { | import type { | ||||
| UserRelationshipStatus, | UserRelationshipStatus, | ||||
| RelationshipAction, | RelationshipAction, | ||||
| } from 'lib/types/relationship-types.js'; | } from 'lib/types/relationship-types.js'; | ||||
| import type { | import type { | ||||
| GlobalAccountUserInfo, | GlobalAccountUserInfo, | ||||
| AccountUserInfo, | AccountUserInfo, | ||||
| } from 'lib/types/user-types.js'; | } from 'lib/types/user-types.js'; | ||||
| import { | import { | ||||
| useDispatchActionPromise, | useDispatchActionPromise, | ||||
| useServerCall, | useServerCall, | ||||
| } from 'lib/utils/action-utils.js'; | } from 'lib/utils/action-utils.js'; | ||||
| import { values } from 'lib/utils/objects.js'; | |||||
| import AddUsersListItem from './add-users-list-item.react.js'; | import AddUsersListItem from './add-users-list-item.react.js'; | ||||
| import css from './add-users-list.css'; | import css from './add-users-list.css'; | ||||
| import Button from '../../components/button.react.js'; | import Button from '../../components/button.react.js'; | ||||
| import type { ButtonColor } from '../../components/button.react.js'; | import type { ButtonColor } from '../../components/button.react.js'; | ||||
| import Label from '../../components/label.react.js'; | import Label from '../../components/label.react.js'; | ||||
| import LoadingIndicator from '../../loading-indicator.react.js'; | import LoadingIndicator from '../../loading-indicator.react.js'; | ||||
| import { useSelector } from '../../redux/redux-utils.js'; | import { useSelector } from '../../redux/redux-utils.js'; | ||||
| Show All 17 Lines | const { | ||||
| excludedStatuses = new Set(), | excludedStatuses = new Set(), | ||||
| closeModal, | closeModal, | ||||
| confirmButtonContent, | confirmButtonContent, | ||||
| confirmButtonColor, | confirmButtonColor, | ||||
| relationshipAction, | relationshipAction, | ||||
| } = props; | } = props; | ||||
| const viewerID = useSelector(state => state.currentUserInfo?.id); | const viewerID = useSelector(state => state.currentUserInfo?.id); | ||||
| const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector); | const userInfos = useSelector(state => state.userStore.userInfos); | ||||
| const userInfosArray = React.useMemo(() => values(userInfos), [userInfos]); | |||||
| const userStoreSearchIndex = useUserSearchIndex(userInfosArray); | |||||
| const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< | const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< | ||||
| $ReadOnlySet<string>, | $ReadOnlySet<string>, | ||||
| >(new Set(userStoreSearchIndex.getSearchResults(searchText))); | >(new Set(userStoreSearchIndex.getSearchResults(searchText))); | ||||
| React.useEffect(() => { | React.useEffect(() => { | ||||
| setUserStoreSearchResults( | setUserStoreSearchResults( | ||||
| new Set(userStoreSearchIndex.getSearchResults(searchText)), | new Set(userStoreSearchIndex.getSearchResults(searchText)), | ||||
| ); | ); | ||||
| }, [searchText, userStoreSearchIndex]); | }, [searchText, userStoreSearchIndex]); | ||||
| const serverSearchResults = useSearchUsers(searchText); | const serverSearchResults = useSearchUsers(searchText); | ||||
| const searchTextPresent = searchText.length > 0; | const searchTextPresent = searchText.length > 0; | ||||
| const userInfos = useSelector(state => state.userStore.userInfos); | |||||
| const mergedUserInfos = React.useMemo(() => { | const mergedUserInfos = React.useMemo(() => { | ||||
| const mergedInfos: { [string]: GlobalAccountUserInfo | AccountUserInfo } = | const mergedInfos: { [string]: GlobalAccountUserInfo | AccountUserInfo } = | ||||
| {}; | {}; | ||||
| for (const userInfo of serverSearchResults) { | for (const userInfo of serverSearchResults) { | ||||
| mergedInfos[userInfo.id] = userInfo; | mergedInfos[userInfo.id] = userInfo; | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 172 Lines • Show Last 20 Lines | |||||