LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Refactored SelecChannel & ChannelCreate to reduce redundancy

Browse source
This commit is contained in:
Oleg Silkin 2019-12-03 20:02:34 -05:00 committed by Sean Yesmunt
parent bcdd9eda12
commit dfe0a75209
4 changed files with 18 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ui/component/channelCreate/view.jsx
View file

@ -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,
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<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 = () => {

2
ui/component/publishForm/view.jsx
View file

@ -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} />

142
ui/component/selectChannel/view.jsx
View file

@ -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<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).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<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<*>) {
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);
}
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 (
<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>
);
}

2
ui/page/channelCreate/view.jsx
View file

@ -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 && (