github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/hooks/usePaginatedList.ts (about)

     1  import { useEffect, useState } from "react";
     2  
     3  function usePaginatedList<T>(
     4    items: T[] = [],
     5    pageSize = 10,
     6    doubleOnExpand = true
     7  ) {
     8    const [allItems, setAllItems] = useState(items);
     9    const [visibleItems, setVisibleItems] = useState(items.slice(0, pageSize));
    10    const [nextPageSize, setNextPageSize] = useState(
    11      doubleOnExpand ? pageSize * 2 : pageSize
    12    );
    13  
    14    useEffect(() => {
    15      setAllItems(items);
    16      setVisibleItems(items.slice(0, pageSize));
    17      setNextPageSize(doubleOnExpand ? pageSize * 2 : pageSize);
    18    }, [doubleOnExpand, items, pageSize]);
    19  
    20    const hasMore = visibleItems.length < allItems.length;
    21  
    22    const loadMore = () => {
    23      if (!hasMore) {
    24        return;
    25      }
    26      const nextItems = allItems.slice(
    27        visibleItems.length,
    28        nextPageSize + visibleItems.length - 1
    29      );
    30      setVisibleItems([...visibleItems, ...nextItems]);
    31      setNextPageSize(doubleOnExpand ? nextPageSize * 2 : pageSize);
    32    };
    33  
    34    return { visibleItems, hasMore, loadMore };
    35  }
    36  
    37  export default usePaginatedList;