From af7345b3cdc8efab25b69fe8958d301eda6fe8f1 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 17 Sep 2021 15:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=8F=AA=20ClaimListDiscover:=20revert=20and?=
 =?UTF-8?q?=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Revert
- Removed the 'finalUris' stuff that was meant to "pause" visual changes when fetching. I think it'll be cleaner to use React.memo to achieve that.

## Alterations
- Added `renderUri` to make it clear which array that this component will render.
- Re-do the way we fetch view counts now that 'finalUris' is gone. Not the best method, but at least correct for now.
---
 ui/component/claimListDiscover/view.jsx | 51 ++++---------------------
 1 file changed, 8 insertions(+), 43 deletions(-)

diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx
index 712ead5c8..a0d85f29a 100644
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@@ -376,9 +376,9 @@ function ClaimListDiscover(props: Props) {
 
   const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
 
-  const mainSearchKey = createNormalizedClaimSearchKey(options);
-  let claimSearchResult = claimSearchByQuery[mainSearchKey];
-  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[mainSearchKey];
+  const searchKey = createNormalizedClaimSearchKey(options);
+  const claimSearchResult = claimSearchByQuery[searchKey];
+  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[searchKey];
 
   // uncomment to fix an item on a page
   //   const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
@@ -396,9 +396,6 @@ function ClaimListDiscover(props: Props) {
   //     claimSearchResult.splice(2, 0, fixUri);
   //   }
 
-  const [finalUris, setFinalUris] = React.useState(
-    getFinalUrisInitialState(history.action === 'POP', claimSearchResult)
-  );
   const [prevOptions, setPrevOptions] = React.useState(null);
 
   if (!isJustScrollingToNewPage(prevOptions, options)) {
@@ -460,6 +457,8 @@ function ClaimListDiscover(props: Props) {
     </div>
   );
 
+  const renderUris = uris || claimSearchResult;
+
   // **************************************************************************
   // Helpers
   // **************************************************************************
@@ -505,25 +504,6 @@ function ClaimListDiscover(props: Props) {
     }
   }
 
-  function urisEqual(prev: Array<string>, next: Array<string>) {
-    if (!prev || !next) {
-      // From 'ClaimList', "null" and "undefined" have special meaning,
-      // so we can't just compare array length here.
-      //   - null = "timed out"
-      //   - undefined = "no result".
-      return prev === next;
-    }
-    return prev.length === next.length && prev.every((value, index) => value === next[index]);
-  }
-
-  function getFinalUrisInitialState(isNavigatingBack, claimSearchResult) {
-    if (isNavigatingBack && claimSearchResult && claimSearchResult.length > 0) {
-      return claimSearchResult;
-    } else {
-      return [];
-    }
-  }
-
   function resolveOrderByOption(orderBy: string | Array<string>, sortBy: string | Array<string>) {
     const order_by =
       orderBy === CS.ORDER_BY_TRENDING
@@ -542,7 +522,7 @@ function ClaimListDiscover(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
-  useFetchViewCount(fetchViewCount, finalUris, claimsByUri, doFetchViewCount);
+  useFetchViewCount(fetchViewCount, renderUris, claimsByUri, doFetchViewCount);
 
   React.useEffect(() => {
     if (shouldPerformSearch) {
@@ -551,21 +531,6 @@ function ClaimListDiscover(props: Props) {
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
 
-  // Resolve 'finalUri'
-  React.useEffect(() => {
-    if (uris) {
-      if (!urisEqual(uris, finalUris)) {
-        setFinalUris(uris);
-      }
-    } else {
-      // Wait until all queries are done before updating the uris to avoid layout shifts.
-      const pending = claimSearchResult === undefined;
-      if (!pending && !urisEqual(claimSearchResult, finalUris)) {
-        setFinalUris(claimSearchResult);
-      }
-    }
-  }, [uris, claimSearchResult, finalUris, setFinalUris]);
-
   const headerToUse = header || (
     <ClaimListHeader
       channelIds={channelIds}
@@ -603,7 +568,7 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             tileLayout
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -635,7 +600,7 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             type={type}
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}