diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 7677445..24cbc91 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -11,6 +11,7 @@ export default function Home() { const [games, setGames] = useState([]); const [loading, setLoading] = useState(true); const [name, setName] = useState(""); + const [currentPage, setCurrentPage] = useState(1); useEffect(() => { const tokenLocal = localStorage.getItem("token"); @@ -21,7 +22,7 @@ export default function Home() { setToken(tokenLocal); setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user); - + async function fetchGames() { setLoading(true); try { @@ -41,10 +42,22 @@ export default function Home() { setName(event.target.value); }; - const filteredGames = games.filter((game) => + const filteredGames = games.filter((game) => game.title.toLowerCase().includes(name.toLowerCase()) ); + const itemsPerPage = 10; + const totalPages = Math.ceil(filteredGames.length / itemsPerPage); + + function handlePageChange(newPage) { + if (newPage >= 1 && newPage <= totalPages) { + setCurrentPage(newPage); + window.scrollTo(0, 0); + } + } + + const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); + function getCode(id) { const alphabet = 'abcdefghijklmnopqrstuvwxyz'; const base = alphabet.length; @@ -71,25 +84,43 @@ export default function Home() { value={name} onChange={handleSearchChange} /> +
+ + Page {currentPage} of {totalPages} + +
{loading ? (
Loading...
) : ( - filteredGames.map((game) => ( + currentGames.map((game) => (

{game.title}

{(JSON.parse(game.helpers).map((helper) => ( - helper === user.id ? () => {} : ( + helper === user.username ? () => { } : (

{helper}

- ))))} + ))))}
)) )} +
+ + Page {currentPage} of {totalPages} + +
); }