load story content from streaming url and improve form validation + minor fixes

This commit is contained in:
btzr-io 2020-07-27 21:19:00 -05:00 committed by Sean Yesmunt
parent a5d1746151
commit 2ff1fc024c
6 changed files with 77 additions and 44 deletions

View file

@ -79,11 +79,11 @@ function PublishFile(props: Props) {
// Reset filePath if publish mode changed
useEffect(() => {
if (mode === PUBLISH_MODES.STORY) {
if (currentFileType !== 'text/markdown') {
if (currentFileType !== 'text/markdown' && !isStillEditing) {
updatePublishForm({ filePath: '', name: '' });
}
}
}, [currentFileType, mode, updatePublishForm]);
}, [currentFileType, mode, isStillEditing, updatePublishForm]);
useEffect(() => {
if (!filePath || filePath === '') {
@ -339,7 +339,13 @@ function PublishFile(props: Props) {
<FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
)}
{isPublishStory && (
<StoryEditor label={__('Story content')} uri={uri} disabled={disabled} setPrevFileText={setPrevFileText} />
<StoryEditor
label={__('Story content')}
uri={uri}
disabled={disabled}
setPrevFileText={setPrevFileText}
setCurrentFileType={setCurrentFileType}
/>
)}
{isPublishFile && getMessage()}
{/* @if TARGET='app' */}

View file

@ -115,7 +115,9 @@ function PublishForm(props: Props) {
} = props;
const TAGS_LIMIT = 5;
const formDisabled = (!filePath && !editingURI) || publishing;
const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
const storyFormDisabled = mode === PUBLISH_MODES.STORY && (!fileText || fileText === '');
const formDisabled = ((fileFormDisabled || storyFormDisabled) && !editingURI) || publishing;
const isInProgress = filePath || editingURI || name || title;
// If they are editing, they don't need a new file chosen
@ -126,7 +128,9 @@ function PublishForm(props: Props) {
bid &&
!bidError &&
!(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
const isOverwritingExistingClaim = !editingURI && myClaimForUri;
const formValid = isOverwritingExistingClaim
? false
: editingURI && !filePath
@ -260,8 +264,8 @@ function PublishForm(props: Props) {
}
}
function changePublishMode(name) {
setMode(name);
function changePublishMode(modeName) {
setMode(modeName);
}
// Update mode on editing
@ -283,16 +287,16 @@ function PublishForm(props: Props) {
return (
<div className="card-stack">
<div className="button-tab-group">
{MODES.map((name, index) => (
{MODES.map((modeName, index) => (
<Button
key={index}
icon={name}
label={name}
icon={modeName}
label={modeName}
button="alt"
onClick={() => {
changePublishMode(name);
changePublishMode(modeName);
}}
className={classnames('button-toggle', { 'button-toggle--active': mode === name })}
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
/>
))}
</div>
@ -366,7 +370,7 @@ function PublishForm(props: Props) {
</div>
<p className="help">
{!formDisabled && !formValid ? (
<PublishFormErrors />
<PublishFormErrors mode={mode} />
) : (
<I18nMessage
tokens={{

View file

@ -3,16 +3,14 @@ import { makeSelectPublishFormValue, selectIsStillEditing } from 'lbry-redux';
import PublishPage from './view';
const select = state => ({
bid: makeSelectPublishFormValue('bid')(state),
name: makeSelectPublishFormValue('name')(state),
title: makeSelectPublishFormValue('title')(state),
bid: makeSelectPublishFormValue('bid')(state),
fileText: makeSelectPublishFormValue('fileText')(state),
bidError: makeSelectPublishFormValue('bidError')(state),
editingUri: makeSelectPublishFormValue('editingUri')(state),
uploadThumbnailStatus: makeSelectPublishFormValue('uploadThumbnailStatus')(state),
isStillEditing: selectIsStillEditing(state),
});
export default connect(
select,
null
)(PublishPage);
export default connect(select, null)(PublishPage);

View file

@ -2,21 +2,35 @@
import React from 'react';
import { THUMBNAIL_STATUSES, isNameValid } from 'lbry-redux';
import { INVALID_NAME_ERROR } from 'constants/claim';
import * as PUBLISH_MODES from 'constants/publish_types';
type Props = {
mode: ?string,
title: ?string,
name: ?string,
bid: ?string,
bidError: ?string,
editingURI: ?string,
filePath: ?string,
fileText: ?string,
isStillEditing: boolean,
uploadThumbnailStatus: string,
};
function PublishFormErrors(props: Props) {
const { name, title, bid, bidError, editingURI, filePath, isStillEditing, uploadThumbnailStatus } = props;
const {
name,
mode,
title,
bid,
bidError,
editingURI,
filePath,
fileText,
isStillEditing,
uploadThumbnailStatus,
} = props;
const emptyStoryError = mode === PUBLISH_MODES.STORY && (!fileText || fileText.trim() === '');
// These are extra help
// If there is an error it will be presented as an inline error as well
return (
@ -26,6 +40,7 @@ function PublishFormErrors(props: Props) {
{!isNameValid(name, false) && INVALID_NAME_ERROR}
{!bid && <div>{__('A deposit amount is required')}</div>}
{bidError && <div>{__('Please check your deposit amount.')}</div>}
{emptyStoryError && <div>{__("Can't publish an empty story")}</div>}
{uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS && (
<div>{__('Please wait for thumbnail to finish uploading')}</div>
)}

View file

@ -4,6 +4,7 @@ import {
makeSelectPublishFormValue,
doUpdatePublishForm,
makeSelectFileInfoForUri,
makeSelectStreamingUrlForUri,
} from 'lbry-redux';
import StoryEditor from './view';
@ -11,6 +12,7 @@ const select = (state, props) => ({
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
filePath: makeSelectPublishFormValue('filePath')(state),
fileText: makeSelectPublishFormValue('fileText')(state),
streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
isStillEditing: selectIsStillEditing(state),
});

View file

@ -1,5 +1,4 @@
// @flow
import fs from 'fs';
import React, { useEffect } from 'react';
import { SIMPLE_SITE } from 'config';
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
@ -13,9 +12,11 @@ type Props = {
fileInfo: FileListItem,
filePath: string | WebFile,
fileText: ?string,
streamingUrl: ?string,
isStillEditing: boolean,
setPrevFileText: string => void,
updatePublishForm: ({}) => void,
setCurrentFileType: string => void,
};
function StoryEditor(props: Props) {
@ -26,11 +27,14 @@ function StoryEditor(props: Props) {
fileInfo,
filePath,
fileText,
streamingUrl,
isStillEditing,
setPrevFileText,
updatePublishForm,
setCurrentFileType,
} = props;
const [isLoadign, setIsLoadign] = React.useState(false);
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-story-mode', false);
function toggleMarkdown() {
@ -38,50 +42,54 @@ function StoryEditor(props: Props) {
}
useEffect(() => {
// @if TARGET='app'
function readFile(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, 'utf8', (error, data) => {
error ? reject(error) : resolve(data);
});
});
if (fileText && isLoadign) {
setIsLoadign(false);
}
}, [fileText, isLoadign, setIsLoadign]);
useEffect(() => {
function readFileStream(url) {
setIsLoadign(true);
return fetch(url).then(res => res.text());
}
async function updateEditorText(path) {
const text = await readFile(path);
if (text) {
// Store original content
setPrevFileText(text);
// Update text editor form
updatePublishForm({ fileText: text });
async function updateEditorText(url) {
try {
const text = await readFileStream(url);
if (text) {
// Store original content
setPrevFileText(text);
// Update text editor form
updatePublishForm({ fileText: text });
}
} catch (error) {
// Handle error..
}
}
const isEditingFile = isStillEditing && uri && fileInfo;
if (isEditingFile) {
const { mime_type: mimeType, download_path: downloadPath } = fileInfo;
const { mime_type: mimeType } = fileInfo;
// Editing same file (previously published)
// User can use a different file to replace the content
if (!filePath && mimeType === 'text/markdown') {
updateEditorText(downloadPath);
if (!filePath && streamingUrl && mimeType === 'text/markdown') {
setCurrentFileType(mimeType);
updateEditorText(streamingUrl);
}
}
// @endif
}, [uri, isStillEditing, filePath, fileInfo, setPrevFileText, updatePublishForm]);
}, [uri, isStillEditing, filePath, fileInfo, setPrevFileText, updatePublishForm, streamingUrl, setCurrentFileType]);
return (
<FormField
type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
name="content_story"
label={label}
placeholder={__('My content for this story...')}
placeholder={isLoadign ? __('Loadign...') : __('My content for this story...')}
value={fileText}
disabled={disabled}
disabled={isLoadign || disabled}
onChange={value => updatePublishForm({ fileText: advancedEditor ? value : value.target.value })}
quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
quickActionLabel={!SIMPLE_SITE && (advancedEditor ? __('Simple Editor') : __('Advanced Editor'))}
quickActionHandler={toggleMarkdown}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/>