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

210 lines
6 KiB
React
Raw Normal View History

2019-07-02 19:54:42 +02:00
// @flow
import React, { useState } from 'react';
import { FormField } from 'component/common/form';
2019-07-23 10:05:51 +02:00
import Button from 'component/button';
2019-07-22 17:47:48 +02:00
import SelectAsset from 'component/selectAsset';
2019-10-03 20:49:07 +02:00
import * as PAGES from 'constants/pages';
import { MINIMUM_PUBLISH_BID } from 'constants/claim';
2019-11-22 22:13:00 +01:00
import TagsSearch from 'component/tagsSearch';
2019-07-02 19:54:42 +02:00
type Props = {
claim: ChannelClaim,
2019-07-02 19:54:42 +02:00
title: ?string,
amount: string,
2019-09-23 17:02:30 +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>,
updateChannel: any => void,
updateThumb: string => void,
updateCover: string => void,
2019-07-23 10:05:51 +02:00
setEditing: boolean => void,
2019-07-02 19:54:42 +02:00
};
function ChannelForm(props: Props) {
const {
claim,
2019-07-02 19:54:42 +02:00
title,
2019-09-23 17:02:30 +02:00
coverUrl,
2019-07-02 19:54:42 +02:00
description,
website,
email,
2019-09-23 17:02:30 +02:00
thumbnailUrl,
2019-07-02 19:54:42 +02:00
tags,
locations,
languages,
amount,
2019-07-23 10:05:51 +02:00
setEditing,
2019-07-02 19:54:42 +02:00
updateChannel,
updateThumb,
updateCover,
} = props;
const { claim_id: claimId } = claim;
2019-07-02 19:54:42 +02:00
// fill this in with sdk data
const channelParams = {
2019-09-23 17:02:30 +02:00
website,
email,
coverUrl,
thumbnailUrl,
description,
title,
amount,
claim_id: claimId,
2019-07-02 19:54:42 +02:00
languages: languages || [],
locations: locations || [],
2019-07-18 19:04:30 +02:00
tags: tags
? tags.map(tag => {
return { name: tag };
})
: [],
2019-07-02 19:54:42 +02:00
};
const [params, setParams] = useState(channelParams);
const [bidError, setBidError] = useState('');
// If a user changes tabs, update the url so it stays on the same page if they refresh.
// We don't want to use links here because we can't animate the tab change and using links
// would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
const handleBidChange = (bid: number) => {
const { balance, amount } = props;
const totalAvailableBidAmount = parseFloat(amount) + parseFloat(balance);
setParams({ ...params, amount: bid });
setBidError('');
if (bid <= 0.0 || isNaN(bid)) {
setBidError(__('Deposit cannot be 0'));
} else if (totalAvailableBidAmount === bid) {
setBidError(__('Please decrease your deposit to account for transaction fees'));
} else if (totalAvailableBidAmount < bid) {
setBidError(__('Deposit cannot be higher than your balance'));
} else if (bid < MINIMUM_PUBLISH_BID) {
2019-07-02 19:54:42 +02:00
setBidError(__('Your deposit must be higher'));
}
};
2019-09-23 17:02:30 +02:00
const handleThumbnailChange = (thumbnailUrl: string) => {
setParams({ ...params, thumbnailUrl });
updateThumb(thumbnailUrl);
2019-07-02 19:54:42 +02:00
};
2019-09-23 17:02:30 +02:00
const handleCoverChange = (coverUrl: string) => {
setParams({ ...params, coverUrl });
updateCover(coverUrl);
2019-07-02 19:54:42 +02:00
};
const handleSubmit = () => {
updateChannel(params);
setEditing(false);
};
2020-03-13 23:15:37 +01:00
2019-07-02 19:54:42 +02:00
// TODO clear and bail after submit
return (
<section className={'card--section'}>
<SelectAsset
onUpdate={v => handleThumbnailChange(v)}
currentValue={params.thumbnailUrl}
assetName={'Thumbnail'}
2019-12-13 16:00:00 +01:00
recommended={__('Recommended ratio is 1:1')}
/>
2019-07-21 23:31:22 +02:00
<SelectAsset
onUpdate={v => handleCoverChange(v)}
currentValue={params.coverUrl}
assetName={'Cover'}
2019-12-13 16:00:00 +01:00
recommended={__('Recommended ratio is 6.25:1')}
/>
2019-07-21 23:31:22 +02:00
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('Titular Title')}
disabled={false}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
label={__('Deposit (LBC)')}
postfix="LBC"
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
/>
2019-07-21 23:31:22 +02:00
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
2019-07-21 23:31:22 +02:00
<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 })}
/>
2019-07-21 23:31:22 +02:00
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
disabled={false}
onChange={text => setParams({ ...params, description: text })}
/>
2019-11-22 22:13:00 +01:00
<TagsSearch
suggestMature
2020-03-13 23:15:37 +01:00
disableAutoFocus
2019-11-22 22:13:00 +01:00
tagsPassedIn={params.tags || []}
label={__('Tags Selected')}
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) });
}
});
}}
/>
2020-05-01 19:55:42 +02:00
<div className={'section__actions'}>
<Button button="primary" label={__('Submit')} onClick={handleSubmit} />
<Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
</div>
2019-12-17 04:53:49 +01:00
<p className="help">
{__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')}
</p>
2019-07-02 19:54:42 +02:00
</section>
);
}
export default ChannelForm;