Limit channel-creation count from the UI (#886)

## Issue
534 prevent new channel creation over x channels

## Notes
Also handled from the API call (`doCreateChannel`) in case there are other UI components that create channels.

.env.defaults

@@ -88,6 +88,7 @@ ENABLE_NO_SOURCE_CLAIMS=true
 ENABLE_PREROLL_ADS=true
 CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS=4
 CHANNEL_STAKED_LEVEL_LIVESTREAM=5
+CHANNEL_CREATION_LIMIT=5
 WEB_PUBLISH_SIZE_LIMIT_GB=4
 LIGHTHOUSE_DEFAULT_TYPES=audio,video
 

config.js

@@ -61,6 +61,7 @@ const config = {
   ENABLE_PREROLL_ADS: process.env.ENABLE_PREROLL_ADS === 'true',
   CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS: process.env.CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS,
   CHANNEL_STAKED_LEVEL_LIVESTREAM: process.env.CHANNEL_STAKED_LEVEL_LIVESTREAM,
+  CHANNEL_CREATION_LIMIT: process.env.CHANNEL_CREATION_LIMIT,
   WEB_PUBLISH_SIZE_LIMIT_GB: process.env.WEB_PUBLISH_SIZE_LIMIT_GB,
   LOADING_BAR_COLOR: process.env.LOADING_BAR_COLOR,
   SIMPLE_SITE: process.env.SIMPLE_SITE === 'true',

static/app-strings.json

@@ -1413,6 +1413,7 @@
   "Change to list layout": "Change to list layout",
   "Change to tile layout": "Change to tile layout",
   "Create a channel": "Create a channel",
+  "Sorry, you have exceeded the channel creation limit.": "Sorry, you have exceeded the channel creation limit.",
   "Credit Details": "Credit Details",
   "LBRY Credits": "LBRY Credits",
   "Mark as read": "Mark as read",

ui/page/channelNew/index.js

@@ -3,11 +3,13 @@ import { connect } from 'react-redux';
 import { selectBalance } from 'redux/selectors/wallet';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { doClaimRewardType } from 'redux/actions/rewards';
+import { selectIsMyChannelCountOverLimit } from 'redux/selectors/claims';
 import ChannelNew from './view';
 
 const select = (state) => ({
   balance: selectBalance(state),
   isAuthenticated: selectUserVerifiedEmail(state),
+  channelCountOverLimit: selectIsMyChannelCountOverLimit(state),
 });
 
 export default connect(select, (dispatch) => ({

ui/page/channelNew/view.jsx

@@ -10,10 +10,11 @@ type Props = {
   balance: number,
   claimConfirmEmailReward: () => void,
   isAuthenticated: boolean,
+  channelCountOverLimit: boolean,
 };
 
 function ChannelNew(props: Props) {
-  const { balance, claimConfirmEmailReward, isAuthenticated } = props;
+  const { balance, claimConfirmEmailReward, isAuthenticated, channelCountOverLimit } = props;
   const { push, location } = useHistory();
   const urlSearchParams = new URLSearchParams(location.search);
   const redirectUrl = urlSearchParams.get('redirect');
@@ -29,8 +30,12 @@ function ChannelNew(props: Props) {
     <Page noSideNavigation noFooter backout={{ title: __('Create a channel'), backLabel: __('Cancel') }}>
       {emptyBalance && <YrblWalletEmpty />}
 
+      {channelCountOverLimit && (
+        <div className="empty empty--centered">{__('Sorry, you have exceeded the channel creation limit.')}</div>
+      )}
+
       <ChannelEdit
-        disabled={emptyBalance}
+        disabled={emptyBalance || channelCountOverLimit}
         onDone={() => {
           push(redirectUrl || `/$/${PAGES.CHANNELS}`);
         }}

ui/redux/actions/claims.js

@@ -11,6 +11,7 @@ import {
   selectMyChannelClaims,
   selectPendingClaimsById,
   selectClaimIsMine,
+  selectIsMyChannelCountOverLimit,
 } from 'redux/selectors/claims';
 
 import { doFetchTxoPage } from 'redux/actions/wallet';
@@ -390,11 +391,22 @@ export function doClearChannelErrors() {
 }
 
 export function doCreateChannel(name: string, amount: number, optionalParams: any, onConfirm: any) {
-  return (dispatch: Dispatch) => {
+  return (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const channelCountOverLimit = selectIsMyChannelCountOverLimit(state);
+
     dispatch({
       type: ACTIONS.CREATE_CHANNEL_STARTED,
     });
 
+    if (channelCountOverLimit) {
+      dispatch({
+        type: ACTIONS.CREATE_CHANNEL_FAILED,
+        data: 'Channel limit exceeded',
+      });
+      return;
+    }
+
     const createParams: {
       name: string,
       bid: string,

ui/redux/selectors/claims.js

@@ -1,5 +1,7 @@
 // @flow
+import { CHANNEL_CREATION_LIMIT } from 'config';
 import { normalizeURI, parseURI, isURIValid } from 'util/lbryURI';
+import { selectYoutubeChannels } from 'redux/selectors/user';
 import { selectSupportsByOutpoint } from 'redux/selectors/wallet';
 import { createSelector } from 'reselect';
 import { createCachedSelector } from 're-reselect';
@@ -773,3 +775,19 @@ export const selectUpdatingCollection = (state: State) => selectState(state).upd
 export const selectUpdateCollectionError = (state: State) => selectState(state).updateCollectionError;
 export const selectCreatingCollection = (state: State) => selectState(state).creatingCollection;
 export const selectCreateCollectionError = (state: State) => selectState(state).createCollectionError;
+
+export const selectIsMyChannelCountOverLimit = createSelector(
+  selectMyChannelClaimIds,
+  selectYoutubeChannels,
+  (myClaimIds, ytChannels: ?Array<{ channel_claim_id: string }>) => {
+    if (myClaimIds) {
+      if (ytChannels && ytChannels.length > 0) {
+        // $FlowFixMe - null 'ytChannels' already excluded
+        const ids = myClaimIds.filter((id) => !ytChannels.some((yt) => yt.channel_claim_id === id));
+        return ids.length > CHANNEL_CREATION_LIMIT;
+      }
+      return myClaimIds.length > CHANNEL_CREATION_LIMIT;
+    }
+    return false;
+  }
+);