prevent multiple claim_search's happening on the homepage

This commit is contained in:
Sean Yesmunt 2020-09-11 15:48:23 -04:00
parent 707abdd280
commit dd5636c2b3
3 changed files with 9 additions and 7 deletions

View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearch, SETTINGS } from 'lbry-redux'; import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux';
import { selectBlockedChannels } from 'redux/selectors/blocked'; import { selectBlockedChannels } from 'redux/selectors/blocked';
import { doToggleTagFollowDesktop } from 'redux/actions/tags'; import { doToggleTagFollowDesktop } from 'redux/actions/tags';
import { makeSelectClientSetting } from 'redux/selectors/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings';
@ -7,7 +7,7 @@ import ClaimListDiscover from './view';
const select = state => ({ const select = state => ({
claimSearchByQuery: selectClaimSearchByQuery(state), claimSearchByQuery: selectClaimSearchByQuery(state),
loading: selectFetchingClaimSearch(state), fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state), showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state), hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
hiddenUris: selectBlockedChannels(state), hiddenUris: selectBlockedChannels(state),

View file

@ -14,6 +14,9 @@ type Props = {
claimSearchByQuery: { claimSearchByQuery: {
[string]: Array<string>, [string]: Array<string>,
}, },
fetchingClaimSearchByQuery: {
[string]: boolean,
},
// claim search options are below // claim search options are below
tags: Array<string>, tags: Array<string>,
hiddenUris: Array<string>, hiddenUris: Array<string>,
@ -49,12 +52,12 @@ function ClaimTilesDiscover(props: Props) {
timestamp, timestamp,
feeAmount, feeAmount,
limitClaimsPerChannel, limitClaimsPerChannel,
fetchingClaimSearchByQuery,
} = props; } = props;
const { location } = useHistory(); const { location } = useHistory();
const urlParams = new URLSearchParams(location.search); const urlParams = new URLSearchParams(location.search);
const feeAmountInUrl = urlParams.get('fee_amount'); const feeAmountInUrl = urlParams.get('fee_amount');
const feeAmountParam = feeAmountInUrl || feeAmount; const feeAmountParam = feeAmountInUrl || feeAmount;
const [hasSearched, setHasSearched] = React.useState(false);
const options: { const options: {
page_size: number, page_size: number,
no_totals: boolean, no_totals: boolean,
@ -118,17 +121,17 @@ function ClaimTilesDiscover(props: Props) {
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options); const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []); const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
const shouldPerformSearch = !hasSearched || uris.length === 0;
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
const optionsStringForEffect = JSON.stringify(options); const optionsStringForEffect = JSON.stringify(options);
const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery];
const shouldPerformSearch = !isLoading && uris.length === 0;
React.useEffect(() => { React.useEffect(() => {
if (shouldPerformSearch) { if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect); const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions); doClaimSearch(searchOptions);
setHasSearched(true);
} }
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, hasSearched]); }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
return ( return (
<ul className="claim-grid"> <ul className="claim-grid">

View file

@ -34,7 +34,6 @@ export default handleActions(
const commentsByUri = Object.assign({}, state.commentsByUri); const commentsByUri = Object.assign({}, state.commentsByUri);
const comments = byId[claimId] || []; const comments = byId[claimId] || [];
const newCommentIds = comments.slice(); const newCommentIds = comments.slice();
const commentsByUri = Object.assign({}, state.commentsByUri);
// add the comment by its ID // add the comment by its ID
commentById[comment.comment_id] = comment; commentById[comment.comment_id] = comment;