From d7152bf84a845900e02690ca822781e32eb3cf8e Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 14 Nov 2019 18:49:46 +0100 Subject: [PATCH 1/2] refactor and batch-resolve for related content component --- src/component/fileListItem/view.js | 4 +- src/component/relatedContent/index.js | 4 +- src/component/relatedContent/view.js | 46 +++++-------------- src/page/file/index.js | 6 +++ src/page/file/view.js | 26 ++++++++++- .../actions/{performance.js => native.js} | 0 src/styles/filePage.js | 3 ++ 7 files changed, 49 insertions(+), 40 deletions(-) rename src/redux/actions/{performance.js => native.js} (100%) diff --git a/src/component/fileListItem/view.js b/src/component/fileListItem/view.js index 08bbfda..797ea8c 100644 --- a/src/component/fileListItem/view.js +++ b/src/component/fileListItem/view.js @@ -40,8 +40,8 @@ class FileListItem extends React.PureComponent { }; componentDidMount() { - const { claim, resolveUri, uri } = this.props; - if (!claim) { + const { claim, resolveUri, uri, batchResolve } = this.props; + if (!claim && !batchResolve) { resolveUri(uri); } } diff --git a/src/component/relatedContent/index.js b/src/component/relatedContent/index.js index 3d75163..bed3f06 100644 --- a/src/component/relatedContent/index.js +++ b/src/component/relatedContent/index.js @@ -1,11 +1,12 @@ import { connect } from 'react-redux'; import { + doResolveUris, makeSelectClaimForUri, makeSelectRecommendedContentForUri, makeSelectTitleForUri, selectIsSearching, } from 'lbry-redux'; -import { doNativeSearch } from 'redux/actions/performance'; +import { doNativeSearch } from 'redux/actions/native'; import RelatedContent from './view'; const select = (state, props) => ({ @@ -17,6 +18,7 @@ const select = (state, props) => ({ const perform = dispatch => ({ search: query => dispatch(doNativeSearch(query, 20, undefined, true)), + resolveUris: uris => dispatch(doResolveUris(uris)), }); export default connect( diff --git a/src/component/relatedContent/view.js b/src/component/relatedContent/view.js index 0e3a313..b468454 100644 --- a/src/component/relatedContent/view.js +++ b/src/component/relatedContent/view.js @@ -8,45 +8,23 @@ import fileListStyle from 'styles/fileList'; import relatedContentStyle from 'styles/relatedContent'; export default class RelatedContent extends React.PureComponent { - constructor() { - super(); - - this.didSearch = undefined; - } - - componentDidMount() { - this.getRecommendedContent(); - } + state = { + urlsResolved: false, + }; componentDidUpdate(prevProps) { - const { claim, uri } = this.props; + const { resolveUris, recommendedContent } = this.props; - if (uri !== prevProps.uri) { - this.didSearch = false; - } - - if (claim && !this.didSearch) { - this.getRecommendedContent(); + if (recommendedContent && recommendedContent.length > 0 && !this.state.urisResolved) { + this.setState({ urisResolved: true }, () => { + // batch resolve the uris + resolveUris(recommendedContent); + }); } } - getRecommendedContent() { - const { search, title } = this.props; - - if (title) { - search(title); - this.didSearch = true; - } - } - - didSearch; - render() { - const { recommendedContent, isSearching, navigation, uri, fullUri } = this.props; - - if (!isSearching && (!recommendedContent || recommendedContent.length === 0)) { - return null; - } + const { recommendedContent, navigation, uri, fullUri } = this.props; return ( @@ -59,13 +37,11 @@ export default class RelatedContent extends React.PureComponent { style={fileListStyle.item} key={recommendedUri} uri={recommendedUri} + batchResolve navigation={navigation} autoplay /> ))} - {isSearching && ( - - )} ); } diff --git a/src/page/file/index.js b/src/page/file/index.js index c846935..4d0fe35 100644 --- a/src/page/file/index.js +++ b/src/page/file/index.js @@ -17,6 +17,7 @@ import { makeSelectContentPositionForUri, makeSelectContentTypeForUri, makeSelectMetadataForUri, + makeSelectRecommendedContentForUri, makeSelectStreamingUrlForUri, makeSelectThumbnailForUri, makeSelectTitleForUri, @@ -26,6 +27,7 @@ import { selectPurchasedUris, selectFailedPurchaseUris, selectPurchaseUriErrorMessage, + selectIsSearching, } from 'lbry-redux'; import { doClaimEligiblePurchaseRewards, @@ -42,6 +44,7 @@ import { doStopDownloadingFile, } from 'redux/actions/file'; import { doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer'; +import { doNativeSearch } from 'redux/actions/native'; import { selectDrawerStack } from 'redux/selectors/drawer'; import FilePage from './view'; @@ -70,6 +73,8 @@ const select = (state, props) => { streamingUrl: makeSelectStreamingUrlForUri(contentUri)(state), thumbnail: makeSelectThumbnailForUri(contentUri)(state), title: makeSelectTitleForUri(contentUri)(state), + recommendedContent: makeSelectRecommendedContentForUri(contentUri)(state), + isSearchingRecommendContent: selectIsSearching(state), }; }; @@ -89,6 +94,7 @@ const perform = dispatch => ({ purchaseUri: (uri, costInfo, saveFile) => dispatch(doPurchaseUri(uri, costInfo, saveFile)), deletePurchasedUri: uri => dispatch(doDeletePurchasedUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)), + searchRecommended: query => dispatch(doNativeSearch(query, 20, undefined, true)), sendTip: (amount, claimId, isSupport, successCallback, errorCallback) => dispatch(doSendTip(amount, claimId, isSupport, successCallback, errorCallback)), setPlayerVisible: () => dispatch(doSetPlayerVisible(true)), diff --git a/src/page/file/view.js b/src/page/file/view.js index 7ad23bb..053d527 100644 --- a/src/page/file/view.js +++ b/src/page/file/view.js @@ -85,6 +85,7 @@ class FilePage extends React.PureComponent { uriVars: null, stopDownloadConfirmed: false, streamingMode: false, + didSearchRecommended: false, }; } @@ -185,12 +186,25 @@ class FilePage extends React.PureComponent { } componentDidUpdate(prevProps) { - const { claim, contentType, fileInfo, isResolvingUri, resolveUri, navigation } = this.props; + const { + claim, + contentType, + fileInfo, + isResolvingUri, + resolveUri, + navigation, + searchRecommended, + title, + } = this.props; const { uri } = this.state; if (!isResolvingUri && claim === undefined && uri) { resolveUri(uri); } + if (title && !this.state.didSearchRecommended) { + this.setState({ didSearchRecommended: true }, () => searchRecommended(title)); + } + // Returned to the page. If mediaLoaded, and currentMediaInfo is different, update if (this.state.mediaLoaded && window.currentMediaInfo && window.currentMediaInfo.uri !== this.state.uri) { const { metadata } = this.props; @@ -607,6 +621,8 @@ class FilePage extends React.PureComponent { navigation, position, purchaseUri, + isSearchingRecommendContent, + recommendedContent, thumbnail, title, } = this.props; @@ -1105,7 +1121,13 @@ class FilePage extends React.PureComponent { )} - + + {isSearchingRecommendContent && ( + + )} + {!isSearchingRecommendContent && recommendedContent && recommendedContent.length > 0 && ( + + )} )} diff --git a/src/redux/actions/performance.js b/src/redux/actions/native.js similarity index 100% rename from src/redux/actions/performance.js rename to src/redux/actions/native.js diff --git a/src/styles/filePage.js b/src/styles/filePage.js index 58d71eb..77ff2a0 100644 --- a/src/styles/filePage.js +++ b/src/styles/filePage.js @@ -435,6 +435,9 @@ const filePageStyle = StyleSheet.create({ fontSize: 16, marginTop: 4, }, + relatedLoading: { + marginTop: 16, + }, }); export default filePageStyle; -- 2.45.2 From 4a2b69097d59e72a535ec261052bd834e6c1147b Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 14 Nov 2019 19:09:15 +0100 Subject: [PATCH 2/2] code cleanup --- src/component/relatedContent/index.js | 2 - src/page/file/index.js | 4 +- src/redux/actions/native.js | 95 --------------------------- 3 files changed, 2 insertions(+), 99 deletions(-) delete mode 100644 src/redux/actions/native.js diff --git a/src/component/relatedContent/index.js b/src/component/relatedContent/index.js index bed3f06..7dd415c 100644 --- a/src/component/relatedContent/index.js +++ b/src/component/relatedContent/index.js @@ -6,7 +6,6 @@ import { makeSelectTitleForUri, selectIsSearching, } from 'lbry-redux'; -import { doNativeSearch } from 'redux/actions/native'; import RelatedContent from './view'; const select = (state, props) => ({ @@ -17,7 +16,6 @@ const select = (state, props) => ({ }); const perform = dispatch => ({ - search: query => dispatch(doNativeSearch(query, 20, undefined, true)), resolveUris: uris => dispatch(doResolveUris(uris)), }); diff --git a/src/page/file/index.js b/src/page/file/index.js index 4d0fe35..73846ac 100644 --- a/src/page/file/index.js +++ b/src/page/file/index.js @@ -8,6 +8,7 @@ import { doPurchaseUri, doDeletePurchasedUri, doResolveUri, + doSearch, doSendTip, doToast, makeSelectIsUriResolving, @@ -44,7 +45,6 @@ import { doStopDownloadingFile, } from 'redux/actions/file'; import { doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer'; -import { doNativeSearch } from 'redux/actions/native'; import { selectDrawerStack } from 'redux/selectors/drawer'; import FilePage from './view'; @@ -94,7 +94,7 @@ const perform = dispatch => ({ purchaseUri: (uri, costInfo, saveFile) => dispatch(doPurchaseUri(uri, costInfo, saveFile)), deletePurchasedUri: uri => dispatch(doDeletePurchasedUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)), - searchRecommended: query => dispatch(doNativeSearch(query, 20, undefined, true)), + searchRecommended: query => dispatch(doSearch(query, 20, undefined, true)), sendTip: (amount, claimId, isSupport, successCallback, errorCallback) => dispatch(doSendTip(amount, claimId, isSupport, successCallback, errorCallback)), setPlayerVisible: () => dispatch(doSetPlayerVisible(true)), diff --git a/src/redux/actions/native.js b/src/redux/actions/native.js deleted file mode 100644 index 2779972..0000000 --- a/src/redux/actions/native.js +++ /dev/null @@ -1,95 +0,0 @@ -// @flow -import { NativeModules } from 'react-native'; -import { - ACTIONS, - batchActions, - buildURI, - doResolveUri, - doUpdateSearchQuery, - makeSelectSearchUris, - selectSuggestions, - makeSelectQueryWithOptions, - selectSearchValue, -} from 'lbry-redux'; - -let CONNECTION_STRING = 'https://lighthouse.lbry.com/'; - -const handleNativeFetchResponse = str => { - const json = JSON.parse(str); - if (json.error) { - return Promise.reject(new Error(json.error)); - } - - return Promise.resolve(json); -}; - -// Use a native asyncTask to call the lighthouse api -export const doNativeSearch = ( - rawQuery: string, // pass in a query if you don't want to search for what's in the search bar - size: ?number, // only pass in if you don't want to use the users setting (ex: related content) - from: ?number, - isBackgroundSearch: boolean = false -) => (dispatch: Dispatch, getState: GetState) => { - const query = rawQuery.replace(/^lbry:\/\//i, '').replace(/\//, ' '); - - if (!query) { - dispatch({ - type: ACTIONS.SEARCH_FAIL, - }); - return; - } - - const state = getState(); - const queryWithOptions = makeSelectQueryWithOptions(query, size, from, isBackgroundSearch)(state); - - // If we have already searched for something, we don't need to do anything - const urisForQuery = makeSelectSearchUris(queryWithOptions)(state); - if (urisForQuery && !!urisForQuery.length) { - return; - } - - dispatch({ - type: ACTIONS.SEARCH_START, - }); - - // If the user is on the file page with a pre-populated uri and they select - // the search option without typing anything, searchQuery will be empty - // We need to populate it so the input is filled on the search page - // isBackgroundSearch means the search is happening in the background, don't update the search query - if (!state.search.searchQuery && !isBackgroundSearch) { - dispatch(doUpdateSearchQuery(query)); - } - - const url = `${CONNECTION_STRING}search?${queryWithOptions}`; - NativeModules.Requests.get(url) - .then(handleNativeFetchResponse) - .then((data: Array<{ name: String, claimId: string }>) => { - const uris = []; - const actions = []; - - data.forEach(result => { - if (result.name) { - const uri = buildURI({ - claimName: result.name, - claimId: result.claimId, - }); - actions.push(doResolveUri(uri)); - uris.push(uri); - } - }); - - actions.push({ - type: ACTIONS.SEARCH_SUCCESS, - data: { - query: queryWithOptions, - uris, - }, - }); - dispatch(batchActions(...actions)); - }) - .catch(e => { - dispatch({ - type: ACTIONS.SEARCH_FAIL, - }); - }); -}; -- 2.45.2