diff --git a/ui/component/channelCreate/view.jsx b/ui/component/channelCreate/view.jsx index 2ea11a5cf..ccf0b48fa 100644 --- a/ui/component/channelCreate/view.jsx +++ b/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, balance: number, - onChannelChange: string => void, createChannel: (string, number) => Promise, - fetchChannelListMine: () => void, - fetchingChannels: boolean, - emailVerified: boolean, - onSuccess: () => void, + 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 { 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 { } 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 { 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 = () => { diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index dcba1dfe6..43a1d6112 100644 --- a/ui/component/publishForm/view.jsx +++ b/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) { } /> - diff --git a/ui/component/selectChannel/view.jsx b/ui/component/selectChannel/view.jsx index 09650b20a..1222241b9 100644 --- a/ui/component/selectChannel/view.jsx +++ b/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 analytics from 'analytics'; +import ChannelCreate from 'component/channelCreate'; -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 { @@ -34,19 +26,11 @@ class ChannelSection extends React.PureComponent { 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).handleNewChannelBidChange = this.handleNewChannelBidChange.bind(this); - (this: any).handleCreateChannelClick = this.handleCreateChannelClick.bind(this); + (this: any).handleChangeToNewChannel = this.handleChangeToNewChannel.bind(this); } componentDidMount() { @@ -62,106 +46,34 @@ class ChannelSection extends React.PureComponent { 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; + handleChangeToNewChannel(props: Object) { + const { onChannelChange } = this.props; + const { newChannelName } = props; - if (newChannelName.startsWith('@')) { - 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; + this.setState({ addingChannel: false }); const channelName = `@${newChannelName.trim()}`; - - 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); + onChannelChange(channelName); } render() { const channel = this.state.addingChannel ? 'new' : this.props.channel; const { fetchingChannels, channels = [] } = this.props; - const { - newChannelName, - newChannelNameError, - newChannelBid, - newChannelBidError, - creatingChannel, - createChannelError, - addingChannel, - } = this.state; + const { addingChannel } = this.state; return ( - {createChannelError &&
{createChannelError}
} {fetchingChannels ? ( ) : ( @@ -182,45 +94,9 @@ class ChannelSection extends React.PureComponent { ))} + {addingChannel && } )} - {addingChannel && ( -
- - - this.handleNewChannelBidChange(parseFloat(event.target.value))} - /> - -
-
-
- )}
); } diff --git a/ui/page/channelCreate/view.jsx b/ui/page/channelCreate/view.jsx index 62b6446b2..383b3fda3 100644 --- a/ui/page/channelCreate/view.jsx +++ b/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 ( {balance === 0 && (