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:
infinite-persistence 2021-09-16 21:23:40 +08:00
parent 16b33fe05f
commit 673d679083
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0

View file

@ -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}