diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index cccbdf067..712ead5c8 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/ui/component/claimListDiscover/view.jsx @@ -13,6 +13,7 @@ import ClaimPreview from 'component/claimPreview'; import ClaimPreviewTile from 'component/claimPreviewTile'; import I18nMessage from 'component/i18nMessage'; import ClaimListHeader from 'component/claimListHeader'; +import useFetchViewCount from 'effects/use-fetch-view-count'; import { useIsLargeScreen } from 'effects/use-screensize'; type Props = { @@ -523,22 +524,6 @@ function ClaimListDiscover(props: Props) { } } - 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(',')); - } - } - function resolveOrderByOption(orderBy: string | Array, sortBy: string | Array) { const order_by = orderBy === CS.ORDER_BY_TRENDING @@ -557,6 +542,8 @@ function ClaimListDiscover(props: Props) { // ************************************************************************** // ************************************************************************** + useFetchViewCount(fetchViewCount, finalUris, claimsByUri, doFetchViewCount); + React.useEffect(() => { if (shouldPerformSearch) { const searchOptions = JSON.parse(optionsStringForEffect); @@ -579,12 +566,6 @@ function ClaimListDiscover(props: Props) { } }, [uris, claimSearchResult, finalUris, setFinalUris]); - React.useEffect(() => { - if (fetchViewCount) { - fetchViewCountForUris(finalUris); - } - }, [finalUris]); // eslint-disable-line react-hooks/exhaustive-deps - const headerToUse = header || ( { if (shouldPerformSearch) { @@ -130,27 +133,6 @@ function ClaimTilesDiscover(props: Props) { } }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]); - // Fetch view count for uris - React.useEffect(() => { - if (fetchViewCount && uris && uris.length > 0) { - const claimIds = []; - - uris.forEach((uri) => { - if (uri && claimsByUri[uri]) { - 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(',')); - } - } - } - }, [uris, fetchViewCount]); - return (
    {uris && uris.length diff --git a/ui/effects/use-fetch-view-count.js b/ui/effects/use-fetch-view-count.js new file mode 100644 index 000000000..b4f8b0892 --- /dev/null +++ b/ui/effects/use-fetch-view-count.js @@ -0,0 +1,24 @@ +// @flow +import { useState, useEffect } from 'react'; + +export default function useFetchViewCount( + shouldFetch: ?boolean, + uris: Array, + claimsByUri: any, + doFetchViewCount: (string) => void +) { + const [fetchedUris, setFetchedUris] = useState([]); + + useEffect(() => { + if (shouldFetch && uris && uris.length > 0) { + const urisToFetch = uris.filter((uri) => uri && !fetchedUris.includes(uri) && Boolean(claimsByUri[uri])); + + if (urisToFetch.length > 0) { + const claimIds = urisToFetch.map((uri) => claimsByUri[uri].claim_id); + doFetchViewCount(claimIds.join(',')); + setFetchedUris([...fetchedUris, ...urisToFetch]); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [uris]); +}