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

69
web/components/modals/AuthModal/AuthModal.tsx
View File

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

121
web/components/ui/Content/Content.tsx
View File

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