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.
This commit is contained in:
parent
f5a0f39f59
commit
0e233e04a8
3 changed files with 20 additions and 28 deletions
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue