lbry-desktop/ui/page/channels/view.jsx

80 lines
2.6 KiB
React
Raw Normal View History

// @flow
2020-05-21 17:38:28 +02:00
import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react';
import ClaimList from 'component/claimList';
import Page from 'component/page';
import Button from 'component/button';
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Spinner from 'component/spinner';
2020-05-21 17:38:28 +02:00
import Card from 'component/common/card';
2020-06-29 21:54:07 +02:00
import * as PAGES from 'constants/pages';
type Props = {
channels: Array<ChannelClaim>,
2020-06-21 18:51:06 +02:00
channelUrls: Array<string>,
fetchChannelListMine: () => void,
fetchingChannels: boolean,
youtubeChannels: ?Array<any>,
};
export default function ChannelsPage(props: Props) {
2020-07-03 16:32:48 +02:00
const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels } = props;
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
2019-12-09 16:16:49 +01:00
const hasPendingChannels = channels && channels.some(channel => channel.confirmations < 0);
useEffect(() => {
fetchChannelListMine();
2019-10-03 23:40:54 +02:00
}, [fetchChannelListMine, hasPendingChannels]);
return (
<Page>
<div className="card-stack">
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{channelUrls && Boolean(channelUrls.length) && (
<Card
title={__('Your Channels')}
titleActions={
<>
<Button
button="secondary"
icon={ICONS.CHANNEL}
label={__('New Channel')}
navigate={`/$/${PAGES.CHANNEL_NEW}`}
/>
</>
}
isBodyList
body={<ClaimList isCardBody loading={fetchingChannels} uris={channelUrls} />}
/>
)}
</div>
2020-06-21 18:51:06 +02:00
{!(channelUrls && channelUrls.length) && (
<React.Fragment>
{!fetchingChannels ? (
<section className="main--empty">
<div className=" section--small">
<h2 className="section__title--large">{__('No Channels Created Yet')}</h2>
<div className="section__actions">
2020-07-03 16:32:48 +02:00
<Button button="primary" label={__('New Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
</div>
</div>
</section>
) : (
<section className="main--empty">
<div className=" section--small">
<h2 className="section__title--small">
{__('Checking for channels')}
<Spinner type="small" />
</h2>
</div>
</section>
)}
</React.Fragment>
)}
</Page>
);
}