load story content from streaming url and improve form validation + minor fixes
This commit is contained in:
parent
a5d1746151
commit
2ff1fc024c
6 changed files with 77 additions and 44 deletions
|
@ -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' */}
|
||||
|
|
|
@ -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={{
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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),
|
||||
});
|
||||
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue