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

480 lines
16 KiB
React
Raw Normal View History

2019-07-02 19:54:42 +02:00
// @flow
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React from 'react';
2020-08-25 21:54:06 +02:00
import classnames from 'classnames';
import { FormField } from 'component/common/form';
2019-07-23 10:05:51 +02:00
import Button from 'component/button';
2019-11-22 22:13:00 +01:00
import TagsSearch from 'component/tagsSearch';
import { FF_MAX_CHARS_IN_DESCRIPTION_CHANNEL } from 'constants/form-field';
2020-06-21 18:51:06 +02:00
import ErrorText from 'component/common/error-text';
2020-06-29 21:54:07 +02:00
import ChannelThumbnail from 'component/channelThumbnail';
import { isNameValid, parseURI } from 'lbry-redux';
import ClaimAbandonButton from 'component/claimAbandonButton';
2020-07-02 19:18:06 +02:00
import { useHistory } from 'react-router-dom';
2020-06-29 21:54:07 +02:00
import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR, ESTIMATED_FEE } from 'constants/claim';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import Card from 'component/common/card';
2020-07-02 19:18:06 +02:00
import * as PAGES from 'constants/pages';
import analytics from 'analytics';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
const LANG_NONE = 'none';
2020-07-02 18:18:59 +02:00
const MAX_TAG_SELECT = 5;
2019-07-02 19:54:42 +02:00
type Props = {
claim: ChannelClaim,
2020-06-29 21:54:07 +02:00
title: string,
2020-07-03 17:03:29 +02:00
amount: number,
2020-07-02 19:39:29 +02:00
coverUrl: string,
thumbnailUrl: string,
2019-07-02 19:54:42 +02:00
location: { search: string },
description: string,
website: string,
email: string,
balance: number,
tags: Array<string>,
locations: Array<string>,
languages: Array<string>,
2020-06-21 18:51:06 +02:00
updateChannel: any => Promise<any>,
2020-06-22 17:19:55 +02:00
updatingChannel: boolean,
2020-06-29 21:54:07 +02:00
updateError: string,
createChannel: any => Promise<any>,
createError: string,
creatingChannel: boolean,
clearChannelErrors: () => void,
2020-06-29 21:54:07 +02:00
onDone: () => void,
openModal: (
id: string,
{ onUpdate: string => void, assetName: string, helpText: string, currentValue: string, title: string }
) => void,
2020-06-29 21:54:07 +02:00
uri: string,
2020-09-02 22:08:37 +02:00
disabled: boolean,
2019-07-02 19:54:42 +02:00
};
function ChannelForm(props: Props) {
const {
2020-06-29 21:54:07 +02:00
uri,
claim,
2020-07-03 16:44:29 +02:00
amount,
2019-07-02 19:54:42 +02:00
title,
description,
website,
email,
2020-07-02 19:39:29 +02:00
thumbnailUrl,
coverUrl,
2019-07-02 19:54:42 +02:00
tags,
locations,
languages = [],
2020-06-29 21:54:07 +02:00
onDone,
2019-07-02 19:54:42 +02:00
updateChannel,
2020-06-21 18:51:06 +02:00
updateError,
2020-06-22 17:19:55 +02:00
updatingChannel,
2020-06-29 21:54:07 +02:00
createChannel,
creatingChannel,
createError,
clearChannelErrors,
2020-06-29 21:54:07 +02:00
openModal,
2020-08-25 21:54:06 +02:00
disabled,
2019-07-02 19:54:42 +02:00
} = props;
const [nameError, setNameError] = React.useState(undefined);
const [bidError, setBidError] = React.useState('');
const [coverError, setCoverError] = React.useState(false);
2020-06-29 21:54:07 +02:00
const { claim_id: claimId } = claim || {};
2020-07-02 18:18:59 +02:00
const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
2020-06-29 21:54:07 +02:00
const { channelName } = parseURI(uri);
const name = params.name;
const isNewChannel = !uri;
2020-07-02 19:18:06 +02:00
const { replace } = useHistory();
const languageParam = params.languages;
const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
const secondaryLanguage = Array.isArray(languageParam) && languageParam.length >= 2 && languageParam[1];
2020-06-29 21:54:07 +02:00
function getChannelParams() {
// fill this in with sdk data
const channelParams: {
website: string,
email: string,
2020-07-02 19:39:29 +02:00
coverUrl: string,
thumbnailUrl: string,
description: string,
title: string,
amount: number,
languages: ?Array<string>,
locations: ?Array<string>,
tags: ?Array<{ name: string }>,
claim_id?: string,
} = {
website,
email,
2020-07-02 19:39:29 +02:00
coverUrl,
thumbnailUrl,
description,
title,
2020-07-03 17:03:29 +02:00
amount: amount || 0.001,
languages: languages || [],
locations: locations || [],
tags: tags
? tags.map(tag => {
return { name: tag };
})
: [],
};
if (claimId) {
channelParams['claim_id'] = claimId;
2020-06-29 21:54:07 +02:00
}
return channelParams;
}
2019-07-02 19:54:42 +02:00
function handleBidChange(bid: number) {
2019-07-02 19:54:42 +02:00
const { balance, amount } = props;
2020-07-03 16:23:49 +02:00
const totalAvailableBidAmount = (parseFloat(amount) || 0.0) + (parseFloat(balance) || 0.0);
2019-07-02 19:54:42 +02:00
setParams({ ...params, amount: bid });
2020-06-29 21:54:07 +02:00
2019-07-02 19:54:42 +02:00
if (bid <= 0.0 || isNaN(bid)) {
setBidError(__('Deposit cannot be 0'));
} else if (totalAvailableBidAmount < bid) {
setBidError(
__('Deposit cannot be higher than your available balance: %balance%', { balance: totalAvailableBidAmount })
);
} else if (totalAvailableBidAmount - bid < ESTIMATED_FEE) {
setBidError(__('Please decrease your deposit to account for transaction fees'));
} else if (bid < MINIMUM_PUBLISH_BID) {
2019-07-02 19:54:42 +02:00
setBidError(__('Your deposit must be higher'));
2020-06-29 21:54:07 +02:00
} else {
setBidError('');
2019-07-02 19:54:42 +02:00
}
}
2019-07-02 19:54:42 +02:00
function handleLanguageChange(index, code) {
let langs = [...languageParam];
if (index === 0) {
if (code === LANG_NONE) {
// clear all
langs = [];
} else {
langs[0] = code;
}
} else {
if (code === LANG_NONE || code === langs[0]) {
langs.splice(1, 1);
} else {
langs[index] = code;
}
}
setParams({ ...params, languages: langs });
}
function handleThumbnailChange(thumbnailUrl: string) {
2020-07-02 19:39:29 +02:00
setParams({ ...params, thumbnailUrl });
}
2019-07-02 19:54:42 +02:00
function handleCoverChange(coverUrl: string) {
2020-07-02 19:39:29 +02:00
setParams({ ...params, coverUrl });
}
function handleSubmit() {
2020-06-29 21:54:07 +02:00
if (uri) {
updateChannel(params).then(success => {
if (success) {
onDone();
}
});
} else {
createChannel(params).then(success => {
if (success) {
analytics.apiLogPublish(success);
2020-06-29 21:54:07 +02:00
onDone();
}
});
}
}
React.useEffect(() => {
let nameError;
if (!name && name !== undefined) {
nameError = __('A name is required for your url');
} else if (!isNameValid(name, false)) {
nameError = INVALID_NAME_ERROR;
}
setNameError(nameError);
}, [name]);
2020-03-13 23:15:37 +01:00
React.useEffect(() => {
clearChannelErrors();
}, [clearChannelErrors]);
2019-07-02 19:54:42 +02:00
// TODO clear and bail after submit
return (
2020-06-29 21:54:07 +02:00
<>
2020-08-25 21:54:06 +02:00
<div className={classnames('main--contained', { 'card--disabled': disabled })}>
<header className="channel-cover">
<div className="channel__quick-actions">
2020-06-29 21:54:07 +02:00
<Button
button="alt"
title={__('Cover')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: coverUrl => handleCoverChange(coverUrl),
title: __('Edit Cover Image'),
2020-07-02 19:39:29 +02:00
helpText: __('(6.25:1)'),
assetName: __('Cover Image'),
2020-07-02 19:39:29 +02:00
currentValue: params.coverUrl,
2020-06-29 21:54:07 +02:00
})
2020-06-21 18:51:06 +02:00
}
2020-06-29 21:54:07 +02:00
icon={ICONS.CAMERA}
iconSize={18}
/>
</div>
{params.coverUrl &&
(coverError ? (
<div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
) : (
<img className="channel-cover__custom" src={params.coverUrl} onError={() => setCoverError(true)} />
))}
2020-06-29 21:54:07 +02:00
<div className="channel__primary-info">
<div className="channel__edit-thumb">
<Button
button="alt"
title={__('Edit')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: v => handleThumbnailChange(v),
title: __('Edit Thumbnail Image'),
2020-07-02 19:39:29 +02:00
helpText: __('(1:1)'),
assetName: __('Thumbnail'),
2020-07-02 19:39:29 +02:00
currentValue: params.thumbnailUrl,
2020-06-29 21:54:07 +02:00
})
}
icon={ICONS.CAMERA}
iconSize={18}
/>
</div>
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
2020-07-02 19:39:29 +02:00
thumbnailPreview={params.thumbnailUrl}
2020-06-29 21:54:07 +02:00
allowGifs
showDelayedMessage
2020-06-29 21:54:07 +02:00
/>
<h1 className="channel__title">
{params.title || (channelName && '@' + channelName) || (params.name && '@' + params.name)}
</h1>
</div>
<div className="channel-cover__gradient" />
</header>
<Tabs>
<TabList className="tabs__list--channel-page">
<Tab>{__('General')}</Tab>
2020-09-04 19:14:48 +02:00
<Tab>{__('Credit Details')}</Tab>
<Tab>{__('Tags')}</Tab>
<Tab>{__('Other')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Card
body={
<>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label htmlFor="channel_name">{__('Name')}</label>
<div className="form-field__prefix">@</div>
</fieldset-section>
2020-06-29 21:54:07 +02:00
<FormField
autoFocus={isNewChannel}
type="text"
name="channel_name"
placeholder={__('MyAwesomeChannel')}
value={params.name || channelName}
error={nameError}
disabled={!isNewChannel}
onChange={e => setParams({ ...params, name: e.target.value })}
/>
</fieldset-group>
{!isNewChannel && <span className="form-field__help">{__('This field cannot be changed.')}</span>}
2020-06-29 21:54:07 +02:00
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('My Awesome Channel')}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
onChange={text => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION_CHANNEL}
/>
</>
}
2020-06-29 21:54:07 +02:00
/>
</TabPanel>
<TabPanel>
<Card
body={
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
2020-09-10 17:54:41 +02:00
label={<LbcSymbol postfix={__('Deposit')} size={14} />}
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
helper={
<>
{__('Increasing your deposit can help your channel be discovered more easily.')}
<WalletSpendableBalanceHelp inline />
</>
}
/>
}
2020-06-29 21:54:07 +02:00
/>
</TabPanel>
<TabPanel>
<Card
body={
<TagsSearch
suggestMature
disableAutoFocus
2020-07-02 18:18:59 +02:00
limitSelect={MAX_TAG_SELECT}
tagsPassedIn={params.tags || []}
label={__('Selected Tags')}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
onSelect={newTags => {
newTags.forEach(newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] });
} else {
// If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
}
});
}}
/>
}
/>
</TabPanel>
<TabPanel>
<Card
body={
<>
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
<FormField
type="text"
name="content_email2"
label={__('Email')}
placeholder={__('yourstruly@example.com')}
disabled={false}
value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })}
/>
<FormField
name="language_select"
type="select"
label={__('Primary Language')}
onChange={event => handleLanguageChange(0, event.target.value)}
value={primaryLanguage}
helper={__('Your main content language')}
>
<option key={'pri-langNone'} value={LANG_NONE}>
{__('None selected')}
</option>
{Object.keys(SUPPORTED_LANGUAGES).map(language => (
<option key={language} value={language}>
{SUPPORTED_LANGUAGES[language]}
</option>
))}
</FormField>
<FormField
name="language_select2"
type="select"
label={__('Secondary Language')}
onChange={event => handleLanguageChange(1, event.target.value)}
value={secondaryLanguage}
disabled={!languageParam[0]}
helper={__('Your other content language')}
>
<option key={'sec-langNone'} value={LANG_NONE}>
{__('None selected')}
</option>
{Object.keys(SUPPORTED_LANGUAGES)
.filter(lang => lang !== languageParam[0])
.map(language => (
<option key={language} value={language}>
{SUPPORTED_LANGUAGES[language]}
</option>
))}
</FormField>
</>
}
/>
</TabPanel>
</TabPanels>
</Tabs>
<Card
className="card--after-tabs"
actions={
<>
<div className="section__actions">
<Button
button="primary"
disabled={
creatingChannel || updatingChannel || nameError || bidError || (isNewChannel && !params.name)
}
label={creatingChannel || updatingChannel ? __('Submitting') : __('Submit')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={onDone} />
</div>
{updateError || createError ? (
<ErrorText>{updateError || createError}</ErrorText>
) : (
<p className="help">
2020-07-03 16:32:48 +02:00
{__('After submitting, it will take a few minutes for your changes to be live for everyone.')}
</p>
)}
{!isNewChannel && (
<div className="section__actions">
2020-07-02 19:18:06 +02:00
<ClaimAbandonButton uri={uri} abandonActionCallback={() => replace(`/$/${PAGES.CHANNELS}`)} />
</div>
)}
</>
}
/>
2020-06-29 21:54:07 +02:00
</div>
</>
2019-07-02 19:54:42 +02:00
);
}
export default ChannelForm;