Refactor use of antd tab component. Closes #2098

web/components/modals/AuthModal/AuthModal.tsx

@@ -14,8 +14,6 @@ import {
   accessTokenAtom,
 } from '../../stores/ClientConfigStore';
 
-const { TabPane } = Tabs;
-
 export const AuthModal: FC = () => {
   const currentUser = useRecoilValue(currentUserAtom);
   if (!currentUser) {
@@ -27,45 +25,48 @@ export const AuthModal: FC = () => {
   const federationEnabled = true;
   const { displayName } = currentUser;
 
+  const indieAuthTabTitle = (
+    <span className={styles.tabContent}>
+      <img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
+      IndieAuth
+    </span>
+  );
+  const indieAuthTab = (
+    <IndieAuthModal
+      authenticated={authenticated}
+      displayName={displayName}
+      accessToken={accessToken}
+    />
+  );
+
+  const fediAuthTabTitle = (
+    <span className={styles.tabContent}>
+      <img className={styles.icon} src={FediverseIcon.src} alt="Fediverse auth" />
+      FediAuth
+    </span>
+  );
+  const fediAuthTab = (
+    <FediAuthModal
+      authenticated={authenticated}
+      displayName={displayName}
+      accessToken={accessToken}
+    />
+  );
+
+  const items = [
+    { label: indieAuthTabTitle, key: '1', children: indieAuthTab },
+    { label: fediAuthTabTitle, key: '2', children: fediAuthTab },
+  ];
+
   return (
     <div>
       <Tabs
         defaultActiveKey="1"
+        items={items}
         type="card"
         size="small"
         renderTabBar={federationEnabled ? null : () => null}
-      >
-        <TabPane
-          tab={
-            <span className={styles.tabContent}>
-              <img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
-              IndieAuth
-            </span>
-          }
-          key="1"
-        >
-          <IndieAuthModal
-            authenticated={authenticated}
-            displayName={displayName}
-            accessToken={accessToken}
-          />
-        </TabPane>
-        <TabPane
-          tab={
-            <span className={styles.tabContent}>
-              <img className={styles.icon} src={FediverseIcon.src} alt="Fediverse auth" />
-              FediAuth
-            </span>
-          }
-          key="2"
-        >
-          <FediAuthModal
-            authenticated={authenticated}
-            displayName={displayName}
-            accessToken={accessToken}
-          />
-        </TabPane>
-      </Tabs>
+      />
     </div>
   );
 };

web/components/ui/Content/Content.tsx

@@ -34,7 +34,6 @@ import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Statusbar } from '../Statusbar/Statusbar';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 
-const { TabPane } = Tabs;
 const { Content: AntContent } = Layout;
 
 // Lazy loaded components
@@ -59,31 +58,34 @@ const ChatContainer = dynamic(() =>
   import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
 );
 
-const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extraPageContent }) => (
-  <>
-    <div className={styles.lowerHalf}>
-      <ContentHeader
-        name={name}
-        title={streamTitle}
-        summary={summary}
-        tags={tags}
-        links={socialHandles}
-        logo="/logo"
-      />
-    </div>
+const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extraPageContent }) => {
+  const aboutTabContent = <CustomPageContent content={extraPageContent} />;
+  const followersTabContent = <FollowerCollection name={name} />;
 
-    <div className={styles.lowerSection}>
-      <Tabs defaultActiveKey="0">
-        <TabPane tab="About" key="2">
-          <CustomPageContent content={extraPageContent} />
-        </TabPane>
-        <TabPane tab="Followers" key="3">
-          <FollowerCollection name={name} />
-        </TabPane>
-      </Tabs>
-    </div>
-  </>
-);
+  const items = [
+    { label: 'About', key: '2', children: aboutTabContent },
+    { label: 'Followers', key: '3', children: followersTabContent },
+  ];
+
+  return (
+    <>
+      <div className={styles.lowerHalf}>
+        <ContentHeader
+          name={name}
+          title={streamTitle}
+          summary={summary}
+          tags={tags}
+          links={socialHandles}
+          logo="/logo"
+        />
+      </div>
+
+      <div className={styles.lowerSection}>
+        <Tabs defaultActiveKey="0" items={items} />
+      </div>
+    </>
+  );
+};
 
 const MobileContent = ({
   name,
@@ -96,37 +98,44 @@ const MobileContent = ({
   chatDisplayName,
   chatUserId,
   showChat,
-}) => (
-  <div className={classNames(styles.lowerSectionMobile)}>
-    <Tabs defaultActiveKey="0">
-      {showChat && (
-        <TabPane tab="Chat" key="1">
-          <ChatContainer
-            messages={messages}
-            usernameToHighlight={chatDisplayName}
-            chatUserId={chatUserId}
-            isModerator={false}
-            height="40vh"
-          />
-        </TabPane>
-      )}
-      <TabPane tab="About" key="2">
-        <ContentHeader
-          name={name}
-          title={streamTitle}
-          summary={summary}
-          tags={tags}
-          links={socialHandles}
-          logo="/logo"
-        />
-        <CustomPageContent content={extraPageContent} />
-      </TabPane>
-      <TabPane tab="Followers" key="3">
-        <FollowerCollection name={name} />
-      </TabPane>
-    </Tabs>
-  </div>
-);
+}) => {
+  const chatContent = showChat && (
+    <ChatContainer
+      messages={messages}
+      usernameToHighlight={chatDisplayName}
+      chatUserId={chatUserId}
+      isModerator={false}
+      height="40vh"
+    />
+  );
+
+  const aboutTabContent = (
+    <>
+      <ContentHeader
+        name={name}
+        title={streamTitle}
+        summary={summary}
+        tags={tags}
+        links={socialHandles}
+        logo="/logo"
+      />
+      <CustomPageContent content={extraPageContent} />
+    </>
+  );
+  const followersTabContent = <FollowerCollection name={name} />;
+
+  const items = [
+    { label: 'Chat', key: '1', children: chatContent },
+    { label: 'About', key: '2', children: aboutTabContent },
+    { label: 'Followers', key: '3', children: followersTabContent },
+  ];
+
+  return (
+    <div className={classNames(styles.lowerSectionMobile)}>
+      <Tabs defaultActiveKey="0" items={items} />
+    </div>
+  );
+};
 
 export const Content: FC = () => {
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);

web/pages/admin/chat/users.tsx

@@ -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} />;
 }

web/pages/admin/federation/followers.tsx

@@ -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>
   );
 }