Refactored SelecChannel & ChannelCreate to reduce redundancy

ui/component/channelCreate/view.jsx

@@ -6,24 +6,17 @@ import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
 import analytics from 'analytics';
 
-import { CHANNEL_NEW, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
+import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
 
 type Props = {
-  channel: string, // currently selected channel
-  channels: ?Array<ChannelClaim>,
   balance: number,
-  onChannelChange: string => void,
   createChannel: (string, number) => Promise<any>,
-  fetchChannelListMine: () => void,
+  onSuccess?: ({}) => void,
-  fetchingChannels: boolean,
-  emailVerified: boolean,
-  onSuccess: () => void,
 };
 
 type State = {
   newChannelName: string,
   newChannelBid: number,
-  addingChannel: boolean,
   creatingChannel: boolean,
   newChannelNameError: string,
   newChannelBidError: string,
@@ -37,34 +30,17 @@ class ChannelCreate extends React.PureComponent<Props, State> {
     this.state = {
       newChannelName: '',
       newChannelBid: 0.1,
-      addingChannel: false,
       creatingChannel: false,
       newChannelNameError: '',
       newChannelBidError: '',
       createChannelError: undefined,
     };
 
-    (this: any).handleChannelChange = this.handleChannelChange.bind(this);
     (this: any).handleNewChannelNameChange = this.handleNewChannelNameChange.bind(this);
     (this: any).handleNewChannelBidChange = this.handleNewChannelBidChange.bind(this);
     (this: any).handleCreateChannelClick = this.handleCreateChannelClick.bind(this);
   }
 
-  handleChannelChange(event: SyntheticInputEvent<*>) {
-    const { onChannelChange } = this.props;
-    const { newChannelBid } = this.state;
-    const channel = event.target.value;
-
-    if (channel === CHANNEL_NEW) {
-      this.setState({ addingChannel: true });
-      onChannelChange(channel);
-      this.handleNewChannelBidChange(newChannelBid);
-    } else {
-      this.setState({ addingChannel: false });
-      onChannelChange(channel);
-    }
-  }
-
   handleNewChannelNameChange(event: SyntheticInputEvent<*>) {
     let newChannelName = event.target.value;
 
@@ -103,7 +79,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
   }
 
   handleCreateChannelClick() {
-    const { balance, createChannel, onChannelChange } = this.props;
+    const { balance, createChannel, onSuccess } = this.props;
     const { newChannelBid, newChannelName } = this.state;
 
     const channelName = `@${newChannelName.trim()}`;
@@ -120,11 +96,12 @@ class ChannelCreate extends React.PureComponent<Props, State> {
     const success = channelClaim => {
       this.setState({
         creatingChannel: false,
-        addingChannel: false,
       });
       analytics.apiLogPublish(channelClaim);
-      onChannelChange(channelName);
+
-      this.props.onSuccess();
+      if (onSuccess !== undefined) {
+        onSuccess({ ...this.props, ...this.state });
+      }
     };
 
     const failure = () => {

ui/component/publishForm/view.jsx

@@ -17,7 +17,6 @@ import TagsSelect from 'component/tagsSelect';
 import PublishText from 'component/publishText';
 import PublishPrice from 'component/publishPrice';
 import PublishFile from 'component/publishFile';
-import PublishName from 'component/publishName';
 import PublishAdditionalOptions from 'component/publishAdditionalOptions';
 import PublishFormErrors from 'component/publishFormErrors';
 import SelectThumbnail from 'component/selectThumbnail';
@@ -172,7 +171,6 @@ function PublishForm(props: Props) {
           }
         />
 
-        <PublishName disabled={formDisabled} />
         <PublishPrice disabled={formDisabled} />
         <PublishAdditionalOptions disabled={formDisabled} />
 

ui/component/selectChannel/view.jsx

@@ -1,12 +1,10 @@
 // @flow
 import React, { Fragment } from 'react';
-import { isNameValid } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import BusyIndicator from 'component/common/busy-indicator';
-import Button from 'component/button';
+import ChannelCreate from 'component/channelCreate';
-import analytics from 'analytics';
 
-import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
+import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
 
 type Props = {
   channel: string, // currently selected channel
@@ -20,13 +18,7 @@ type Props = {
 };
 
 type State = {
-  newChannelName: string,
-  newChannelBid: number,
   addingChannel: boolean,
-  creatingChannel: boolean,
-  newChannelNameError: string,
-  newChannelBidError: string,
-  createChannelError: ?string,
 };
 
 class ChannelSection extends React.PureComponent<Props, State> {
@@ -34,19 +26,11 @@ class ChannelSection extends React.PureComponent<Props, State> {
     super(props);
 
     this.state = {
-      newChannelName: '',
-      newChannelBid: 0.1,
       addingChannel: false,
-      creatingChannel: false,
-      newChannelNameError: '',
-      newChannelBidError: '',
-      createChannelError: undefined,
     };
 
     (this: any).handleChannelChange = this.handleChannelChange.bind(this);
-    (this: any).handleNewChannelNameChange = this.handleNewChannelNameChange.bind(this);
+    (this: any).handleChangeToNewChannel = this.handleChangeToNewChannel.bind(this);
-    (this: any).handleNewChannelBidChange = this.handleNewChannelBidChange.bind(this);
-    (this: any).handleCreateChannelClick = this.handleCreateChannelClick.bind(this);
   }
 
   componentDidMount() {
@@ -62,106 +46,34 @@ class ChannelSection extends React.PureComponent<Props, State> {
 
   handleChannelChange(event: SyntheticInputEvent<*>) {
     const { onChannelChange } = this.props;
-    const { newChannelBid } = this.state;
     const channel = event.target.value;
 
     if (channel === CHANNEL_NEW) {
       this.setState({ addingChannel: true });
       onChannelChange(channel);
-      this.handleNewChannelBidChange(newChannelBid);
     } else {
       this.setState({ addingChannel: false });
       onChannelChange(channel);
     }
   }
 
-  handleNewChannelNameChange(event: SyntheticInputEvent<*>) {
+  handleChangeToNewChannel(props: Object) {
-    let newChannelName = event.target.value;
+    const { onChannelChange } = this.props;
+    const { newChannelName } = props;
 
-    if (newChannelName.startsWith('@')) {
+    this.setState({ addingChannel: false });
-      newChannelName = newChannelName.slice(1);
-    }
-
-    let newChannelNameError;
-    if (newChannelName.length > 0 && !isNameValid(newChannelName, false)) {
-      newChannelNameError = INVALID_NAME_ERROR;
-    }
-
-    this.setState({
-      newChannelNameError,
-      newChannelName,
-    });
-  }
-
-  handleNewChannelBidChange(newChannelBid: number) {
-    const { balance } = this.props;
-    let newChannelBidError;
-    if (newChannelBid === 0) {
-      newChannelBidError = __('Your deposit cannot be 0');
-    } else if (newChannelBid === balance) {
-      newChannelBidError = __('Please decrease your deposit to account for transaction fees');
-    } else if (newChannelBid > balance) {
-      newChannelBidError = __('Deposit cannot be higher than your balance');
-    } else if (newChannelBid < MINIMUM_PUBLISH_BID) {
-      newChannelBidError = __('Your deposit must be higher');
-    }
-
-    this.setState({
-      newChannelBid,
-      newChannelBidError,
-    });
-  }
-
-  handleCreateChannelClick() {
-    const { balance, createChannel, onChannelChange } = this.props;
-    const { newChannelBid, newChannelName } = this.state;
 
     const channelName = `@${newChannelName.trim()}`;
-
+    onChannelChange(channelName);
-    if (newChannelBid > balance) {
-      return;
-    }
-
-    this.setState({
-      creatingChannel: true,
-      createChannelError: undefined,
-    });
-
-    const success = channelClaim => {
-      this.setState({
-        creatingChannel: false,
-        addingChannel: false,
-      });
-      analytics.apiLogPublish(channelClaim);
-      onChannelChange(channelName);
-    };
-
-    const failure = () => {
-      this.setState({
-        creatingChannel: false,
-        createChannelError: __('Unable to create channel due to an internal error.'),
-      });
-    };
-
-    createChannel(channelName, newChannelBid).then(success, failure);
   }
 
   render() {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
     const { fetchingChannels, channels = [] } = this.props;
-    const {
+    const { addingChannel } = this.state;
-      newChannelName,
-      newChannelNameError,
-      newChannelBid,
-      newChannelBidError,
-      creatingChannel,
-      createChannelError,
-      addingChannel,
-    } = this.state;
 
     return (
       <Fragment>
-        {createChannelError && <div className="error-text">{createChannelError}</div>}
         {fetchingChannels ? (
           <BusyIndicator message="Updating channels" />
         ) : (
@@ -182,45 +94,9 @@ class ChannelSection extends React.PureComponent<Props, State> {
                 ))}
               <option value={CHANNEL_NEW}>{__('New channel...')}</option>
             </FormField>
+            {addingChannel && <ChannelCreate onSuccess={this.handleChangeToNewChannel} />}
           </fieldset-section>
         )}
-        {addingChannel && (
-          <div>
-            <FormField
-              label={__('Name')}
-              name="channel-input"
-              type="text"
-              placeholder={__('myChannelName')}
-              error={newChannelNameError}
-              value={newChannelName}
-              onChange={this.handleNewChannelNameChange}
-            />
-
-            <FormField
-              className="form-field--price-amount"
-              name="channel-deposit"
-              label={__('Deposit (LBC)')}
-              step="any"
-              min="0"
-              type="number"
-              helper={__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}
-              error={newChannelBidError}
-              value={newChannelBid}
-              onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
-            />
-
-            <div className="card__actions">
-              <Button
-                button="primary"
-                label={!creatingChannel ? __('Create channel') : __('Creating channel...')}
-                onClick={this.handleCreateChannelClick}
-                disabled={
-                  !newChannelName || !newChannelBid || creatingChannel || newChannelNameError || newChannelBidError
-                }
-              />
-            </div>
-          </div>
-        )}
       </Fragment>
     );
   }

ui/page/channelCreate/view.jsx

@@ -21,7 +21,7 @@ function ChannelCreatePage(props: Props) {
     }
   }
   let history = useHistory();
-  const returnToChannelList = () => history.push(`/$/${PAGES.CHANNELS}`);
+  const returnToChannelList = _ => history.push(`/$/${PAGES.CHANNELS}`);
   return (
     <Page>
       {balance === 0 && (