⏪ ClaimTilesDiscover: revert and cleanup
## Simplify - Simplify to just `uris` instead of having multiple arrays (`uris`, `modifiedUris`, `prevUris`) - The `prevUris` is for CLS prevention. With this removal, the CLS issue is back, but we'll handle it differently later. - Temporarily disable the view-count fetching. Code is left there so that I don't forget. ## Fix - `shouldPerformSearch` was never true when `prefixUris` is present. Corrected the logic. - Aside: prefix and pin is so similar in function. Hm ....
This commit is contained in:
parent
16b33fe05f
commit
673d679083
1 changed files with 30 additions and 47 deletions
|
@ -90,8 +90,6 @@ function ClaimTilesDiscover(props: Props) {
|
||||||
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
|
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
|
||||||
}
|
}
|
||||||
|
|
||||||
const [prevUris, setPrevUris] = React.useState([]);
|
|
||||||
|
|
||||||
const options: {
|
const options: {
|
||||||
page_size: number,
|
page_size: number,
|
||||||
no_totals: boolean,
|
no_totals: boolean,
|
||||||
|
@ -165,52 +163,27 @@ function ClaimTilesDiscover(props: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const searchKey = createNormalizedClaimSearchKey(options);
|
const searchKey = createNormalizedClaimSearchKey(options);
|
||||||
const isLoading = fetchingClaimSearchByQuery[searchKey];
|
const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
|
||||||
|
const claimSearchUris = claimSearchByQuery[searchKey] || [];
|
||||||
let uris = (prefixUris || []).concat(claimSearchByQuery[searchKey] || []);
|
|
||||||
|
|
||||||
// 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 shouldPerformSearch = !isLoading && uris.length === 0;
|
const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
|
||||||
|
|
||||||
if (prefixUris === undefined && claimSearchByQuery[searchKey] === undefined) {
|
const uris = (prefixUris || []).concat(claimSearchUris);
|
||||||
// This is a new query and we don't have results yet ...
|
|
||||||
if (prevUris.length !== 0) {
|
|
||||||
// ... but we have previous results. Use it until new results are here.
|
|
||||||
uris = prevUris;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const modifiedUris = uris ? uris.slice() : [];
|
if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
|
||||||
const fixUris = pinUrls || [];
|
pinUrls.forEach((pin) => {
|
||||||
|
if (uris.indexOf(pin) !== -1) {
|
||||||
if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
|
uris.splice(uris.indexOf(pin), 1);
|
||||||
fixUris.forEach((fixUri) => {
|
|
||||||
if (modifiedUris.indexOf(fixUri) !== -1) {
|
|
||||||
modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
|
|
||||||
} else {
|
} else {
|
||||||
modifiedUris.pop();
|
uris.pop();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
modifiedUris.splice(2, 0, ...fixUris);
|
uris.splice(2, 0, ...pinUrls);
|
||||||
}
|
|
||||||
|
|
||||||
function fetchViewCountForUris(uris) {
|
|
||||||
const claimIds = [];
|
|
||||||
|
|
||||||
if (uris) {
|
|
||||||
uris.forEach((uri) => {
|
|
||||||
if (claimsByUri[uri]) {
|
|
||||||
claimIds.push(claimsByUri[uri].claim_id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (claimIds.length > 0) {
|
|
||||||
doFetchViewCount(claimIds.join(','));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Run `doClaimSearch`
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (shouldPerformSearch) {
|
if (shouldPerformSearch) {
|
||||||
const searchOptions = JSON.parse(optionsStringForEffect);
|
const searchOptions = JSON.parse(optionsStringForEffect);
|
||||||
|
@ -218,24 +191,34 @@ function ClaimTilesDiscover(props: Props) {
|
||||||
}
|
}
|
||||||
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
|
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
|
||||||
|
|
||||||
|
// Fetch view count for uris
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
|
if (fetchViewCount && uris && uris.length > 0) {
|
||||||
// Stash new results for next render cycle:
|
const claimIds = [];
|
||||||
setPrevUris(uris);
|
|
||||||
// Fetch view count:
|
uris.forEach((uri) => {
|
||||||
if (fetchViewCount) {
|
if (claimsByUri[uri]) {
|
||||||
fetchViewCountForUris(uris);
|
claimIds.push(claimsByUri[uri].claim_id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (claimIds.length > 0) {
|
||||||
|
// TODO: this is a rough port. Need to only do this when necessary.
|
||||||
|
const TODO = true;
|
||||||
|
if (!TODO) {
|
||||||
|
doFetchViewCount(claimIds.join(','));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [shouldPerformSearch, prevUris, uris]); // eslint-disable-line react-hooks/exhaustive-deps
|
}, [uris, fetchViewCount]);
|
||||||
|
|
||||||
// **************************************************************************
|
// **************************************************************************
|
||||||
// **************************************************************************
|
// **************************************************************************
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="claim-grid">
|
<ul className="claim-grid">
|
||||||
{modifiedUris && modifiedUris.length
|
{uris && uris.length
|
||||||
? modifiedUris.map((uri) => (
|
? uris.map((uri) => (
|
||||||
<ClaimPreviewTile
|
<ClaimPreviewTile
|
||||||
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
||||||
key={uri}
|
key={uri}
|
||||||
|
|
Loading…
Reference in a new issue