@applicaster/zapp-react-native-utils/reactHooks/flatList/useLoadNextPageIfNeeded.ts

Applicaster Zapp React Native utilities package

import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
import React from "react";

type Return = (index: number) => void;

type Predicate = (
  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
  index: number,
  numberOfColumns: number
) => boolean;

type Props = {
  ifNeeded: Predicate;
  loadNextData: () => void;
  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
  numberOfColumns?: number;
};

const handleLoadNextPage =
  (
    ifNeeded: (
      entry: ZappEntry[],
      index: number,
      numberOfColumns?: number
    ) => boolean,
    loadNextData: () => void,
    entry: ZappEntry[],
    numberOfColumns
  ) =>
  (index: number) => {
    /**
     * Lazy-Loading, invoke nextLoadData if we reach the end of the List
     */

    if (ifNeeded(entry, index, numberOfColumns)) {
      loadNextData();
    }
  };

export const useLoadNextPageIfNeeded = ({
  ifNeeded,
  loadNextData = noop,
  entry,
  numberOfColumns = 0,
}: Props): Return => {
  return React.useCallback(
    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
    [ifNeeded, loadNextData, entry, numberOfColumns]
  );
};