lbry-desktop/ui/component/channelCreate/view.jsx

142 lines
4.2 KiB
React
Raw Normal View History

// @flow
2019-12-06 20:42:44 +01:00
import React from 'react';
import { isNameValid } from 'lbry-redux';
2019-12-06 20:42:44 +01:00
import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import analytics from 'analytics';
import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
type Props = {
balance: number,
createChannel: (string, number) => Promise<any>,
onSuccess?: ({}) => void,
creatingChannel: boolean,
createChannelError: ?string,
};
type State = {
newChannelName: string,
newChannelBid: number,
newChannelNameError: string,
newChannelBidError: string,
};
class ChannelCreate extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
newChannelName: '',
2020-04-21 15:57:21 +02:00
newChannelBid: 0.01,
newChannelNameError: '',
newChannelBidError: '',
};
(this: any).handleNewChannelNameChange = this.handleNewChannelNameChange.bind(this);
(this: any).handleNewChannelBidChange = this.handleNewChannelBidChange.bind(this);
2019-12-06 20:42:44 +01:00
(this: any).handleCreateChannel = this.handleCreateChannel.bind(this);
}
handleNewChannelNameChange(event: SyntheticInputEvent<*>) {
let newChannelName = event.target.value;
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,
});
}
2019-12-06 20:42:44 +01:00
handleCreateChannel() {
const { createChannel, onSuccess } = this.props;
const { newChannelBid, newChannelName } = this.state;
const channelName = `@${newChannelName.trim()}`;
const success = channelClaim => {
analytics.apiLogPublish(channelClaim);
if (onSuccess !== undefined) {
onSuccess({ ...this.props, ...this.state });
}
};
createChannel(channelName, newChannelBid).then(success);
}
render() {
const { newChannelName, newChannelNameError, newChannelBid, newChannelBidError } = this.state;
const { creatingChannel, createChannelError } = this.props;
return (
2019-12-06 20:42:44 +01:00
<Form onSubmit={this.handleCreateChannel}>
{createChannelError && <div className="error__text">{createChannelError}</div>}
<div>
<FormField
label={__('Name')}
name="channel-input"
type="text"
placeholder={__('ChannelName')}
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))}
onWheel={e => e.stopPropagation()}
/>
<div className="card__actions">
<Button
2019-12-06 20:42:44 +01:00
type="submit"
button="primary"
label={!creatingChannel ? __('Create channel') : __('Creating channel...')}
disabled={
!newChannelName || !newChannelBid || creatingChannel || newChannelNameError || newChannelBidError
}
/>
</div>
</div>
2019-12-06 20:42:44 +01:00
</Form>
);
}
}
export default ChannelCreate;