Function usePagination

Returns {
    appendNextPage: ((fetch, mutation?) => Promise<void>);
    checkHasMore: (<D>(newData) => D[]);
    currentPage: number;
    hasMore: boolean;
    refreshLastPage: ((fetch, mutation?) => Promise<void>);
}

The returning object contains:

• appendNextPage: Function to load the next page of data and append it to the current data.
• checkHasMore: Function that checks if there are more pages based on the fetched data.
• currentPage: The current page number.
• hasMore: Boolean indicating whether there are more pages to fetch.
• refreshLastPage: Function to refresh the last page of data with updated results.

Implementation Details:

• State Management: useState manages the current page, data (setData), and pagination state (hasMore), updating them as new data is fetched.
• Appending New Data: appendNextPage fetches and appends new data to the existing state, applying an optional mutation function to transform the data.
• Refreshing Data: refreshLastPage re-fetches and updates the last page, removing any extra items from previous pages that don't fit the limit.
• Pagination Logic: checkHasMore sets hasMore to false if the fetched data is fewer than the limit, indicating no more pages.
• Error Handling: Errors can be managed in the fetch function, logging or re-throwing with context.
• Fetch Options: An optional mutation function allows for data transformation before appending it to the state.

• appendNextPage: ((fetch, mutation?) => Promise<void>)

  • • (fetch, mutation?): Promise<void>

    • Parameters

      • fetch: ((__namedParameters) => Promise<T[]>)

        • • (__namedParameters): Promise<T[]>

          • Parameters

            • __namedParameters: {
                  limit: number;
                  page: number;
              }

              • limit: number

              • page: number

            Returns Promise<T[]>

      • Optional mutation: ((data) => T)

        • • (data): T

          • Parameters

            • data: T

            Returns T

      Returns Promise<void>

• checkHasMore: (<D>(newData) => D[])

  • • <D>(newData): D[]

    • Type Parameters

      • D

      Parameters

      • newData: D[]

      Returns D[]

• currentPage: number

• hasMore: boolean

• refreshLastPage: ((fetch, mutation?) => Promise<void>)

  • • (fetch, mutation?): Promise<void>

    • Parameters

      • fetch: ((__namedParameters) => Promise<T[]>)

        • • (__namedParameters): Promise<T[]>

          • Parameters

            • __namedParameters: {
                  limit: number;
                  page: number;
              }

              • limit: number

              • page: number

            Returns Promise<T[]>

      • Optional mutation: ((data) => T)

        • • (data): T

          • Parameters

            • data: T

            Returns T

      Returns Promise<void>

import { usePagination } from 'react-playmakers';

const fetchItems = async ({ page, limit }) => {
  const response = await fetch(`https://api.example.com/items?page=${page}&limit=${limit}`);
  return await response.json();
};

const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const { appendNextPage, refreshLastPage, currentPage, hasMore: moreItems } = usePagination(
    setItems,
    setHasMore,
    hasMore,
    1,
    10
  );

  useEffect(() => {
    // Initial fetch for the first page
    appendNextPage(fetchItems);
  }, []);

  const loadMore = () => {
    if (moreItems) {
      appendNextPage(fetchItems);
    }
  };

  const refresh = () => {
    refreshLastPage(fetchItems);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {moreItems && <button onClick={loadMore}>Load More</button>}
      <button onClick={refresh}>Refresh Last Page</button>
    </div>
  );
};
Copy