use redux to load post content
This commit is contained in:
parent
80e1965e46
commit
036aedd88d
4 changed files with 20 additions and 42 deletions
ui
|
@ -1,15 +1,23 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectIsStillEditing, makeSelectPublishFormValue, doUpdatePublishForm } from 'lbry-redux';
|
import {
|
||||||
|
selectIsStillEditing,
|
||||||
|
makeSelectPublishFormValue,
|
||||||
|
doUpdatePublishForm,
|
||||||
|
makeSelectStreamingUrlForUri,
|
||||||
|
} from 'lbry-redux';
|
||||||
|
import { doPlayUri } from 'redux/actions/content';
|
||||||
import PostEditor from './view';
|
import PostEditor from './view';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
filePath: makeSelectPublishFormValue('filePath')(state),
|
filePath: makeSelectPublishFormValue('filePath')(state),
|
||||||
fileText: makeSelectPublishFormValue('fileText')(state),
|
fileText: makeSelectPublishFormValue('fileText')(state),
|
||||||
|
streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
|
||||||
isStillEditing: selectIsStillEditing(state),
|
isStillEditing: selectIsStillEditing(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
||||||
|
fetchStreamingUrl: uri => dispatch(doPlayUri(uri)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(PostEditor);
|
export default connect(select, perform)(PostEditor);
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { SIMPLE_SITE } from 'config';
|
||||||
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
|
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
import usePersistedState from 'effects/use-persisted-state';
|
import usePersistedState from 'effects/use-persisted-state';
|
||||||
import useFetchStreamingUrl from 'effects/use-fetch-streaming-url';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: ?string,
|
uri: ?string,
|
||||||
|
@ -13,7 +12,9 @@ type Props = {
|
||||||
filePath: string | WebFile,
|
filePath: string | WebFile,
|
||||||
fileText: ?string,
|
fileText: ?string,
|
||||||
fileMimeType: ?string,
|
fileMimeType: ?string,
|
||||||
|
streamingUrl: ?string,
|
||||||
isStillEditing: boolean,
|
isStillEditing: boolean,
|
||||||
|
fetchStreamingUrl: string => void,
|
||||||
setPrevFileText: string => void,
|
setPrevFileText: string => void,
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
setCurrentFileType: string => void,
|
setCurrentFileType: string => void,
|
||||||
|
@ -26,9 +27,11 @@ function PostEditor(props: Props) {
|
||||||
disabled,
|
disabled,
|
||||||
filePath,
|
filePath,
|
||||||
fileText,
|
fileText,
|
||||||
|
streamingUrl,
|
||||||
fileMimeType,
|
fileMimeType,
|
||||||
isStillEditing,
|
isStillEditing,
|
||||||
setPrevFileText,
|
setPrevFileText,
|
||||||
|
fetchStreamingUrl,
|
||||||
updatePublishForm,
|
updatePublishForm,
|
||||||
setCurrentFileType,
|
setCurrentFileType,
|
||||||
} = props;
|
} = props;
|
||||||
|
@ -38,12 +41,17 @@ function PostEditor(props: Props) {
|
||||||
const [ready, setReady] = React.useState(!editing);
|
const [ready, setReady] = React.useState(!editing);
|
||||||
const [loading, setLoading] = React.useState(false);
|
const [loading, setLoading] = React.useState(false);
|
||||||
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-post-mode', false);
|
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-post-mode', false);
|
||||||
const { streamingUrl } = useFetchStreamingUrl(uri);
|
|
||||||
|
|
||||||
function toggleMarkdown() {
|
function toggleMarkdown() {
|
||||||
setAdvancedEditor(!advancedEditor);
|
setAdvancedEditor(!advancedEditor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (editing) {
|
||||||
|
fetchStreamingUrl(uri);
|
||||||
|
}
|
||||||
|
}, [uri, editing]);
|
||||||
|
|
||||||
// Ready to edit content
|
// Ready to edit content
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!ready && !loading && fileText && streamingUrl) {
|
if (!ready && !loading && fileText && streamingUrl) {
|
||||||
|
|
|
@ -300,7 +300,7 @@ function PublishForm(props: Props) {
|
||||||
label={modeName}
|
label={modeName}
|
||||||
button="alt"
|
button="alt"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setPublishMode(modeName);
|
setMode(modeName);
|
||||||
}}
|
}}
|
||||||
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
|
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,38 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Lbry } from 'lbry-redux';
|
|
||||||
import useIsMounted from 'effects/use-is-mounted';
|
|
||||||
|
|
||||||
// Fetch streaming url
|
|
||||||
export default function useFetchStreamingUrl(uri) {
|
|
||||||
const isMounted = useIsMounted();
|
|
||||||
|
|
||||||
const [state, setState] = React.useState({
|
|
||||||
error: false,
|
|
||||||
fetching: false,
|
|
||||||
streamingUrl: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
async function fetchClaim(claimUri) {
|
|
||||||
try {
|
|
||||||
setState({ fetching: true });
|
|
||||||
const data = await Lbry.get({ uri: claimUri });
|
|
||||||
|
|
||||||
if (data && isMounted.current) {
|
|
||||||
const { streaming_url: streamingUrl } = data;
|
|
||||||
setState({ fetching: false, streamingUrl });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
if (isMounted.current) {
|
|
||||||
setState({ error, fetching: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (uri && !state.error && !state.fetching && !state.streamingUrl) {
|
|
||||||
fetchClaim(uri);
|
|
||||||
}
|
|
||||||
}, [uri, state]);
|
|
||||||
|
|
||||||
return state;
|
|
||||||
}
|
|
Loading…
Add table
Reference in a new issue