Page MenuHomePhabricator
Files F3245648

D10521.diff
No OneTemporary
Actions

D10521.diff
View Options

diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -17,10 +17,23 @@
import ThreadMembersList from './members-list.react.js';
import css from './members-modal.css';
import Button from '../../../components/button.react.js';
-import Tabs from '../../../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../../../components/tabs.react.js';
import { useSelector } from '../../../redux/redux-utils.js';
import SearchModal from '../../search-modal.react.js';
+type TabType = 'All Members' | 'Admins';
+
+const tabsData: $ReadOnlyArray<TabData<TabType>> = [
+ {
+ id: 'All Members',
+ header: 'All Members',
+ },
+ {
+ id: 'Admins',
+ header: 'Admins',
+ },
+];
+
type ContentProps = {
+searchText: string,
+threadID: string,
@@ -28,7 +41,7 @@
function ThreadMembersModalContent(props: ContentProps): React.Node {
const { threadID, searchText } = props;
- const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members');
+ const [tab, setTab] = React.useState<TabType>('All Members');
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { members: threadMembersNotFiltered } = threadInfo;
@@ -57,26 +70,22 @@
[allMembers, roles],
);
- const allUsersTab = React.useMemo(
- () => (
- <Tabs.Item id="All Members" header="All Members">
- <ThreadMembersList threadInfo={threadInfo} threadMembers={allMembers} />
- </Tabs.Item>
- ),
- [allMembers, threadInfo],
+ const tabs = React.useMemo(
+ () => <Tabs tabItems={tabsData} activeTab={tab} setTab={setTab} />,
+ [tab],
);
- const allAdminsTab = React.useMemo(
- () => (
- <Tabs.Item id="Admins" header="Admins">
- <ThreadMembersList
- threadInfo={threadInfo}
- threadMembers={adminMembers}
- />
- </Tabs.Item>
- ),
- [adminMembers, threadInfo],
- );
+ const tabContent = React.useMemo(() => {
+ if (tab === 'All Members') {
+ return (
+ <ThreadMembersList threadInfo={threadInfo} threadMembers={allMembers} />
+ );
+ }
+
+ return (
+ <ThreadMembersList threadInfo={threadInfo} threadMembers={adminMembers} />
+ );
+ }, [adminMembers, allMembers, tab, threadInfo]);
const { pushModal, popModal } = useModalContext();
@@ -102,17 +111,20 @@
);
}, [canAddMembers, onClickAddMembers]);
- return (
- <div className={css.modalContentContainer}>
- <div className={css.membersListTabs}>
- <Tabs.Container activeTab={tab} setTab={setTab}>
- {allUsersTab}
- {allAdminsTab}
- </Tabs.Container>
+ const threadMembersModalContent = React.useMemo(
+ () => (
+ <div className={css.modalContentContainer}>
+ <div className={css.membersListTabs}>
+ {tabs}
+ {tabContent}
+ </div>
+ {addMembersButton}
</div>
- {addMembersButton}
- </div>
+ ),
+ [addMembersButton, tabContent, tabs],
);
+
+ return threadMembersModalContent;
}
type Props = {

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 15, 7:49 PM (20 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495229
Default Alt Text
D10521.diff (3 KB)

Event Timeline