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) => ( {getInjectedItem(index)} + {/* inject ad node */} { if (uri) { + // if indexes match, inject ad in place of tile (aka replace it) if (injectedIndex === i && injectedItem && injectedItem.replace) { return {injectedItem.node}; } @@ -134,6 +138,7 @@ function ClaimTilesDiscover(props: Props) { return ( {injectedIndex === i && injectedItem && injectedItem.node} + {/* inject ad */} { 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 (