Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/create/steps/subchannel-members.react.js
- This file was added.
// @flow | |||||
import * as React from 'react'; | |||||
import { useSelector } from 'react-redux'; | |||||
import { threadInfoSelector } from 'lib/selectors/thread-selectors'; | |||||
import { userStoreSearchIndex } from 'lib/selectors/user-selectors'; | |||||
import { useAncestorThreads } from 'lib/shared/ancestor-threads'; | |||||
import type { ThreadInfo } from 'lib/types/thread-types'; | |||||
import Search from '../../../../components/search.react'; | |||||
import MembersList from './subchannel-members-list.react'; | |||||
import css from './subchannel-members.css'; | |||||
type SubchannelMembersProps = { | |||||
+parentThreadInfo: ThreadInfo, | |||||
+selectedUsers: $ReadOnlySet<string>, | |||||
+searchText: string, | |||||
+setSearchText: string => void, | |||||
+switchUser: (userID: string) => void, | |||||
}; | |||||
function SubchannelMembers(props: SubchannelMembersProps): React.Node { | |||||
const { | |||||
switchUser, | |||||
searchText, | |||||
setSearchText, | |||||
parentThreadInfo, | |||||
selectedUsers, | |||||
} = props; | |||||
const ancestorThreads = useAncestorThreads(parentThreadInfo); | |||||
const { id: threadID } = ancestorThreads[0] ?? parentThreadInfo; | |||||
const communityThread = useSelector( | |||||
state => threadInfoSelector(state)[threadID], | |||||
); | |||||
const userSearchIndex = useSelector(userStoreSearchIndex); | |||||
const searchResult = React.useMemo( | |||||
() => new Set(userSearchIndex.getSearchResults(searchText)), | |||||
[userSearchIndex, searchText], | |||||
); | |||||
return ( | |||||
<> | |||||
<div className={css.searchBar}> | |||||
<Search | |||||
searchText={searchText} | |||||
onChangeText={setSearchText} | |||||
placeholder="Search" | |||||
/> | |||||
</div> | |||||
<div className={css.members}> | |||||
<MembersList | |||||
communityThreadInfo={communityThread} | |||||
parentThreadInfo={parentThreadInfo} | |||||
selectedUsers={selectedUsers} | |||||
searchResult={searchResult} | |||||
searchText={searchText} | |||||
switchUser={switchUser} | |||||
/> | |||||
</div> | |||||
</> | |||||
); | |||||
} | |||||
export default SubchannelMembers; |