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;