front_directorio/src/components/Mapeo.js

import React, { useEffect, useState } from 'react';
import '../App.css';
import CardProfesor from './CardProfesor';

const Mapeo = ({ filters }) => {
  const [profesores, setProfesores] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [edificios, setEdificios] = useState([]);

  useEffect(() => {
    fetchProfesores();
  }, [currentPage, filters]);

  const fetchProfesores = () => {
    const query = new URLSearchParams({
      page: currentPage,
      limit: 10,
      ...filters
    }).toString();

    fetch(`http://localhost:3000/profesor/page?${query}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setProfesores(data.profesores);
        setTotalPages(data.totalPages);
      })
      .catch(error => {
        console.error('Error fetching the data: ', error);
      });

    fetch('http://localhost:3000/edificio')
      .then(response => response.json())
      .then(data => setEdificios(data))
      .catch(error => console.error('Error fetching edificios:', error));
  };

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(prevPage => prevPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(prevPage => prevPage - 1);
    }
  };

  const getPageNumbers = () => {
    const maxPagesToShow = 6;
    const halfRange = Math.floor(maxPagesToShow / 2);
    let start = Math.max(1, currentPage - halfRange);
    let end = Math.min(totalPages, currentPage + halfRange);

    if (currentPage - halfRange < 1) {
      end = Math.min(totalPages, end + (halfRange - currentPage + 1));
    }
    if (currentPage + halfRange > totalPages) {
      start = Math.max(1, start - (currentPage + halfRange - totalPages));
    }

    const pages = [];
    for (let i = start; i <= end; i++) {
      pages.push(i);
    }
    return pages;
  };

  return (
    <div className="main-content">
      {profesores.map(profesor => {
        const edificio = edificios.find(e => e.id_edificio === profesor.id_edificio);
        const edificioNombre = edificio ? edificio.edificio : 'Desconocido';
        return (
          <CardProfesor key={profesor.id_profesor} profesor={profesor} edificioNombre={edificioNombre} />
        );
      })}

      <nav aria-label="Page navigation example">
        <ul className="pagination justify-content-center">
          <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
            <a className="page-link" href="#" onClick={handlePrevPage}>
              Anterior
            </a>
          </li>
          {getPageNumbers().map(page => (
            <li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
              <a className="page-link" href="#" onClick={() => setCurrentPage(page)}>
                {page}
              </a>
            </li>
          ))}
          <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
            <a className="page-link" href="#" onClick={handleNextPage}>
              Siguiente
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Mapeo;