Advertisement
fetusz

Untitled

Dec 26th, 2023
1,080
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { useEffect, useState } from "react";
  2. import ReactPaginate from "react-paginate";
  3. import { IComment } from "../@types";
  4.  
  5. //const items = [...Array(33).keys()];
  6.  
  7. const Items = (currentItems:IComment[] | []) => {
  8.   return (
  9.     <div className="items">
  10.       {
  11.         currentItems && currentItems.map((item) => (
  12.         <div>
  13.           <h3></h3>
  14.         </div>
  15.         ))
  16.       }
  17.     </div>
  18.   );
  19. }
  20.  
  21. const PaginatedItems = ( items:IComment[] | [], itemsPerPage:number ) => {
  22.   // We start with an empty list of items.
  23.   const [currentItems, setCurrentItems] = useState<(IComment| null)[]>([]);
  24.   const [pageCount, setPageCount] = useState<number>(0);
  25.   // Here we use item offsets; we could also use page offsets
  26.   // following the API or data you're working with.
  27.   const [itemOffset, setItemOffset] = useState<number>(0);
  28.  
  29.   useEffect(() => {
  30.     // Fetch items from another resources.
  31.     const endOffset = itemOffset + itemsPerPage;
  32.     console.log(`Loading items from ${itemOffset} to ${endOffset}`);
  33.     setCurrentItems(items.slice(itemOffset, endOffset));
  34.     setPageCount(Math.ceil(items.length / itemsPerPage));
  35.   }, [itemOffset, itemsPerPage]);
  36.  
  37.   // Invoke when user click to request another page.
  38.   const handlePageClick = (event:React.ChangeEvent<HTMLInputElement>) => {
  39.     const newOffset = event.selected * itemsPerPage % items.length;
  40.     console.log(`User requested page number ${event.selected}, which is offset ${newOffset}`);
  41.     setItemOffset(newOffset);
  42.   };
  43.  
  44.   return (
  45.     <>
  46.       <Items currentItems={currentItems} />
  47.       <ReactPaginate
  48.         nextLabel="next >"
  49.         onPageChange={handlePageClick}
  50.         pageRangeDisplayed={3}
  51.         marginPagesDisplayed={2}
  52.         pageCount={pageCount}
  53.         previousLabel="< previous"
  54.         pageClassName="page-item"
  55.         pageLinkClassName="page-link"
  56.         previousClassName="page-item"
  57.         previousLinkClassName="page-link"
  58.         nextClassName="page-item"
  59.         nextLinkClassName="page-link"
  60.         breakLabel="..."
  61.         breakClassName="page-item"
  62.         breakLinkClassName="page-link"
  63.         containerClassName="pagination"
  64.         activeClassName="active"
  65.         renderOnZeroPageCount={null}
  66.       />
  67.     </>
  68.   );
  69. }
  70.  
  71. export default PaginatedItems;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement