From af8d742b75054d1e04633def6a75b850c680cbd7 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Tue, 8 Mar 2022 16:40:01 +0100
Subject: [PATCH] add some comments for documentation

---
 ui/component/claimList/view.jsx          | 5 +++++
 ui/component/claimTilesDiscover/view.jsx | 5 +++++
 ui/effects/use-last-visible-item.js      | 9 +++++++++
 web/component/ads/view.jsx               | 2 +-
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 992aa0003..b7f041ae5 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -100,7 +100,9 @@ export default function ClaimList(props: Props) {
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
 
+  // reference to the claim-grid
   const listRef = React.useRef();
+  // determine the index where the ad should be injected
   const injectedIndex = useLastVisibleItem(injectedItem, listRef);
 
   // Exclude prefix uris in these results variables. We don't want to show
@@ -147,6 +149,7 @@ export default function ClaimList(props: Props) {
   }, []);
 
   // @if process.env.NODE_ENV!='production'
+  // code to enable replacing of a claim tile isn't available here yet
   if (injectedItem && injectedItem.replace) {
     throw new Error('claimList: "injectedItem.replace" is not implemented yet');
   }
@@ -198,6 +201,7 @@ export default function ClaimList(props: Props) {
     />
   );
 
+  // returns injected ad DOM when indexes match
   const getInjectedItem = (index) => {
     if (injectedItem && injectedItem.node && injectedIndex === index) {
       return injectedItem.node;
@@ -211,6 +215,7 @@ export default function ClaimList(props: Props) {
         tileUris.map((uri, index) => (
           <React.Fragment key={uri}>
             {getInjectedItem(index)}
+            {/* inject ad node */}
             <ClaimPreviewTile
               uri={uri}
               showHiddenByUser={showHiddenByUser}
diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
index 1f9ec4f76..44ee933e4 100644
--- a/ui/component/claimTilesDiscover/view.jsx
+++ b/ui/component/claimTilesDiscover/view.jsx
@@ -76,7 +76,9 @@ function ClaimTilesDiscover(props: Props) {
     optionsStringified,
   } = props;
 
+  // reference to the claim-grid
   const sectionRef = React.useRef();
+  // determine the index where the ad should be injected
   const injectedIndex = useLastVisibleItem(injectedItem, sectionRef);
 
   const prevUris = React.useRef();
@@ -112,6 +114,7 @@ function ClaimTilesDiscover(props: Props) {
   // --------------------------------------------------------------------------
   // --------------------------------------------------------------------------
 
+  // populate the view counts for the current claim uris
   useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
 
   // Run `doClaimSearch`
@@ -127,6 +130,7 @@ function ClaimTilesDiscover(props: Props) {
       {finalUris && finalUris.length
         ? finalUris.map((uri, i) => {
             if (uri) {
+              // if indexes match, inject ad in place of tile (aka replace it)
               if (injectedIndex === i && injectedItem && injectedItem.replace) {
                 return <React.Fragment key={uri}>{injectedItem.node}</React.Fragment>;
               }
@@ -134,6 +138,7 @@ function ClaimTilesDiscover(props: Props) {
               return (
                 <React.Fragment key={uri}>
                   {injectedIndex === i && injectedItem && injectedItem.node}
+                  {/* inject ad */}
                   <ClaimPreviewTile
                     showNoSourceClaims={hasNoSource || showNoSourceClaims}
                     uri={uri}
diff --git a/ui/effects/use-last-visible-item.js b/ui/effects/use-last-visible-item.js
index 9c425f7b0..b6ce6c2a0 100644
--- a/ui/effects/use-last-visible-item.js
+++ b/ui/effects/use-last-visible-item.js
@@ -4,6 +4,12 @@ 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}
+ */
 export default function useLastVisibleItem(injectedItem: ?InjectedItem, listRef: any) {
   const [injectedIndex, setInjectedIndex] = React.useState(injectedItem?.index);
 
@@ -18,8 +24,11 @@ export default function useLastVisibleItem(injectedItem: ?InjectedItem, listRef:
       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) {
diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx
index ad45e0da3..c9a7ca858 100644
--- a/web/component/ads/view.jsx
+++ b/web/component/ads/view.jsx
@@ -121,7 +121,7 @@ function Ads(props: Props) {
     return (
       <div
         className={classnames('ads ads__claim-item', className, {
-          'ads__claim-item--tile': tileLayout,
+          'ads__claim-item--tile': tileLayout, // with no tileLayout it indicates sidebar ad
         })}
       >
         <div className="ad__container">