diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx
index 8ae4e07d0..bf19a376d 100644
--- a/ui/component/channelSelector/view.jsx
+++ b/ui/component/channelSelector/view.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
import React from 'react';
import ChannelThumbnail from 'component/channelThumbnail';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
-import ClaimPreviewTitle from 'component/claimPreviewTitle';
+import ChannelTitle from 'component/channelTitle';
import Icon from 'component/common/icon';
type Props = {
@@ -14,17 +14,17 @@ type Props = {
};
type ListItemProps = {
- url: string,
+ uri: string,
isSelected?: boolean,
};
function ChannelListItem(props: ListItemProps) {
- const { url, isSelected = false } = props;
+ const { uri, isSelected = false } = props;
return (
-
-
+
+
{isSelected && }
);
@@ -33,7 +33,7 @@ function ChannelListItem(props: ListItemProps) {
function ChannelSelector(props: Props) {
const { channels, selectedChannelUrl, onChannelSelect } = props;
- if (!selectedChannelUrl) {
+ if (!channels || !selectedChannelUrl) {
return null;
}
@@ -41,13 +41,13 @@ function ChannelSelector(props: Props) {
+ )}
+
+ );
+}
diff --git a/ui/page/creatorDashboard/index.js b/ui/page/creatorDashboard/index.js
index 35d76bc8c..42371ff32 100644
--- a/ui/page/creatorDashboard/index.js
+++ b/ui/page/creatorDashboard/index.js
@@ -1,10 +1,16 @@
+import * as MODALS from 'constants/modal_types';
import { connect } from 'react-redux';
import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
-import Welcome from './view';
+import { doOpenModal } from 'redux/actions/app';
+import CreatorDashboardPage from './view';
const select = state => ({
channels: selectMyChannelClaims(state),
fetchingChannels: selectFetchingMyChannels(state),
});
-export default connect(select)(Welcome);
+const perform = dispatch => ({
+ openChannelCreateModal: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
+});
+
+export default connect(select, perform)(CreatorDashboardPage);
diff --git a/ui/page/creatorDashboard/view.jsx b/ui/page/creatorDashboard/view.jsx
index f0178182f..07cff9633 100644
--- a/ui/page/creatorDashboard/view.jsx
+++ b/ui/page/creatorDashboard/view.jsx
@@ -1,125 +1,39 @@
// @flow
-import * as ICONS from 'constants/icons';
import React from 'react';
import Page from 'component/page';
-import { Lbryio } from 'lbryinc';
-import ChannelSelector from 'component/channelSelector';
-import ClaimPreview from 'component/claimPreview';
-import Card from 'component/common/card';
import Spinner from 'component/spinner';
-import Icon from 'component/common/icon';
-import usePersistedState from 'effects/use-persisted-state';
+import Button from 'component/button';
+import CreatorAnalytics from 'component/creatorAnalytics';
type Props = {
channels: Array,
+ fetchingChannels: boolean,
+ openChannelCreateModal: () => void,
};
export default function CreatorDashboardPage(props: Props) {
- const { channels } = props;
- const [stats, setStats] = React.useState();
- const [selectedChannelUrl, setSelectedChannelUrl] = usePersistedState('analytics-selected-channel');
- const [fetchingStats, setFetchingStats] = React.useState(false);
- const topChannel =
- channels &&
- channels.reduce((top, channel) => {
- const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0;
- const currentClaimCount = (channel && channel.meta && channel.meta.claims_in_channel) || 0;
- // $FlowFixMe
- return topClaimCount >= currentClaimCount ? top : channel.canonical_url;
- });
-
- const selectedChannelClaim = channels && channels.find(claim => claim.canonical_url === selectedChannelUrl);
- const selectedChannelClaimId = selectedChannelClaim && selectedChannelClaim.claim_id;
-
- React.useEffect(() => {
- // set default channel
- if (!selectedChannelUrl && topChannel) {
- setSelectedChannelUrl(topChannel);
- }
- }, [selectedChannelUrl, topChannel]);
-
- React.useEffect(() => {
- if (selectedChannelClaimId && !fetchingStats) {
- setFetchingStats(true);
- Lbryio.call('reports', 'content', { claim_id: selectedChannelClaimId })
- .then(res => {
- setFetchingStats(false);
- setStats(res);
- })
- .catch(() => {
- setFetchingStats(false);
- });
- }
- }, [selectedChannelClaimId, setFetchingStats]);
+ const { channels, fetchingChannels, openChannelCreateModal } = props;
return (
-
- {
- setStats(null);
- setSelectedChannelUrl(newChannelUrl);
- }}
- />
-
- {fetchingStats && !stats && (
+ {fetchingChannels && (
)}
- {!fetchingStats && !stats && This channel doesn't have any publishes
}
- {stats && (
-
-
-
{stats.ChannelSubs} followers}
- icon={ICONS.SUBSCRIBE}
- subtitle={
-
-
- {stats.ChannelSubChange > 0 ? '+' : '-'} {stats.ChannelSubChange || 0} this week
-
- {stats.ChannelSubChange > 0 && }
-
- }
- />
- {stats.AllContentViews} views}
- subtitle={{stats.AllContentViewsChange || 0} this week}
- />
-
-
- Most Viewed Claim
-
- }
- body={
-
-
-
-
- {stats.VideoViewsTopAllTime} views - {stats.VideoViewChangeTopAllTime} new
-
- {stats.VideoViewChangeTopAllTime > 0 && (
-
- )}
-
- }
- />
-
-
- }
- />
-
+ {!fetchingChannels && (!channels || !channels.length) && (
+
+
+
{__("You haven't created a channel yet, let's fix that!")}
+
+
+
+
+
)}
+
+ {!fetchingChannels && channels && channels.length && }
);
}
diff --git a/ui/scss/component/_yrbl.scss b/ui/scss/component/_yrbl.scss
index 1689936e5..c637a66e9 100644
--- a/ui/scss/component/_yrbl.scss
+++ b/ui/scss/component/_yrbl.scss
@@ -9,7 +9,7 @@
.yrbl {
height: 20rem;
- margin-right: var(--spacing-large);
+ margin-right: calc(var(--spacing-xlarge) * 2);
@media (max-width: $breakpoint-small) {
height: 10rem;
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 68ca05e56..b879cbf9b 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -12,7 +12,7 @@
}
.section--small {
- max-width: 35rem;
+ max-width: 40rem;
}
.section__header {