lbry-desktop/ui/component/creatorAnalytics/view.jsx

243 lines
8.7 KiB
React
Raw Normal View History

2020-03-18 22:14:11 +01:00
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import { Lbryio } from 'lbryinc';
import ClaimPreview from 'component/claimPreview';
import Card from 'component/common/card';
import Spinner from 'component/spinner';
import Icon from 'component/common/icon';
import Button from 'component/button';
import Yrbl from 'component/yrbl';
import { useHistory } from 'react-router-dom';
import analytics from 'analytics';
2020-03-18 22:14:11 +01:00
type Props = {
2020-04-22 21:07:38 +02:00
claim: ?ChannelClaim,
2020-03-18 22:14:11 +01:00
fetchingChannels: boolean,
prepareEdit: string => void,
};
2020-04-22 21:07:38 +02:00
const UNAUTHENTICATED_ERROR = 'unauthenticated';
const GENERIC_ERROR = 'error';
2020-03-19 15:38:20 +01:00
export default function CreatorAnalytics(props: Props) {
2020-04-22 21:07:38 +02:00
const { prepareEdit, claim } = props;
2020-03-18 22:14:11 +01:00
const history = useHistory();
const [stats, setStats] = React.useState();
2020-04-22 21:07:38 +02:00
const [error, setError] = React.useState();
2020-03-18 22:14:11 +01:00
const [fetchingStats, setFetchingStats] = React.useState(false);
2020-04-22 21:07:38 +02:00
const claimId = claim && claim.claim_id;
const channelHasClaims = claim && claim.meta && claim.meta.claims_in_channel && claim.meta.claims_in_channel > 0;
2020-03-18 22:14:11 +01:00
React.useEffect(() => {
2020-04-22 21:07:38 +02:00
setStats(null);
}, [claimId]);
2020-03-18 22:14:11 +01:00
2020-04-22 21:07:38 +02:00
const channelForEffect = JSON.stringify(claim);
2020-03-18 22:14:11 +01:00
React.useEffect(() => {
if (claimId && channelForEffect && channelHasClaims) {
2020-03-18 22:14:11 +01:00
setFetchingStats(true);
2020-04-22 21:07:38 +02:00
Lbryio.call('reports', 'content', { claim_id: claimId })
2020-03-18 22:14:11 +01:00
.then(res => {
setFetchingStats(false);
setStats(res);
})
2020-04-22 21:07:38 +02:00
.catch(error => {
if (error.response.status === 401) {
setError(UNAUTHENTICATED_ERROR);
const channelToSend = JSON.parse(channelForEffect);
analytics.apiLogPublish(channelToSend);
} else {
setError(GENERIC_ERROR);
}
2020-03-18 22:14:11 +01:00
setFetchingStats(false);
});
}
}, [claimId, channelForEffect, channelHasClaims, setFetchingStats, setStats]);
2020-03-18 22:14:11 +01:00
return (
<React.Fragment>
2020-04-22 21:07:38 +02:00
{!stats && (
2020-03-18 22:14:11 +01:00
<div className="main--empty">
2020-04-22 21:07:38 +02:00
{fetchingStats ? (
<Spinner delayed />
) : (
<div>
{error && (
<Yrbl
type="sad"
title={error === GENERIC_ERROR ? __('No Stats Found') : __('Error Fetching Stats')}
subtitle={
error === GENERIC_ERROR
? __(
2020-05-22 03:19:01 +02:00
'There are no stats for this channel yet, it will take a few views. Make sure you are signed in with the correct email and have data sharing turned on.'
2020-04-22 21:07:38 +02:00
)
: __(
"You are not able to see this channel's stats. Make sure you are signed in with the correct email and have data sharing turned on."
)
2020-03-18 22:14:11 +01:00
}
2020-04-22 21:07:38 +02:00
/>
)}
{!error && (
<Yrbl
title={
channelHasClaims
? __('No recent publishes')
: __("You haven't published anything with this channel yet!")
}
subtitle={
<Button
button="primary"
label={__('Publish Something')}
onClick={() => {
if (claim) {
prepareEdit(claim.name);
history.push(`/$/${PAGES.PUBLISH}`);
}
}}
/>
}
/>
)}
</div>
)}
</div>
2020-03-18 22:14:11 +01:00
)}
2020-04-22 21:07:38 +02:00
2020-03-18 22:14:11 +01:00
{stats && (
<div className="section">
<div className="columns">
<Card
iconColor
2020-04-22 21:07:38 +02:00
title={<span>{__('%follower_count% followers', { follower_count: stats.ChannelSubs })}</span>}
2020-03-18 22:14:11 +01:00
icon={ICONS.SUBSCRIBE}
subtitle={
<div className="card__data-subtitle">
<span>
2020-03-19 17:42:43 +01:00
{0 > -1 && '+'}{' '}
2020-03-19 15:38:20 +01:00
{__('%follower_count_weekly_change% this week', {
follower_count_weekly_change: stats.ChannelSubChange || 0,
})}
2020-03-18 22:14:11 +01:00
</span>
2020-06-08 20:42:29 +02:00
{stats.ChannelSubChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
2020-03-18 22:14:11 +01:00
</div>
}
/>
<Card
icon={ICONS.EYE}
2020-03-19 15:38:20 +01:00
title={<span>{__('%all_content_views% views', { all_content_views: stats.AllContentViews })}</span>}
subtitle={
2020-03-19 17:42:43 +01:00
<div className="card__data-subtitle">
<span>
{__('+ %all_content_views_weekly_change% this week', {
all_content_views_weekly_change: stats.AllContentViewChange || 0,
})}
</span>
2020-06-08 20:42:29 +02:00
{stats.AllContentViewChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
2020-03-19 17:42:43 +01:00
</div>
2020-03-19 15:38:20 +01:00
}
2020-03-18 22:14:11 +01:00
/>
</div>
2020-04-23 23:40:58 +02:00
{/* <Card
2020-04-22 21:07:38 +02:00
iconColor
className="section"
title={<span>{__('%lbc_received% LBC Earned', { lbc_received: stats.AllLBCReceived })}</span>}
icon={ICONS.REWARDS}
2020-04-22 21:07:38 +02:00
subtitle={
<React.Fragment>
<div className="card__data-subtitle">
<span>
{'+'}{' '}
{__('%lbc_received_changed% this week', {
lbc_received_changed: stats.LBCReceivedChange || 0,
})}
</span>
2020-06-08 20:42:29 +02:00
{stats.LBCReceivedChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
2020-04-22 21:07:38 +02:00
</div>
<p className="help">
{__(
"Earnings may also include any LBC you've sent yourself or added as support. We are working on making this more accurate. Check your wallet page for the correct total balance."
)}
</p>
</React.Fragment>
2020-03-18 22:14:11 +01:00
}
2020-04-23 23:40:58 +02:00
/> */}
2020-04-22 21:07:38 +02:00
{stats.VideoURITopNew ? (
<Card
className="section"
2020-05-22 03:19:01 +02:00
title={__('Most Viewed Recent Content')}
2020-04-22 21:07:38 +02:00
body={
<React.Fragment>
<div className="card--inline">
<ClaimPreview uri={stats.VideoURITopNew} />
2020-04-22 21:07:38 +02:00
</div>
<div className="section__subtitle card__data-subtitle">
<span>
{stats.VideoViewsTopNew === 1
? __('1 view', { view_count: stats.VideoViewsTopNew })
: __('%view_count% views', { view_count: stats.VideoViewsTopNew })}
2020-04-22 21:07:38 +02:00
</span>
2020-06-08 20:42:29 +02:00
{stats.VideoViewsTopNew > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
2020-04-22 21:07:38 +02:00
</div>
</React.Fragment>
}
/>
) : (
<Card
className="section"
title={__('Your Recent Content')}
subtitle={
!stats.VideoURITopNew &&
__(
"No recent publishes found for this channel. Publish something new and track how it's performing here."
)
}
actions={
<div className="section__actions">
<Button
button="primary"
2020-05-31 15:56:33 +02:00
icon={ICONS.PUBLISH}
label={__('Publish')}
2020-04-22 21:07:38 +02:00
onClick={() => {
if (claim) {
prepareEdit(claim.name);
history.push(`/$/${PAGES.PUBLISH}`);
}
}}
/>
</div>
}
/>
)}
<Card
className="section"
2020-05-22 03:19:01 +02:00
title={__('Most Viewed Content All Time')}
2020-03-18 22:14:11 +01:00
body={
<React.Fragment>
<div className="card--inline">
2020-03-19 15:38:20 +01:00
<ClaimPreview uri={stats.VideoURITopAllTime} />
</div>
<div className="section__subtitle card__data-subtitle">
<span>
{__('%all_time_top_views% views - %all_time_views_weekly_change% this week', {
all_time_top_views: stats.VideoViewsTopAllTime,
all_time_views_weekly_change: stats.VideoViewChangeTopAllTime,
})}
</span>
2020-06-08 20:42:29 +02:00
{stats.VideoViewChangeTopAllTime > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
2020-03-18 22:14:11 +01:00
</div>
</React.Fragment>
}
/>
</div>
)}
</React.Fragment>
);
}