LogalDeveloper/owncast
0
Fork 0
Code Activity

Refactor use of antd tab component. Closes #2098

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-10 17:53:14 -07:00
parent e461f85109
commit a526decef4
4 changed files with 156 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/pages/admin/chat/users.tsx
View File

@@ -12,8 +12,6 @@ import { UserTable } from '../../../components/UserTable';
import { ClientTable } from '../../../components/ClientTable';
import { BannedIPsTable } from '../../../components/BannedIPsTable';
const { TabPane } = Tabs;
export const FETCH_INTERVAL = 10 * 1000; // 10 sec
export default function ChatUsers() {
@@ -88,20 +86,25 @@ export default function ChatUsers() {
</p>
);
return (
<Tabs defaultActiveKey="1">
<TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
{connectedUsers}
</TabPane>
<TabPane tab={<span>Banned Users ({disabledUsers.length})</span>} key="2">
<UserTable data={disabledUsers} />
</TabPane>
<TabPane tab={<span>IP Bans ({ipBans.length})</span>} key="3">
<BannedIPsTable data={ipBans} />
</TabPane>
<TabPane tab={<span>Moderators ({moderators.length})</span>} key="4">
<UserTable data={moderators} />
</TabPane>
</Tabs>
const connectedUserTabTitle = (
<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>
);
const bannedUsersTabTitle = <span>Banned Users ({disabledUsers.length})</span>;
const bannedUsersTable = <UserTable data={disabledUsers} />;
const bannedIPTabTitle = <span>IP Bans ({ipBans.length})</span>;
const bannedIpTable = <BannedIPsTable data={ipBans} />;
const moderatorUsersTabTitle = <span>Moderators ({moderators.length})</span>;
const moderatorTable = <UserTable data={moderators} />;
const items = [
{ label: connectedUserTabTitle, key: '1', children: connectedUsers },
{ label: bannedUsersTabTitle, key: '2', children: bannedUsersTable },
{ label: bannedIPTabTitle, key: '3', children: bannedIpTable },
{ label: moderatorUsersTabTitle, key: '4', children: moderatorTable },
];
return <Tabs defaultActiveKey="1" items={items} />;
}

63
web/pages/admin/federation/followers.tsx
View File

@@ -13,7 +13,6 @@ import {
} from '../../../utils/apis';
import { isEmptyObject } from '../../../utils/format';
const { TabPane } = Tabs;
export interface Follower {
link: string;
username: string;
@@ -293,11 +292,21 @@ export default function FediverseFollowers() {
},
);
const pendingRequestsTab = isPrivate && (
<TabPane
tab={<span>Requests {followersPending.length > 0 && `(${followersPending.length})`}</span>}
key="2"
>
const followersTabTitle = (
<span>Followers {followers.length > 0 && `(${followers.length})`}</span>
);
const followersTab = (
<>
<p>The following accounts get notified when you go live or send a post.</p>
{makeTable(followers, followersColumns)}{' '}
</>
);
const pendingRequestsTabTitle = (
<span>Requests {followersPending.length > 0 && `(${followersPending.length})`}</span>
);
const pendingRequestsTab = (
<>
<p>
The following people are requesting to follow your Owncast server on the{' '}
<a href="https://en.wikipedia.org/wiki/Fediverse" target="_blank" rel="noopener noreferrer">
@@ -306,31 +315,31 @@ export default function FediverseFollowers() {
and be alerted to when you go live. Each must be approved.
</p>
{makeTable(followersPending, pendingColumns)}
</TabPane>
</>
);
const blockedTabTitle = (
<span>Blocked {followersBlocked.length > 0 && `(${followersBlocked.length})`}</span>
);
const blockedTab = (
<>
<p>
The following people were either rejected or blocked by you. You can approve them as a
follower.
</p>
<p>{makeTable(followersBlocked, blockedColumns)}</p>
</>
);
const items = [
{ label: followersTabTitle, key: '1', children: followersTab },
isPrivate && { label: pendingRequestsTabTitle, key: '2', children: pendingRequestsTab },
{ label: blockedTabTitle, key: '3', children: blockedTab },
];
return (
<div className="followers-section">
<Tabs defaultActiveKey="1">
<TabPane
tab={<span>Followers {followers.length > 0 && `(${followers.length})`}</span>}
key="1"
>
<p>The following accounts get notified when you go live or send a post.</p>
{makeTable(followers, followersColumns)}{' '}
</TabPane>
{pendingRequestsTab}
<TabPane
tab={<span>Blocked {followersBlocked.length > 0 && `(${followersBlocked.length})`}</span>}
key="3"
>
<p>
The following people were either rejected or blocked by you. You can approve them as a
follower.
</p>
<p>{makeTable(followersBlocked, blockedColumns)}</p>
</TabPane>
</Tabs>
<Tabs defaultActiveKey="1" items={items} />
</div>
);
}