commit

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}
       />
+      <div className="pagination">
+        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+          Previous
+        </button>
+        <span>Page {currentPage} of {totalPages}</span>
+        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
+          Next
+        </button>
+      </div>
       {loading ? (
         <div>Loading...</div>
       ) : (
-        filteredGames.map((game) => (
+        currentGames.map((game) => (
           <div className='game'>
             <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} />
             <h1 className='game-title'>{game.title}</h1>
             <div className='helpers'>
               {(JSON.parse(game.helpers).map((helper) => (
-                helper === user.id ? () => {} : (
+                helper === user.username ? () => { } : (
                   <div className='helper'>
                     <h2 className='helper-title'>{helper}</h2>
                   </div>
-              ))))}
+                ))))}
             </div>
             <HelpButton gameid={game.id} helpingprop={JSON.parse(game.helpers).includes(user.id)} token={token} />
           </div>
         ))
       )}
+      <div className="pagination">
+        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+          Previous
+        </button>
+        <span>Page {currentPage} of {totalPages}</span>
+        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
+          Next
+        </button>
+      </div>
     </div>
   );
 }