lbry-desktop/ui/modal/modalRepost/view.jsx

212 lines
7.2 KiB
React
Raw Normal View History

2020-02-06 19:49:05 +01:00
// @flow
2020-02-10 21:49:43 +01:00
import * as ICONS from 'constants/icons';
2020-02-06 19:49:05 +01:00
import { CHANNEL_NEW, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
import React from 'react';
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
import Button from 'component/button';
import SelectChannel from 'component/selectChannel';
import ErrorText from 'component/common/error-text';
import { FormField } from 'component/common/form';
import { parseURI, isNameValid, creditsToString } from 'lbry-redux';
2020-02-10 21:49:43 +01:00
import usePersistedState from 'effects/use-persisted-state';
import I18nMessage from 'component/i18nMessage';
import analytics from 'analytics';
2020-02-06 19:49:05 +01:00
type Props = {
doHideModal: () => void,
doToast: ({ message: string }) => void,
doClearRepostError: () => void,
doRepost: StreamRepostOptions => Promise<*>,
title: string,
claim: ?StreamClaim,
balance: number,
channels: ?Array<ChannelClaim>,
doCheckPublishNameAvailability: string => Promise<*>,
2020-02-06 19:49:05 +01:00
error: ?string,
reposting: boolean,
};
function ModalRepost(props: Props) {
const {
doHideModal,
doToast,
doClearRepostError,
doRepost,
title,
claim,
balance,
channels,
error,
reposting,
doCheckPublishNameAvailability,
2020-02-06 19:49:05 +01:00
} = props;
2020-02-10 21:49:43 +01:00
const defaultName = claim && claim.name;
const contentClaimId = claim && claim.claim_id;
const [repostChannel, setRepostChannel] = usePersistedState('repost-channel');
2020-02-19 17:08:08 +01:00
const [repostBid, setRepostBid] = React.useState(0.01);
2020-02-06 19:49:05 +01:00
const [showAdvanced, setShowAdvanced] = React.useState();
const [repostName, setRepostName] = React.useState(defaultName);
const [available, setAvailable] = React.useState(true);
2020-02-10 21:49:43 +01:00
let repostBidError;
if (repostBid === 0) {
repostBidError = __('Deposit cannot be 0');
} else if (balance === repostBid) {
repostBidError = __('Please decrease your deposit to account for transaction fees');
} else if (balance < repostBid) {
repostBidError = __('Deposit cannot be higher than your balance');
} else if (repostBid < MINIMUM_PUBLISH_BID) {
repostBidError = __('Your deposit must be higher');
}
let repostNameError;
if (!repostName) {
repostNameError = __('A name is required');
} else if (!isNameValid(repostName, false)) {
repostNameError = INVALID_NAME_ERROR;
} else if (!available) {
2020-02-10 21:49:43 +01:00
repostNameError = __('You already have a claim with this name.');
}
2020-02-06 19:49:05 +01:00
React.useEffect(() => {
if ((repostNameError || repostNameError) && !showAdvanced) {
setShowAdvanced(true);
}
}, [repostBidError, repostNameError, showAdvanced, setShowAdvanced]);
2020-02-06 19:49:05 +01:00
const channelStrings = channels && channels.map(channel => channel.permanent_url).join(',');
React.useEffect(() => {
if (!repostChannel && channelStrings) {
const channels = channelStrings.split(',');
const newChannelUrl = channels[0];
2020-02-10 21:49:43 +01:00
const { claimName } = parseURI(newChannelUrl);
setRepostChannel(claimName);
2020-02-06 19:49:05 +01:00
}
}, [channelStrings]);
React.useEffect(() => {
if (repostName && isNameValid(repostName, false)) {
doCheckPublishNameAvailability(repostName).then(r => setAvailable(r));
2020-02-06 19:49:05 +01:00
}
}, [repostName, doCheckPublishNameAvailability]);
2020-02-06 19:49:05 +01:00
function handleSubmit() {
2020-02-10 21:49:43 +01:00
const channelToRepostTo = channels && channels.find(channel => channel.name === repostChannel);
if (channelToRepostTo && repostName && repostBid && repostChannel && contentClaimId) {
2020-02-06 19:49:05 +01:00
doRepost({
name: repostName,
bid: creditsToString(repostBid),
2020-02-10 21:49:43 +01:00
channel_id: channelToRepostTo.claim_id,
claim_id: contentClaimId,
}).then((repostClaim: StreamClaim) => {
analytics.apiLogPublish(repostClaim);
2020-02-06 19:49:05 +01:00
doHideModal();
2020-03-17 16:36:46 +01:00
doToast({ message: __('Woohoo! Successfully reposted this claim.') });
2020-02-06 19:49:05 +01:00
});
}
}
function handleCloseModal() {
doClearRepostError();
doHideModal();
}
return (
<Modal isOpen type="card" onAborted={handleCloseModal} onConfirmed={handleCloseModal}>
<Card
title={
<span>
Repost <em>{title}</em>
</span>
}
subtitle={
2020-02-10 21:49:43 +01:00
error ? (
<ErrorText>{__('There was an error reposting this claim. Please try again later.')}</ErrorText>
) : (
<span>{__('Repost your favorite claims to help more people discover them!')}</span>
)
2020-02-06 19:49:05 +01:00
}
2020-02-10 21:49:43 +01:00
actions={
2020-02-06 19:49:05 +01:00
<div>
<SelectChannel
label="Channel to repost on"
hideAnon
2020-02-10 21:49:43 +01:00
channel={repostChannel}
2020-02-06 19:49:05 +01:00
onChannelChange={newChannel => setRepostChannel(newChannel)}
/>
{!showAdvanced && (
<div className="section__actions">
2020-02-10 21:49:43 +01:00
<Button button="link" label={__('Advanced')} onClick={() => setShowAdvanced(true)} />
</div>
)}
{showAdvanced && (
2020-02-06 19:49:05 +01:00
<React.Fragment>
<fieldset-section>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label>{__('Name')}</label>
<div className="form-field__prefix">{`lbry://${
!repostChannel || repostChannel === CHANNEL_NEW ? '' : `${repostChannel}/`
}`}</div>
</fieldset-section>
<FormField
type="text"
name="repost_name"
value={repostName}
error={repostNameError}
onChange={event => setRepostName(event.target.value)}
/>
</fieldset-group>
</fieldset-section>
2020-02-06 19:49:05 +01:00
<div className="form-field__help">
2020-02-10 21:49:43 +01:00
<I18nMessage
tokens={{
lbry_naming_link: (
<Button button="link" label={__('community name')} href="https://lbry.com/faq/naming" />
),
}}
>
Change this to repost to a different %lbry_naming_link%.
</I18nMessage>
2020-02-06 19:49:05 +01:00
</div>
<FormField
type="number"
name="repost_bid"
min="0"
step="any"
placeholder="0.123"
className="form-field--price-amount"
label={__('Deposit (LBC)')}
postfix="LBC"
value={repostBid}
error={repostBidError}
disabled={!repostName}
onChange={event => setRepostBid(parseFloat(event.target.value))}
onWheel={e => e.stopPropagation()}
/>
</React.Fragment>
)}
2020-02-10 21:49:43 +01:00
<div className="section__actions">
<Button
icon={ICONS.REPOST}
2020-02-10 21:49:43 +01:00
disabled={reposting || repostBidError || repostNameError}
button="primary"
label={reposting ? __('Reposting') : __('Repost')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={handleCloseModal} />
</div>
2020-02-06 19:49:05 +01:00
</div>
}
/>
</Modal>
);
}
export default ModalRepost;