From 036aedd88d1fac68ca62b3bfb052c0790c164463 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 30 Jul 2020 15:00:22 -0500 Subject: [PATCH] use redux to load post content --- ui/component/postEditor/index.js | 10 ++++++- ui/component/postEditor/view.jsx | 12 +++++++-- ui/component/publishForm/view.jsx | 2 +- ui/effects/use-fetch-streaming-url.js | 38 --------------------------- 4 files changed, 20 insertions(+), 42 deletions(-) delete mode 100644 ui/effects/use-fetch-streaming-url.js diff --git a/ui/component/postEditor/index.js b/ui/component/postEditor/index.js index c813676ad..dfb1ea2b1 100644 --- a/ui/component/postEditor/index.js +++ b/ui/component/postEditor/index.js @@ -1,15 +1,23 @@ 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'; const select = (state, props) => ({ filePath: makeSelectPublishFormValue('filePath')(state), fileText: makeSelectPublishFormValue('fileText')(state), + streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state), isStillEditing: selectIsStillEditing(state), }); const perform = dispatch => ({ updatePublishForm: value => dispatch(doUpdatePublishForm(value)), + fetchStreamingUrl: uri => dispatch(doPlayUri(uri)), }); export default connect(select, perform)(PostEditor); diff --git a/ui/component/postEditor/view.jsx b/ui/component/postEditor/view.jsx index 1e7520eba..64ec3581c 100644 --- a/ui/component/postEditor/view.jsx +++ b/ui/component/postEditor/view.jsx @@ -4,7 +4,6 @@ import { SIMPLE_SITE } from 'config'; import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field'; import { FormField } from 'component/common/form'; import usePersistedState from 'effects/use-persisted-state'; -import useFetchStreamingUrl from 'effects/use-fetch-streaming-url'; type Props = { uri: ?string, @@ -13,7 +12,9 @@ type Props = { filePath: string | WebFile, fileText: ?string, fileMimeType: ?string, + streamingUrl: ?string, isStillEditing: boolean, + fetchStreamingUrl: string => void, setPrevFileText: string => void, updatePublishForm: ({}) => void, setCurrentFileType: string => void, @@ -26,9 +27,11 @@ function PostEditor(props: Props) { disabled, filePath, fileText, + streamingUrl, fileMimeType, isStillEditing, setPrevFileText, + fetchStreamingUrl, updatePublishForm, setCurrentFileType, } = props; @@ -38,12 +41,17 @@ function PostEditor(props: Props) { const [ready, setReady] = React.useState(!editing); const [loading, setLoading] = React.useState(false); const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-post-mode', false); - const { streamingUrl } = useFetchStreamingUrl(uri); function toggleMarkdown() { setAdvancedEditor(!advancedEditor); } + useEffect(() => { + if (editing) { + fetchStreamingUrl(uri); + } + }, [uri, editing]); + // Ready to edit content useEffect(() => { if (!ready && !loading && fileText && streamingUrl) { diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index afe9b285c..83b221d9d 100644 --- a/ui/component/publishForm/view.jsx +++ b/ui/component/publishForm/view.jsx @@ -300,7 +300,7 @@ function PublishForm(props: Props) { label={modeName} button="alt" onClick={() => { - setPublishMode(modeName); + setMode(modeName); }} className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })} /> diff --git a/ui/effects/use-fetch-streaming-url.js b/ui/effects/use-fetch-streaming-url.js deleted file mode 100644 index 374b8784d..000000000 --- a/ui/effects/use-fetch-streaming-url.js +++ /dev/null @@ -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; -}