Page MenuHomePhabricator

D10519.id35316.diff
No OneTemporary

D10519.id35316.diff

diff --git a/web/modals/threads/sidebars/sidebars-modal.react.js b/web/modals/threads/sidebars/sidebars-modal.react.js
--- a/web/modals/threads/sidebars/sidebars-modal.react.js
+++ b/web/modals/threads/sidebars/sidebars-modal.react.js
@@ -7,11 +7,22 @@
import SidebarList from './sidebar-list.react.js';
import css from './sidebars-modal.css';
-import Tabs from '../../../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../../../components/tabs.react.js';
import SearchModal from '../../search-modal.react.js';
type SidebarTab = 'All Threads' | 'My Threads';
+const tabsData: $ReadOnlyArray<TabData<SidebarTab>> = [
+ {
+ id: 'All Threads',
+ header: 'All Threads',
+ },
+ {
+ id: 'My Threads',
+ header: 'My Threads',
+ },
+];
+
type ContentProps = {
+searchText: string,
+threadID: string,
@@ -22,27 +33,39 @@
const { searchText, threadID, defaultTab } = props;
const [tab, setTab] = React.useState<SidebarTab>(defaultTab);
+ const tabs = React.useMemo(
+ () => <Tabs tabItems={tabsData} activeTab={tab} setTab={setTab} />,
+ [tab],
+ );
+
const sidebarList = useFilteredChildThreads(threadID, {
predicate: threadIsSidebar,
searchText,
});
- const sidebarsChatListVisibleInChat = sidebarList.filter(chatItem =>
- threadInChatList(chatItem.threadInfo),
- );
+ const tabContent = React.useMemo(() => {
+ if (tab === 'All Threads') {
+ return <SidebarList sidebars={sidebarList} />;
+ }
- return (
- <div className={css.sidebarListContainer}>
- <Tabs.Container activeTab={tab} setTab={setTab}>
- <Tabs.Item id="All Threads" header="All Threads">
- <SidebarList sidebars={sidebarList} />
- </Tabs.Item>
- <Tabs.Item id="My Threads" header="My Threads">
- <SidebarList sidebars={sidebarsChatListVisibleInChat} />
- </Tabs.Item>
- </Tabs.Container>
- </div>
+ const sidebarsChatListVisibleInChat = sidebarList.filter(chatItem =>
+ threadInChatList(chatItem.threadInfo),
+ );
+
+ return <SidebarList sidebars={sidebarsChatListVisibleInChat} />;
+ }, [sidebarList, tab]);
+
+ const sidebarsModalContent = React.useMemo(
+ () => (
+ <div className={css.sidebarListContainer}>
+ {tabs}
+ {tabContent}
+ </div>
+ ),
+ [tabContent, tabs],
);
+
+ return sidebarsModalContent;
}
type Props = {

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 15, 9:38 PM (21 h, 56 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495195
Default Alt Text
D10519.id35316.diff (2 KB)

Event Timeline