Changeset View
Changeset View
Standalone View
Standalone View
web/chat/chat-thread-list.react.js
// @flow | // @flow | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { emptyItemText } from 'lib/shared/thread-utils.js'; | import { emptyItemText } from 'lib/shared/thread-utils.js'; | ||||
import ChatThreadListItem from './chat-thread-list-item.react.js'; | import ChatThreadListItem from './chat-thread-list-item.react.js'; | ||||
import css from './chat-thread-list.css'; | import css from './chat-thread-list.css'; | ||||
import { ThreadListContext } from './thread-list-provider.js'; | import { ThreadListContext } from './thread-list-provider.js'; | ||||
import BackgroundIllustration from '../assets/background-illustration.react.js'; | import BackgroundIllustration from '../assets/background-illustration.react.js'; | ||||
import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
import Search from '../components/search.react.js'; | import Search from '../components/search.react.js'; | ||||
import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
import { useOnClickNewThread } from '../selectors/thread-selectors.js'; | import { | ||||
useOnClickNewThread, | |||||
usePickedCommunityChat, | |||||
} from '../selectors/thread-selectors.js'; | |||||
function ChatThreadList(): React.Node { | function ChatThreadList(): React.Node { | ||||
const threadListContext = React.useContext(ThreadListContext); | const threadListContext = React.useContext(ThreadListContext); | ||||
invariant( | invariant( | ||||
threadListContext, | threadListContext, | ||||
'threadListContext should be set in ChatThreadList', | 'threadListContext should be set in ChatThreadList', | ||||
); | ); | ||||
const { activeTab, threadList, setSearchText, searchText } = | const { activeTab, threadList, setSearchText, searchText } = | ||||
threadListContext; | threadListContext; | ||||
const onClickNewThread = useOnClickNewThread(); | const onClickNewThread = useOnClickNewThread(); | ||||
const isThreadCreation = useSelector( | const isThreadCreation = useSelector( | ||||
state => state.navInfo.chatMode === 'create', | state => state.navInfo.chatMode === 'create', | ||||
); | ); | ||||
const isBackground = activeTab === 'Background'; | const isBackground = activeTab === 'Background'; | ||||
const communityID = usePickedCommunityChat(); | |||||
const threadComponents: React.Node[] = React.useMemo(() => { | const threadComponents: React.Node[] = React.useMemo(() => { | ||||
const threads = threadList.map(item => ( | const threads = threadList | ||||
<ChatThreadListItem item={item} key={item.threadInfo.id} /> | .filter( | ||||
)); | item => | ||||
!communityID || | |||||
item.threadInfo.community === communityID || | |||||
item.threadInfo.id === communityID, | |||||
) | |||||
.map(item => <ChatThreadListItem item={item} key={item.threadInfo.id} />); | |||||
if (threads.length === 0 && isBackground) { | if (threads.length === 0 && isBackground) { | ||||
threads.push(<EmptyItem key="emptyItem" />); | threads.push(<EmptyItem key="emptyItem" />); | ||||
} | } | ||||
return threads; | return threads; | ||||
}, [threadList, isBackground]); | }, [threadList, isBackground, communityID]); | ||||
return ( | return ( | ||||
<> | <> | ||||
<div className={css.threadListContainer}> | <div className={css.threadListContainer}> | ||||
<Search | <Search | ||||
onChangeText={setSearchText} | onChangeText={setSearchText} | ||||
searchText={searchText} | searchText={searchText} | ||||
placeholder="Search chats" | placeholder="Search chats" | ||||
Show All 26 Lines |