From 0e233e04a87b74f91004e8c4455112419a37c962 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 18 Apr 2022 16:37:10 +0800
Subject: [PATCH] Generalize `useGetLastVisibleSlot`

It was meant to be general-purpose in the first-place, but ended being tied to ads due to time constraint and also bad documentation.

No functional change.
---
 ui/component/claimList/view.jsx          |  5 ++--
 ui/component/claimTilesDiscover/view.jsx |  7 +++--
 ui/effects/use-get-last-visible-slot.js  | 36 +++++++++---------------
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 9a71c2b0e..43c267378 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -106,7 +106,8 @@ export default function ClaimList(props: Props) {
 
   // Resolve the index for injectedItem, if provided; else injectedIndex will be 'undefined'.
   const listRef = React.useRef();
-  const injectedIndex = useGetLastVisibleSlot(injectedItem, listRef);
+  const findLastVisibleSlot = injectedItem && injectedItem.node && injectedItem.index === undefined;
+  const lastVisibleIndex = useGetLastVisibleSlot(listRef, !findLastVisibleSlot);
 
   // Exclude prefix uris in these results variables. We don't want to show
   // anything if the search failed or timed out.
@@ -205,7 +206,7 @@ export default function ClaimList(props: Props) {
   );
 
   const getInjectedItem = (index) => {
-    if (injectedItem && injectedItem.node && injectedIndex === index) {
+    if (injectedItem && injectedItem.node && lastVisibleIndex === index) {
       return injectedItem.node;
     }
     return null;
diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
index a46655d8a..1f9477d3e 100644
--- a/ui/component/claimTilesDiscover/view.jsx
+++ b/ui/component/claimTilesDiscover/view.jsx
@@ -93,7 +93,8 @@ function ClaimTilesDiscover(props: Props) {
   } = props;
 
   const listRef = React.useRef();
-  const injectedIndex = useGetLastVisibleSlot(injectedItem, listRef);
+  const findLastVisibleSlot = injectedItem && injectedItem.node && injectedItem.index === undefined;
+  const lastVisibleIndex = useGetLastVisibleSlot(listRef, !findLastVisibleSlot);
 
   const prevUris = React.useRef();
   const claimSearchUris = claimSearchResults || [];
@@ -186,13 +187,13 @@ function ClaimTilesDiscover(props: Props) {
       {finalUris && finalUris.length
         ? finalUris.map((uri, i) => {
             if (uri) {
-              if (injectedIndex === i && injectedItem && injectedItem.replace) {
+              if (lastVisibleIndex === i && injectedItem && injectedItem.replace) {
                 return <React.Fragment key={uri}>{injectedItem.node}</React.Fragment>;
               }
 
               return (
                 <React.Fragment key={uri}>
-                  {injectedIndex === i && injectedItem && injectedItem.node}
+                  {lastVisibleIndex === i && injectedItem && injectedItem.node}
                   <ClaimPreviewTile
                     showNoSourceClaims={hasNoSource || showNoSourceClaims}
                     uri={uri}
diff --git a/ui/effects/use-get-last-visible-slot.js b/ui/effects/use-get-last-visible-slot.js
index f78761f1d..aca52ba8d 100644
--- a/ui/effects/use-get-last-visible-slot.js
+++ b/ui/effects/use-get-last-visible-slot.js
@@ -1,34 +1,24 @@
 // @flow
 import React from 'react';
-import type { Node } from 'react';
-
-type InjectedItem = { node: Node, index?: number, replace?: boolean };
 
 /**
- * Returns the index indicating where in the claim-grid to inject the ad element
- * @param injectedItem
- * @param listRef - A reference to the claim-grid
- * @returns {number}
+ * Returns the last visible slot in a list.
+ *
+ * @param listRef A reference to the list.
+ * @param skipEval Skip the evaluation/effect. Useful if the client knows the effect is not needed in certain scenarios.
+ * @param checkDelayMs Delay before running the effect. Useful if the list is known to not be populated until later.
+ * @returns {number | undefined} Zero-indexed number representing the last visible slot.
  */
-export default function useGetLastVisibleSlot(injectedItem: ?InjectedItem, listRef: any) {
-  const [injectedIndex, setInjectedIndex] = React.useState(injectedItem?.index);
+export default function useGetLastVisibleSlot(listRef: any, skipEval: boolean, checkDelayMs: number = 1500) {
+  const [lastVisibleIndex, setLastVisibleIndex] = React.useState(undefined);
 
   React.useEffect(() => {
-    // Move to default injection index (last visible item)
-    if (injectedItem && injectedItem.index === undefined) {
-      // AD_INJECTION_DELAY_MS = average total-blocking-time incurred for
-      // loading ads. Delay to let higher priority tasks run first. Ideally,
-      // should use 'requestIdleCallback/requestAnimationFrame'.
-      const AD_INJECTION_DELAY_MS = 1500;
-
+    if (!skipEval) {
       const timer = setTimeout(() => {
         if (listRef.current) {
           const screenBottom = window.innerHeight;
-
-          // claim preview tiles
           const items = listRef.current.children;
 
-          // algo to return index of item, where ad will be injected before it
           if (items.length) {
             let i = 2; // Start from 2, so that the min possible is index-1
             for (; i < items.length; ++i) {
@@ -38,18 +28,18 @@ export default function useGetLastVisibleSlot(injectedItem: ?InjectedItem, listR
               }
             }
 
-            setInjectedIndex(i - 1);
+            setLastVisibleIndex(i - 1);
             return;
           }
         }
 
         // Fallback to index-1 (2nd item) for failures. No retries.
-        setInjectedIndex(1);
-      }, AD_INJECTION_DELAY_MS);
+        setLastVisibleIndex(1);
+      }, checkDelayMs);
 
       return () => clearTimeout(timer);
     }
   }, []);
 
-  return injectedIndex;
+  return lastVisibleIndex;
 }