diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js index c6733d7c3..2869db638 100644 --- a/web/chat/chat-thread-list.react.js +++ b/web/chat/chat-thread-list.react.js @@ -1,188 +1,153 @@ // @flow import invariant from 'invariant'; import _sum from 'lodash/fp/sum.js'; import * as React from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeList } from 'react-window'; -import { useModalContext } from 'lib/components/modal-provider.react.js'; -import genesis from 'lib/facts/genesis.js'; import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js'; -import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { emptyItemText } from 'lib/shared/thread-utils.js'; import ChatThreadListItem from './chat-thread-list-item.react.js'; import ChatThreadListSearch from './chat-thread-list-search.react.js'; import css from './chat-thread-list.css'; import { ThreadListContext } from './thread-list-provider.js'; import BackgroundIllustration from '../assets/background-illustration.react.js'; import Button from '../components/button.react.js'; -import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useOnClickNewThread } from '../selectors/thread-selectors.js'; type Item = ChatThreadItem | { +type: 'search' } | { +type: 'empty' }; const sizes = { search: 68, empty: 249, thread: 81, sidebars: { sidebar: 32, seeMore: 22, spacer: 6 }, }; const itemKey = (index: number, data: $ReadOnlyArray) => { if (data[index].type === 'search') { return 'search'; } else if (data[index].type === 'empty') { return 'empty'; } else { return data[index].threadInfo.id; } }; const renderItem = ({ index, data, style }) => { let item; if (data[index].type === 'search') { item = ; } else if (data[index].type === 'empty') { item = ; } else { item = ; } return
{item}
; }; function ChatThreadList(): React.Node { const threadListContext = React.useContext(ThreadListContext); invariant( threadListContext, 'threadListContext should be set in ChatThreadList', ); const { activeTab, threadList } = threadListContext; const onClickNewThread = useOnClickNewThread(); const isThreadCreation = useSelector( state => state.navInfo.chatMode === 'create', ); const isBackground = activeTab === 'Background'; const communityID = useSelector(state => state.communityPickerStore.chat); - const communityThreadInfo = useSelector(state => { - if (!communityID) { - return null; - } - return threadInfoSelector(state)[communityID]; - }); - - const { pushModal, popModal } = useModalContext(); - - const onClickCreateSubchannel = React.useCallback(() => { - if (!communityThreadInfo) { - return null; - } - return pushModal( - , - ); - }, [popModal, pushModal, communityThreadInfo]); - - const isChatCreation = !communityID || communityID === genesis.id; - - const onClickCreate = isChatCreation - ? onClickNewThread - : onClickCreateSubchannel; - - const createButtonText = isChatCreation - ? 'Create new chat' - : 'Create new channel'; - const threadListContainerRef = React.useRef(); const threads = React.useMemo( () => threadList.filter( item => !communityID || item.threadInfo.community === communityID || item.threadInfo.id === communityID, ), [communityID, threadList], ); React.useEffect(() => { if (threadListContainerRef.current) { threadListContainerRef.current.resetAfterIndex(0, false); } }, [threads]); const threadListContainer = React.useMemo(() => { const items: Item[] = [{ type: 'search' }, ...threads]; if (isBackground && threads.length === 0) { items.push({ type: 'empty' }); } const itemSize = index => { if (items[index].type === 'search') { return sizes.search; } else if (items[index].type === 'empty') { return sizes.empty; } const sidebarHeight = _sum( items[index].sidebars.map(s => sizes.sidebars[s.type]), ); return sizes.thread + sidebarHeight; }; return ( {({ height }) => ( {renderItem} )} ); }, [isBackground, threads]); return ( <>
{threadListContainer}
); } function EmptyItem() { return (
{emptyItemText}
); } export default ChatThreadList;