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

95 lines
3.2 KiB
React
Raw Normal View History

2020-03-18 18:11:37 +01:00
// @flow
import * as PAGES from 'constants/pages';
2020-03-18 18:11:37 +01:00
import React from 'react';
import Page from 'component/page';
import Spinner from 'component/spinner';
2020-03-18 22:14:11 +01:00
import Button from 'component/button';
import CreatorAnalytics from 'component/creatorAnalytics';
2020-04-22 21:07:38 +02:00
import ChannelSelector from 'component/channelSelector';
import usePersistedState from 'effects/use-persisted-state';
import Yrbl from 'component/yrbl';
import { useHistory } from 'react-router';
2020-03-18 18:11:37 +01:00
type Props = {
channels: Array<ChannelClaim>,
2020-03-18 22:14:11 +01:00
fetchingChannels: boolean,
2020-03-18 18:11:37 +01:00
};
const SELECTED_CHANNEL_QUERY_PARAM = 'channel';
2020-03-18 18:11:37 +01:00
export default function CreatorDashboardPage(props: Props) {
const { channels, fetchingChannels } = props;
const {
push,
location: { search, pathname },
} = useHistory();
const urlParams = new URLSearchParams(search);
const channelFromUrl = urlParams.get(SELECTED_CHANNEL_QUERY_PARAM);
2020-04-22 21:07:38 +02:00
const [selectedChannelUrl, setSelectedChannelUrl] = usePersistedState('analytics-selected-channel');
const hasChannels = channels && channels.length > 0;
const firstChannel = hasChannels && channels[0];
const firstChannelUrl = firstChannel && (firstChannel.canonical_url || firstChannel.permanent_url); // permanent_url is needed for pending publishes
const channelFoundForSelectedChannelUrl =
channels &&
channels.find(channel => {
return selectedChannelUrl === channel.canonical_url || selectedChannelUrl === channel.permanent_url;
});
React.useEffect(() => {
// set default channel
if ((!selectedChannelUrl || !channelFoundForSelectedChannelUrl) && firstChannelUrl) {
setSelectedChannelUrl(firstChannelUrl);
}
}, [setSelectedChannelUrl, selectedChannelUrl, firstChannelUrl, channelFoundForSelectedChannelUrl]);
2020-03-18 18:11:37 +01:00
React.useEffect(() => {
if (channelFromUrl) {
const decodedChannel = decodeURIComponent(channelFromUrl);
setSelectedChannelUrl(decodedChannel);
}
}, [channelFromUrl, setSelectedChannelUrl]);
function updateUrl(channelUrl) {
const newUrlParams = new URLSearchParams();
newUrlParams.append(SELECTED_CHANNEL_QUERY_PARAM, encodeURIComponent(channelUrl));
push(`${pathname}?${newUrlParams.toString()}`);
}
2020-03-18 18:11:37 +01:00
return (
<Page>
2020-03-18 22:14:11 +01:00
{fetchingChannels && (
2020-03-18 18:11:37 +01:00
<div className="main--empty">
<Spinner delayed />
</div>
)}
2020-03-18 22:14:11 +01:00
{!fetchingChannels && (!channels || !channels.length) && (
<Yrbl
type="happy"
title={__("You haven't created a channel yet, let's fix that!")}
2020-09-02 22:08:37 +02:00
actions={
<div className="section__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
2020-03-18 22:14:11 +01:00
</div>
}
/>
2020-03-18 18:11:37 +01:00
)}
2020-03-18 22:14:11 +01:00
2020-04-22 21:07:38 +02:00
{!fetchingChannels && channels && channels.length && (
<React.Fragment>
<div className="section">
<ChannelSelector
selectedChannelUrl={selectedChannelUrl}
onChannelSelect={newChannelUrl => {
updateUrl(newChannelUrl);
2020-04-22 21:07:38 +02:00
setSelectedChannelUrl(newChannelUrl);
}}
/>
</div>
<CreatorAnalytics uri={selectedChannelUrl} />
</React.Fragment>
)}
2020-03-18 18:11:37 +01:00
</Page>
);
}