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

127 lines
4.3 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 { Lbryio } from 'lbryinc';
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-09-04 19:14:48 +02:00
import Yrbl from 'component/yrbl';
import LbcSymbol from 'component/common/lbc-symbol';
2020-06-29 21:54:07 +02:00
import * as PAGES from 'constants/pages';
2020-10-12 23:24:32 +02:00
import HelpLink from 'component/common/help-link';
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 [rewardData, setRewardData] = React.useState();
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
2021-03-02 22:22:25 +01:00
const hasPendingChannels = channels && channels.some((channel) => channel.confirmations < 0);
useEffect(() => {
fetchChannelListMine();
2019-10-03 23:40:54 +02:00
}, [fetchChannelListMine, hasPendingChannels]);
useEffect(() => {
2021-03-02 22:22:25 +01:00
Lbryio.call('user_rewards', 'view_rate').then((data) => setRewardData(data));
}, [setRewardData]);
return (
<Page>
<div className="card-stack">
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{channelUrls && Boolean(channelUrls.length) && (
<ClaimList
header={<h1 className="section__title">{__('Your channels')}</h1>}
headerAltControls={
<Button
button="secondary"
icon={ICONS.CHANNEL}
label={__('New Channel')}
navigate={`/$/${PAGES.CHANNEL_NEW}`}
/>
}
loading={fetchingChannels}
uris={channelUrls}
2021-03-02 22:22:25 +01:00
renderActions={(claim) => {
const claimsInChannel = claim.meta.claims_in_channel;
return claimsInChannel === 0 ? (
<span />
) : (
<div className="section__actions">
<Button
button="alt"
icon={ICONS.ANALYTICS}
label={__('Analytics')}
navigate={`/$/${PAGES.CREATOR_DASHBOARD}?channel=${encodeURIComponent(claim.canonical_url)}`}
/>
</div>
);
}}
2021-03-02 22:22:25 +01:00
renderProperties={(claim) => {
const claimsInChannel = claim.meta.claims_in_channel;
if (!claim || claimsInChannel === 0) {
return null;
}
const channelRewardData =
rewardData &&
2020-10-16 04:29:19 +02:00
rewardData.rates &&
2021-03-02 22:22:25 +01:00
rewardData.rates.find((data) => {
return data.channel_claim_id === claim.claim_id;
});
if (channelRewardData) {
return (
<span className="claim-preview__custom-properties">
2020-10-12 23:24:32 +02:00
<span className="help--inline">
{__('Earnings per view')} <HelpLink href="https://lbry.com/faq/view-rewards" />
</span>
2020-12-21 20:25:41 +01:00
<span>
<LbcSymbol postfix={channelRewardData.view_rate.toFixed(2)} />
</span>
</span>
);
} else {
return null;
}
}}
/>
)}
</div>
2020-06-21 18:51:06 +02:00
{!(channelUrls && channelUrls.length) && (
<React.Fragment>
{!fetchingChannels ? (
<section className="main--empty">
2020-09-04 19:14:48 +02:00
<Yrbl
title={__('No channels')}
subtitle={__("You haven't created a channel yet. All of your beautiful channels will be listed here!")}
actions={
<div className="section__actions">
<Button button="primary" label={__('New Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
</div>
}
/>
</section>
) : (
<section className="main--empty">
2020-09-04 19:14:48 +02:00
<Spinner delayed />
</section>
)}
</React.Fragment>
)}
</Page>
);
}