LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Start of empty follower tab state. For #1913

Browse Source
This commit is contained in:
Gabe Kangas 2022-10-09 20:31:07 -07:00
parent 87ee74e9c2
commit dd5b8e7ce5
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
5 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,7 +79,7 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="3">
<FollowerCollection />
<FollowerCollection name={name} />
</TabPane>
</Tabs>
</div>
@ -123,7 +123,7 @@ const MobileContent = ({
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="3">
<FollowerCollection />
<FollowerCollection name={name} />
</TabPane>
</Tabs>
</div>

2
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View File

@ -7,8 +7,6 @@
.customPageContent {
font-size: 1.1rem;
line-height: 1.6em;
margin: 0;
padding: 0;
color: var(--theme-color-palette-0);
padding: calc(2 * var(--content-padding));
border-radius: var(--theme-rounded-corners);

8
web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
View File

@ -1,3 +1,11 @@
.followers {
width: 100%;
background-color: var(--theme-color-background-light);
}
.noFollowers {
padding: calc(2 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
width: 100%;
background-color: var(--theme-color-background-light);
}

5
web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { FollowerCollection } from './FollowerCollection';
export default {
@ -9,7 +10,9 @@ export default {
} as ComponentMeta<typeof FollowerCollection>;
const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
<FollowerCollection {...args} />
<RecoilRoot>
<FollowerCollection name="Example stream name" {...args} />
</RecoilRoot>
);
export const NoFollowers = Template.bind({});

24
web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
View File

@ -2,9 +2,14 @@ import { FC, useEffect, useState } from 'react';
import { Col, Pagination, Row } from 'antd';
import { Follower } from '../../../../interfaces/follower';
import { SingleFollower } from '../SingleFollower/SingleFollower';
import styles from '../SingleFollower/SingleFollower.module.scss';
import styles from './FollowerCollection.module.scss';
import { FollowButton } from '../../../action-buttons/FollowButton';
export const FollowerCollection: FC = () => {
export type FollowerCollectionProps = {
name: string;
};
export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
const ENDPOINT = '/api/followers';
const ITEMS_PER_PAGE = 24;
@ -35,7 +40,20 @@ export const FollowerCollection: FC = () => {
}, [page]);
const noFollowers = (
<div>A message explaining how to follow goes here since there are no followers.</div>
<div className={styles.noFollowers}>
<h2>Be the first follower!</h2>
<p>
{name !== 'Owncast' ? name : 'This server'} is a part of the{' '}
<a href="https://owncast.online/join-fediverse">Fediverse</a>, an interconnected network of
independent users and servers.
</p>
<p>
By following {name !== 'Owncast' ? name : 'this server'} you&apos;ll be able to get updates
from the stream, share it with others, and and show your appreciation when it goes live, all
from your own Fediverse account.
</p>
<FollowButton />
</div>
);
if (!followers?.length) {