Function useAutoRotatingAds

packages/shared/src/hooks/feed/useAutoRotatingAds.ts:22–118

(
  ad: Ad,
  index: number,
  feedIndex: number,
  ref: InViewRef,
)

export type InViewRef = InViewHookResponse['ref'];

export const useAutoRotatingAds = (
  ad: Ad,
  index: number,
  feedIndex: number,
  ref: InViewRef,
): {
  ref: InViewRef;
  refetch: QueryObserverBaseResult<Ad>['refetch'];
  isRefetching: QueryObserverBaseResult<Ad>['isRefetching'];
} => {
  const autorotateAds = useFeature(featureAutorotateAds);
  const { logEventEnd } = useLogContext();
  const { queryKey: feedQueryKey } = useContext(ActiveFeedContext);
  const queryClient = useQueryClient();
  const { ref: inViewRef, inView } = useInView({
    threshold: 0.5,
    skip: !autorotateAds,
  });

  const rotationTime = autorotateAds * 1_000;

  const refs = useCallback(
    (node: HTMLElement) => {
      ref?.(node);
      inViewRef(node);
    },
    [inViewRef, ref],
  );

  const { fetchAd } = useFetchAd();
  const queryKey = useMemo(
    () => [RequestKey.Ads, ...feedQueryKey],
    [feedQueryKey],
  );

  const fetchNewAd = useCallback(async (): Promise<Ad> => {
    const newAd = await fetchAd({
      placement: AdPlacement.Feed,
      active: true,
    });
    if (!newAd) {
      return null;
    }

    // End the impression event for the old ad
    logEventEnd(generateAdLogEventKey(feedIndex));

    queryClient.setQueryData(
      queryKey,
      (currentData: InfiniteData<Ad, unknown>) => {
        const data = currentData;
        data.pages[index] = newAd;
        data.pageParams[index] = Date.now();
        return data;
      },
    );

    return newAd;