pages

src/components/Mapeo.js

@@ -1,17 +1,19 @@
+
 import React, { useEffect, useState } from 'react';
 import '../App.css';
 import CardProfesor from './CardProfesor';
 
 const Mapeo = () => {
   const [profesores, setProfesores] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
 
   useEffect(() => {
-    fetch('http://localhost:3000/profesor',{
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-    })
+    fetchProfesores();
+  }, [currentPage]);
+
+  const fetchProfesores = () => {
+    fetch(`http://localhost:3000/profesor/page?page=${currentPage}&limit=10`)
       .then(response => {
         if (!response.ok) {
           throw new Error('Network response was not ok');
@@ -19,18 +21,44 @@ const Mapeo = () => {
         return response.json();
       })
       .then(data => {
-        setProfesores(data);
+        setProfesores(data.profesores);
+        setTotalPages(data.totalPages);
       })
       .catch(error => {
         console.error('Error fetching the data: ', error);
       });
-  }, []);
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(prevPage => prevPage + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(prevPage => prevPage - 1);
+    }
+  };
 
   return (
-    <div className="main-content">
+<div className="main-content">
+      <div className="page-indicator">
+        Página actual: {currentPage} de {totalPages}
+      </div>
+
       {profesores.map(profesor => (
         <CardProfesor key={profesor.id_profesor} profesor={profesor} />
       ))}
+
+      <div className="pagination-buttons">
+        <button onClick={handlePrevPage} disabled={currentPage === 1}>
+          Anterior
+        </button>
+        <button onClick={handleNextPage} disabled={currentPage === totalPages}>
+          Siguiente
+        </button>
+      </div>
     </div>
   );
 };