Add 'useFetchViewCount' to handle fetching from lists

This effect also stashes fetched uris, so that we won't re-fetch the same uris during the same instance (e.g. during infinite scroll).

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<string>, sortBy: string | Array<string>) {
     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 || (
     <ClaimListHeader
       channelIds={channelIds}

ui/component/claimTilesDiscover/view.jsx

@@ -3,6 +3,7 @@ import type { Node } from 'react';
 import React from 'react';
 import { createNormalizedClaimSearchKey } from 'lbry-redux';
 import ClaimPreviewTile from 'component/claimPreviewTile';
+import useFetchViewCount from 'effects/use-fetch-view-count';
 
 type SearchOptions = {
   page_size: number,
@@ -122,6 +123,8 @@ function ClaimTilesDiscover(props: Props) {
     uris.push(...Array(pageSize - uris.length).fill(''));
   }
 
+  useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
+
   // Run `doClaimSearch`
   React.useEffect(() => {
     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 (
     <ul className="claim-grid">
       {uris && uris.length

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<string>,
+  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]);
+}