Tell user to reduce 'Channel Description' when exceeded tx-limit.

## Issue
Second attempt at 5571: Limit description length on channel edit

## Changes
- Undo #5573: restore limit back to 5000.
- Translate the `bad-txns-claimscriptsize-toolarge (code 16)` error into `Transaction limit reached. Try reducing the Description length.`
This commit is contained in:
infinite-persistence 2021-02-25 09:53:56 +08:00 committed by Sean Yesmunt
parent df17504649
commit 277a1d5d1f
3 changed files with 36 additions and 30 deletions

View file

@ -1586,5 +1586,6 @@
"Creator tools": "Creator tools", "Creator tools": "Creator tools",
"Interacting as %channelName%": "Interacting as %channelName%", "Interacting as %channelName%": "Interacting as %channelName%",
"Page Not Found": "Page Not Found", "Page Not Found": "Page Not Found",
"Transaction limit reached. Try reducing the Description length.": "Transaction limit reached. Try reducing the Description length.",
"--end--": "--end--" "--end--": "--end--"
} }

View file

@ -6,7 +6,7 @@ import classnames from 'classnames';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import TagsSearch from 'component/tagsSearch'; import TagsSearch from 'component/tagsSearch';
import { FF_MAX_CHARS_IN_DESCRIPTION_CHANNEL } from 'constants/form-field'; import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
import ErrorText from 'component/common/error-text'; import ErrorText from 'component/common/error-text';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import { isNameValid, parseURI } from 'lbry-redux'; import { isNameValid, parseURI } from 'lbry-redux';
@ -39,17 +39,17 @@ type Props = {
tags: Array<string>, tags: Array<string>,
locations: Array<string>, locations: Array<string>,
languages: Array<string>, languages: Array<string>,
updateChannel: any => Promise<any>, updateChannel: (any) => Promise<any>,
updatingChannel: boolean, updatingChannel: boolean,
updateError: string, updateError: string,
createChannel: any => Promise<any>, createChannel: (any) => Promise<any>,
createError: string, createError: string,
creatingChannel: boolean, creatingChannel: boolean,
clearChannelErrors: () => void, clearChannelErrors: () => void,
onDone: () => void, onDone: () => void,
openModal: ( openModal: (
id: string, id: string,
{ onUpdate: string => void, assetName: string, helpText: string, currentValue: string, title: string } { onUpdate: (string) => void, assetName: string, helpText: string, currentValue: string, title: string }
) => void, ) => void,
uri: string, uri: string,
disabled: boolean, disabled: boolean,
@ -118,7 +118,7 @@ function ChannelForm(props: Props) {
languages: languages || [], languages: languages || [],
locations: locations || [], locations: locations || [],
tags: tags tags: tags
? tags.map(tag => { ? tags.map((tag) => {
return { name: tag }; return { name: tag };
}) })
: [], : [],
@ -181,13 +181,13 @@ function ChannelForm(props: Props) {
function handleSubmit() { function handleSubmit() {
if (uri) { if (uri) {
updateChannel(params).then(success => { updateChannel(params).then((success) => {
if (success) { if (success) {
onDone(); onDone();
} }
}); });
} else { } else {
createChannel(params).then(success => { createChannel(params).then((success) => {
if (success) { if (success) {
analytics.apiLogPublish(success); analytics.apiLogPublish(success);
onDone(); onDone();
@ -196,6 +196,12 @@ function ChannelForm(props: Props) {
} }
} }
const LIMIT_ERR_PARTIAL_MSG = 'bad-txns-claimscriptsize-toolarge (code 16)';
let errorMsg = updateError || createError;
if (errorMsg && errorMsg.includes(LIMIT_ERR_PARTIAL_MSG)) {
errorMsg = __('Transaction limit reached. Try reducing the Description length.');
}
React.useEffect(() => { React.useEffect(() => {
let nameError; let nameError;
if (!name && name !== undefined) { if (!name && name !== undefined) {
@ -222,7 +228,7 @@ function ChannelForm(props: Props) {
title={__('Cover')} title={__('Cover')}
onClick={() => onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, { openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: coverUrl => handleCoverChange(coverUrl), onUpdate: (coverUrl) => handleCoverChange(coverUrl),
title: __('Edit Cover Image'), title: __('Edit Cover Image'),
helpText: __('(6.25:1)'), helpText: __('(6.25:1)'),
assetName: __('Cover Image'), assetName: __('Cover Image'),
@ -246,7 +252,7 @@ function ChannelForm(props: Props) {
title={__('Edit')} title={__('Edit')}
onClick={() => onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, { openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: v => handleThumbnailChange(v), onUpdate: (v) => handleThumbnailChange(v),
title: __('Edit Thumbnail Image'), title: __('Edit Thumbnail Image'),
helpText: __('(1:1)'), helpText: __('(1:1)'),
assetName: __('Thumbnail'), assetName: __('Thumbnail'),
@ -297,7 +303,7 @@ function ChannelForm(props: Props) {
value={params.name || channelName} value={params.name || channelName}
error={nameError} error={nameError}
disabled={!isNewChannel} disabled={!isNewChannel}
onChange={e => setParams({ ...params, name: e.target.value })} onChange={(e) => setParams({ ...params, name: e.target.value })}
/> />
</fieldset-group> </fieldset-group>
{!isNewChannel && <span className="form-field__help">{__('This field cannot be changed.')}</span>} {!isNewChannel && <span className="form-field__help">{__('This field cannot be changed.')}</span>}
@ -308,7 +314,7 @@ function ChannelForm(props: Props) {
label={__('Title')} label={__('Title')}
placeholder={__('My Awesome Channel')} placeholder={__('My Awesome Channel')}
value={params.title} value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })} onChange={(e) => setParams({ ...params, title: e.target.value })}
/> />
<FormField <FormField
type="markdown" type="markdown"
@ -316,8 +322,8 @@ function ChannelForm(props: Props) {
label={__('Description')} label={__('Description')}
placeholder={__('Description of your content')} placeholder={__('Description of your content')}
value={params.description} value={params.description}
onChange={text => setParams({ ...params, description: text })} onChange={(text) => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION_CHANNEL} textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/> />
</> </>
} }
@ -336,7 +342,7 @@ function ChannelForm(props: Props) {
error={bidError} error={bidError}
min="0.0" min="0.0"
disabled={false} disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))} onChange={(event) => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1} placeholder={0.1}
helper={ helper={
<> <>
@ -357,17 +363,17 @@ function ChannelForm(props: Props) {
limitSelect={MAX_TAG_SELECT} limitSelect={MAX_TAG_SELECT}
tagsPassedIn={params.tags || []} tagsPassedIn={params.tags || []}
label={__('Selected Tags')} label={__('Selected Tags')}
onRemove={clickedTag => { onRemove={(clickedTag) => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name); const newTags = params.tags.slice().filter((tag) => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags }); setParams({ ...params, tags: newTags });
}} }}
onSelect={newTags => { onSelect={(newTags) => {
newTags.forEach(newTag => { newTags.forEach((newTag) => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) { if (!params.tags.map((savedTag) => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] }); setParams({ ...params, tags: [...params.tags, newTag] });
} else { } else {
// If it already exists and the user types it in, remove it // If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) }); setParams({ ...params, tags: params.tags.filter((tag) => tag.name !== newTag.name) });
} }
}); });
}} }}
@ -386,7 +392,7 @@ function ChannelForm(props: Props) {
placeholder={__('aprettygoodsite.com')} placeholder={__('aprettygoodsite.com')}
disabled={false} disabled={false}
value={params.website} value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })} onChange={(e) => setParams({ ...params, website: e.target.value })}
/> />
<FormField <FormField
type="text" type="text"
@ -395,20 +401,20 @@ function ChannelForm(props: Props) {
placeholder={__('yourstruly@example.com')} placeholder={__('yourstruly@example.com')}
disabled={false} disabled={false}
value={params.email} value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })} onChange={(e) => setParams({ ...params, email: e.target.value })}
/> />
<FormField <FormField
name="language_select" name="language_select"
type="select" type="select"
label={__('Primary Language')} label={__('Primary Language')}
onChange={event => handleLanguageChange(0, event.target.value)} onChange={(event) => handleLanguageChange(0, event.target.value)}
value={primaryLanguage} value={primaryLanguage}
helper={__('Your main content language')} helper={__('Your main content language')}
> >
<option key={'pri-langNone'} value={LANG_NONE}> <option key={'pri-langNone'} value={LANG_NONE}>
{__('None selected')} {__('None selected')}
</option> </option>
{Object.keys(SUPPORTED_LANGUAGES).map(language => ( {Object.keys(SUPPORTED_LANGUAGES).map((language) => (
<option key={language} value={language}> <option key={language} value={language}>
{SUPPORTED_LANGUAGES[language]} {SUPPORTED_LANGUAGES[language]}
</option> </option>
@ -418,7 +424,7 @@ function ChannelForm(props: Props) {
name="language_select2" name="language_select2"
type="select" type="select"
label={__('Secondary Language')} label={__('Secondary Language')}
onChange={event => handleLanguageChange(1, event.target.value)} onChange={(event) => handleLanguageChange(1, event.target.value)}
value={secondaryLanguage} value={secondaryLanguage}
disabled={!languageParam[0]} disabled={!languageParam[0]}
helper={__('Your other content language')} helper={__('Your other content language')}
@ -427,8 +433,8 @@ function ChannelForm(props: Props) {
{__('None selected')} {__('None selected')}
</option> </option>
{Object.keys(SUPPORTED_LANGUAGES) {Object.keys(SUPPORTED_LANGUAGES)
.filter(lang => lang !== languageParam[0]) .filter((lang) => lang !== languageParam[0])
.map(language => ( .map((language) => (
<option key={language} value={language}> <option key={language} value={language}>
{SUPPORTED_LANGUAGES[language]} {SUPPORTED_LANGUAGES[language]}
</option> </option>
@ -456,8 +462,8 @@ function ChannelForm(props: Props) {
/> />
<Button button="link" label={__('Cancel')} onClick={onDone} /> <Button button="link" label={__('Cancel')} onClick={onDone} />
</div> </div>
{updateError || createError ? ( {errorMsg ? (
<ErrorText>{updateError || createError}</ErrorText> <ErrorText>{errorMsg}</ErrorText>
) : ( ) : (
<p className="help"> <p className="help">
{__('After submitting, it will take a few minutes for your changes to be live for everyone.')} {__('After submitting, it will take a few minutes for your changes to be live for everyone.')}

View file

@ -1,5 +1,4 @@
export const FF_MAX_CHARS_DEFAULT = 2000; export const FF_MAX_CHARS_DEFAULT = 2000;
export const FF_MAX_CHARS_IN_COMMENT = 2000; export const FF_MAX_CHARS_IN_COMMENT = 2000;
export const FF_MAX_CHARS_IN_DESCRIPTION = 5000; export const FF_MAX_CHARS_IN_DESCRIPTION = 5000;
export const FF_MAX_CHARS_IN_DESCRIPTION_CHANNEL = 3000;
export const FF_MAX_CHARS_IN_POST = 10000; export const FF_MAX_CHARS_IN_POST = 10000;