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

158 lines
4.5 KiB
React
Raw Normal View History

// @flow
2019-10-03 23:40:54 +02:00
import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
2020-07-30 06:03:56 +02:00
import React, { useState, useEffect } from 'react';
import { isNameValid } from 'lbry-redux';
import { FormField } from 'component/common/form';
import NameHelpText from './name-help-text';
import BidHelpText from './bid-help-text';
2019-09-27 20:56:15 +02:00
import Card from 'component/common/card';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
type Props = {
name: string,
channel: string,
uri: string,
2019-06-27 22:27:38 +02:00
bid: number,
balance: number,
disabled: boolean,
isStillEditing: boolean,
myClaimForUri: ?StreamClaim,
isResolvingUri: boolean,
amountNeededForTakeover: number,
prepareEdit: ({}, string) => void,
updatePublishForm: ({}) => void,
2020-07-30 00:55:48 +02:00
autoPopulateName: boolean,
setAutoPopulateName: boolean => void,
};
2019-07-02 06:49:21 +02:00
function PublishName(props: Props) {
const {
name,
channel,
uri,
disabled,
isStillEditing,
myClaimForUri,
2019-06-27 22:27:38 +02:00
bid,
isResolvingUri,
amountNeededForTakeover,
prepareEdit,
updatePublishForm,
balance,
2020-07-30 00:55:48 +02:00
autoPopulateName,
setAutoPopulateName,
} = props;
const [nameError, setNameError] = useState(undefined);
const [bidError, setBidError] = useState(undefined);
const previousBidAmount = myClaimForUri && Number(myClaimForUri.amount);
function editExistingClaim() {
if (myClaimForUri) {
prepareEdit(myClaimForUri, uri);
}
}
2020-07-30 00:55:48 +02:00
2020-07-30 06:03:56 +02:00
function handleNameChange(event) {
updatePublishForm({ name: event.target.value });
if (autoPopulateName) {
setAutoPopulateName(false);
}
}
useEffect(() => {
const hasName = name && name.trim() !== '';
// Enable name autopopulation from title
if (!hasName && !autoPopulateName) {
setAutoPopulateName(true);
}
}, [name, autoPopulateName, setAutoPopulateName]);
useEffect(() => {
let nameError;
if (!name) {
nameError = __('A name is required');
} else if (!isNameValid(name, false)) {
2019-10-03 23:40:54 +02:00
nameError = INVALID_NAME_ERROR;
}
setNameError(nameError);
}, [name]);
useEffect(() => {
const totalAvailableBidAmount = previousBidAmount ? previousBidAmount + balance : balance;
let bidError;
if (bid === 0) {
bidError = __('Deposit cannot be 0');
} else if (bid < MINIMUM_PUBLISH_BID) {
bidError = __('Your deposit must be higher');
} else if (totalAvailableBidAmount < bid) {
bidError = __('Deposit cannot be higher than your available balance: %balance%', {
balance: totalAvailableBidAmount,
});
} else if (totalAvailableBidAmount <= bid + 0.05) {
2020-09-02 22:08:37 +02:00
bidError = __('Please decrease your deposit to account for transaction fees or acquire more LBRY Credits.');
}
setBidError(bidError);
updatePublishForm({ bidError: bidError });
2020-03-27 17:49:41 +01:00
}, [bid, previousBidAmount, balance, updatePublishForm]);
return (
2019-09-27 20:56:15 +02:00
<Card
actions={
<React.Fragment>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label>{__('Name')}</label>
<div className="form-field__prefix">{`lbry://${
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
}`}</div>
</fieldset-section>
<FormField
type="text"
name="content_name"
value={name}
disabled={disabled}
error={nameError}
onChange={handleNameChange}
/>
2019-09-27 20:56:15 +02:00
</fieldset-group>
<div className="form-field__help">
<NameHelpText
uri={uri}
isStillEditing={isStillEditing}
myClaimForUri={myClaimForUri}
onEditMyClaim={editExistingClaim}
/>
</div>
<FormField
type="number"
name="content_bid"
min="0"
step="any"
placeholder="0.123"
className="form-field--price-amount"
2020-09-10 17:54:41 +02:00
label={<LbcSymbol postfix={__('Deposit')} size={12} />}
2019-09-27 20:56:15 +02:00
value={bid}
error={bidError}
disabled={!name}
onChange={event => updatePublishForm({ bid: parseFloat(event.target.value) })}
onWheel={e => e.stopPropagation()}
2019-09-27 20:56:15 +02:00
helper={
<BidHelpText
uri={'lbry://' + name}
2019-09-27 20:56:15 +02:00
amountNeededForTakeover={amountNeededForTakeover}
isResolvingUri={isResolvingUri}
/>
}
/>
</React.Fragment>
}
/>
);
}
2019-07-02 06:49:21 +02:00
export default PublishName;