mejora del sitio, tanto admin como usuario, seagrego categorias, rent…

…as de productops

src/App.js

@@ -48,7 +48,7 @@ export default function App() {
         <ScrollTop/>
         <Routes>
           <Route path='/' element={<InicioUsuario />} />
-          <Route path="productos" element={<Producto />} />
+          <Route path="productos/:categoriaId" element={<Producto />} />
           <Route path="login" element={<LoginUser />} />
           <Route path="registroUsuario" element={<RegistroUser />} />
           <Route path="carritoDeCompras" element={<CarritoCompra />} />

src/componentes/DetalleProductoRenta.js

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import Swal from "sweetalert2";
 import { AuthContext } from '../autenticar/AuthProvider';
 import { useNavigate } from 'react-router-dom';
+import '../css/spinner.css'
 
 const DetalleProductoRenta = () => {
   const [selectedImage, setSelectedImage] = useState('');
@@ -134,7 +135,7 @@ const DetalleProductoRenta = () => {
     const [hora, minutos] = value.split(':');
     if (hora < 8 || hora > 17 || (hora == 17 && minutos > 0)) {
       setErrors(prevErrors => ({
-        ...prevErrors,        
+        ...prevErrors,
         horaRecogida: `La hora de recogida debe estar entre las 8:00 AM y las 5:00 PM.`
       }));
     } else {
@@ -188,8 +189,8 @@ const DetalleProductoRenta = () => {
             fechaInicio,
             fechaFin,
             horarioRecogida: horaRecogida,
-            Cantidad:count,
-            tallaSeleccionada:selectedTalla
+            Cantidad: count,
+            tallaSeleccionada: selectedTalla
           })
         });
         const rentaData = await responseRenta.json();
@@ -378,7 +379,10 @@ const DetalleProductoRenta = () => {
 
         </div>
       ) : (
-        <p>Cargando...</p>
+        <div className='mt-5 mb-5'>
+          <p className='name-spinner mt-5'>Cargando...</p>
+          <div className="spinner mb-5"></div>
+        </div>
       )}
     </div>
   );

src/componentes/ProductosRenta.js

@@ -5,6 +5,7 @@ import Swal from "sweetalert2";
 import { Productos_Renta } from "../url/urlSitioWeb";
 import { Link } from "react-router-dom";
 import "../css/colores.css";
+import '../css/spinner.css';
 
 function ProductoRentaCard({ producto }) {
   return (
@@ -33,6 +34,7 @@ function ProductoRentaCard({ producto }) {
 
 function ProductosRenta() {
   const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true); // Estado para controlar la carga
 
   const fetchProductosRenta = async () => {
     try {
@@ -42,9 +44,11 @@ function ProductosRenta() {
       }
       const jsonData = await response.json();
       setData(jsonData);
-      console.log(jsonData)
+      setIsLoading(false); // Detener la carga después de obtener los datos
+      console.log(jsonData);
     } catch (error) {
       Swal.fire({ title: "Error al hacer la solicitud.", icon: "error" });
+      setIsLoading(false); // Detener la carga en caso de error
     }
   }
 
@@ -57,18 +61,25 @@ function ProductosRenta() {
       <div className="flex container mx-auto justify-center">
         <Breadcrumb path={"Productos de Renta"} />
       </div>
-      <Row>
-        <Col lg={9}>
-          <Row xs={2} md={4}>
-            {data.map((producto) => (
-              <ProductoRentaCard
-                key={producto._id}
-                producto={producto}
-              />
-            ))}
-          </Row>
-        </Col>
-      </Row>
+      {isLoading ? (
+        <div className='mt-5 mb-5'>
+          <p className='name-spinner mt-5'>Cargando...</p>
+          <div className="spinner mb-5"></div>
+        </div>
+      ) : (
+        <Row>
+          <Col lg={9}>
+            <Row xs={2} md={4}>
+              {data.map((producto) => (
+                <ProductoRentaCard
+                  key={producto._id}
+                  producto={producto}
+                />
+              ))}
+            </Row>
+          </Col>
+        </Row>
+      )}
     </Container>
   );
 }

src/componentes/accesorios.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { Card, Container, Row, Col } from "react-bootstrap";
+import { Card, Container, Row, Col, Button, Pagination } from "react-bootstrap";
 import Breadcrumb from "../utilidad/migapan";
-import "../css/colores.css";
 import Swal from "sweetalert2";
-import { Productos } from "../url/urlSitioWeb";
+import { categoria_productos } from "../url/urlSitioWeb";
 import { Link } from "react-router-dom";
+import "../css/colores.css";
+import '../css/spinner.css';
 
 function AccesorioEnfermeriaCard({ accesorio }) {
   return (
@@ -22,13 +23,10 @@ function AccesorioEnfermeriaCard({ accesorio }) {
         </div>
         <div className="descProducto">
           <h3 className="lead">{accesorio.nombre}</h3>
-          {/* <p className="lead">Categoría: {accesorio.categoria.map((cat) => cat.nombre).join(", ")} </p> */}
-          <h4 className="lead" >
+          <h4 className="lead">
             $ <span className="lead" style={{ color: "#0171fa" }}>{accesorio.precio}</span>
           </h4>
           <div className="ms-3 d-grid mx-auto">
-            {/* <button className="btnvermas">Ver más</button> */}
-            {/* <Link to={`/detalle-producto/${accesorio._id}`} className="btnvermas"> */}
             <Link to={`/detalle-producto/${accesorio._id}`} className="btnvermas">
               Ver más
             </Link>
@@ -41,29 +39,91 @@ function AccesorioEnfermeriaCard({ accesorio }) {
 
 function Accesorios() {
   const [data, setData] = useState([]);
-  const [selectedType, setSelectedType] = useState(""); // Estado para el tipo seleccionado
-  const [selectedColor, setSelectedColor] = useState(""); // Estado para el color seleccionado
-  const [priceRange, setPriceRange] = useState([0, 20]); // Rango de precios
+  const [filteredData, setFilteredData] = useState([]);
+  const [priceRange, setPriceRange] = useState([0, 1000]); // Rango de precios
+  const [onlyDiscount, setOnlyDiscount] = useState(false); // Estado para filtrar solo productos con descuento
+  const [searchTerm, setSearchTerm] = useState(""); // Estado para el término de búsqueda
+  const [currentPage, setCurrentPage] = useState(1); // Estado para la página actual
+  const [itemsPerPage] = useState(8); // Estado para la cantidad de ítems por página
+  const [isLoading, setIsLoading] = useState(true); // Estado para controlar la carga
+
   const minPrice = 0;
-  const maxPrice = 20;
+  const maxPrice = 1000;
 
   const datosProducto = async () => {
     try {
-      const response = await fetch(Productos);
+      const response = await fetch(`${categoria_productos}660e8da897d41d20a385ee4f`);
       if (!response.ok) {
-        throw new Error('La respuesta de la red no fue exitosa.')
+        throw new Error('La respuesta de la red no fue exitosa.');
       }
       const jsonData = await response.json();
       setData(jsonData);
+      setFilteredData(jsonData);
+      setIsLoading(false); // Detener la carga después de obtener los datos
     } catch (error) {
       Swal.fire({ title: "Error al hacer la solicitud.", icon: "error" });
+      setIsLoading(false); // Detener la carga en caso de error
     }
   }
 
   useEffect(() => {
     datosProducto();
   }, [])
 
+  useEffect(() => {
+    applyFilters();
+  }, [priceRange, onlyDiscount, searchTerm]);
+
+  const applyFilters = () => {
+    let filtered = data;
+
+    filtered = filtered.filter(item => item.precio >= priceRange[0] && item.precio <= priceRange[1]);
+
+    if (onlyDiscount) {
+      filtered = filtered.filter(item => item.descuento > 0);
+    }
+
+    if (searchTerm) {
+      const lowerCaseSearchTerm = searchTerm.toLowerCase();
+      filtered = filtered.filter(item =>
+        item.nombre.toLowerCase().includes(lowerCaseSearchTerm) ||
+        item.descripcion.toLowerCase().includes(lowerCaseSearchTerm)
+      );
+    }
+
+    setFilteredData(filtered);
+    setCurrentPage(1); // Reset page number when filters change
+  };
+
+  const handlePriceRangeChange = (e) => {
+    const { name, value } = e.target;
+    setPriceRange(prevRange => {
+      if (name === "min") {
+        return [Number(value), prevRange[1]];
+      } else {
+        return [prevRange[0], Number(value)];
+      }
+    });
+  };
+
+  const resetFilters = () => {
+    setPriceRange([0, 1000]);
+    setOnlyDiscount(false);
+    setSearchTerm("");
+    setFilteredData(data);
+  };
+
+  // Logic for displaying current items
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);
+
+  // Logic for displaying page numbers
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(filteredData.length / itemsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
   return (
     <Container>
       <div className="flex container mx-auto justify-center">
@@ -72,56 +132,81 @@ function Accesorios() {
       <Row>
         <Col lg={3}>
           <div className="mb-4">
-            <h5>Filtrar por Tipo</h5>
-            <select
-              className="form-select"
-            //   onChange={(e) => setSelectedType(e.target.value)}
-            //   value={selectedType}
-            >
-              <option value="">Todos</option>
-              <option value="Estetoscopio">Estetoscopio</option>
-              <option value="Tijeras Médicas">Tijeras Médicas</option>
-              {/* Agrega más tipos según sea necesario */}
-            </select>
-          </div>
-          <div className="mb-4">
-            <h5>Filtrar por Color</h5>
-            <select
-              className="form-select"
-            //   onChange={(e) => setSelectedColor(e.target.value)}
-            //   value={selectedColor}
-            >
-              <option value="">Todos</option>
-              <option value="Blanco">Blanco</option>
-              <option value="Azul">Azul</option>
-              {/* Agrega más colores según sea necesario */}
-            </select>
+            <h5>Buscar por Nombre o Descripción</h5>
+            <input
+              type="text"
+              className="form-control"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
           </div>
           <div className="mb-4">
             <h5>Filtrar por Precio</h5>
-            <input
-              type="range"
-              min={minPrice}
-              max={maxPrice}
-              value={priceRange.join(",")}
-              className="form-range"
-            //   onChange={handlePriceRangeChange}
-            />
+            <div className="d-flex">
+              <input
+                type="number"
+                className="form-control me-2"
+                name="min"
+                value={priceRange[0]}
+                onChange={handlePriceRangeChange}
+                placeholder="Min"
+              />
+              <input
+                type="number"
+                className="form-control"
+                name="max"
+                value={priceRange[1]}
+                onChange={handlePriceRangeChange}
+                placeholder="Max"
+              />
+            </div>
             <div>
-              Preciosss: ${priceRange[0]} - ${priceRange[1]}
+              Precio: ${priceRange[0]} - ${priceRange[1]}
             </div>
           </div>
+          <div className="mb-4">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                checked={onlyDiscount}
+                onChange={(e) => setOnlyDiscount(e.target.checked)}
+              />
+              <label className="form-check-label">
+                Solo con descuento
+              </label>
+            </div>
+          </div>
+          <div className="mb-4">
+            <Button onClick={resetFilters} className="btn btn-secondary w-100">
+              Limpiar Filtros
+            </Button>
+          </div>
         </Col>
 
         <Col lg={9}>
-          <Row xs={2} md={4}>
-            {data.map((accesorio) => (
-              <AccesorioEnfermeriaCard
-                key={accesorio._id}
-                accesorio={accesorio}
-              />
+          {isLoading ? (
+            <div className='mt-5 mb-5'>
+              <p className='name-spinner mt-5'>Cargando...</p>
+              <div className="spinner mb-5"></div>
+            </div>
+          ) : (
+            <Row xs={2} md={4}>
+              {currentItems.map((accesorio) => (
+                <AccesorioEnfermeriaCard
+                  key={accesorio._id}
+                  accesorio={accesorio}
+                />
+              ))}
+            </Row>
+          )}
+          <Pagination className="mt-3">
+            {pageNumbers.map(number => (
+              <Pagination.Item key={number} active={number === currentPage} onClick={() => setCurrentPage(number)}>
+                {number}
+              </Pagination.Item>
             ))}
-          </Row>
+          </Pagination>
         </Col>
       </Row>
     </Container>