Correcciones con el botón de favorito (Aún faltan más correcciones)

createchsoftware · Jun 3, 2024 · 8d40023 · 8d40023
1 parent 36e6d87
commit 8d40023
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 20 deletions.
diff --git a/client/src/components/ui/PopupServicio.jsx b/client/src/components/ui/PopupServicio.jsx
@@ -17,7 +17,7 @@ const StyledRating = styled(Rating)({
   },
 });
 
-const PopupServicio = ({ cerrar, check, datos, update }) => {
+const PopupServicio = ({ cerrar, check, datos, update, st }) => {
   const sim = [
     {
       nombre: "Cargando...",
@@ -118,6 +118,31 @@ const PopupServicio = ({ cerrar, check, datos, update }) => {
     }
   };
 
+  const callFav = async () => {
+    if (datos.id != 0) {
+      try {
+        const respuesta = await fetch("/api/admin/productos/setFavorito", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            id: datos.idUser,
+            idPS: datos.id,
+            estado: datos.favorito,
+          }),
+        });
+
+        let respuestaJson = await respuesta.json();
+        if ((await respuestaJson[0].res) == true) {
+          st();
+        }
+      } catch (error) {
+        console.log(error, "error");
+      }
+    }
+  };
+
   const mostrarSimilares = similares.slice(indexItem, indexItem + renderItems);
 
   return (
@@ -195,8 +220,9 @@ const PopupServicio = ({ cerrar, check, datos, update }) => {
             <div>
               <div className="absolute top-3 right-[1rem]">
                 <StyledRating
+                  onClick={callFav}
                   name="customized-color"
-                  defaultValue={datos.isFavorite}
+                  value={datos.favorito}
                   max={1}
                   getLabelText={(value) =>
                     `${value} Heart${value !== 1 ? "s" : ""}`

diff --git a/client/src/components/ui/Servicio.jsx b/client/src/components/ui/Servicio.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { styled } from "@mui/material/styles";
 import Box from "@mui/material/Box";
 import Rating from "@mui/material/Rating";
@@ -30,8 +30,12 @@ function Servicio({
   valoracion,
   favorito,
   log,
+  st,
 }) {
+  const [login, setLogin] = useState(false);
+  const [serv, setServ] = useState(false);
   const data = {
+    idUser: idUser,
     id: pkIdPS,
     nombre: nombre,
     descripcion: descripcion,
@@ -40,8 +44,6 @@ function Servicio({
     valoracion: valoracion,
     favorito: favorito,
   };
-  const [login, setLogin] = useState(false);
-  const [serv, setServ] = useState(false);
   const [pData, setPData] = useState(data);
   const [fav, setFav] = useState(favorito);
   const navigate = useNavigate();
@@ -64,7 +66,7 @@ function Servicio({
     setPData(data);
     setServ(!serv);
   };
-  async function callFav() {
+  const callFav = async () => {
     if (idUser != 0) {
       try {
         const respuesta = await fetch("/api/admin/productos/setFavorito", {
@@ -75,24 +77,32 @@ function Servicio({
           body: JSON.stringify({
             id: idUser,
             idPS: pkIdPS,
-            estado: fav,
+            estado: favorito,
           }),
         });
 
-        respuestaJson = await respuesta.json();
-        if (respuestaJson.res == true) {
-          await setFav(!fav);
-        } else {
-          await setFav(fav);
+        let respuestaJson = await respuesta.json();
+        if ((await respuestaJson[0].res) == true) {
+          setFav(!fav);
         }
       } catch (error) {
         console.log(error, "error");
       }
     }
-  }
+  };
+
+  useEffect(() => {
+    if (fav !== favorito) {
+      st();
+    }
+  }, [fav]);
+
   return (
     <>
-      <div className="grid gap-4 m-4 text-center md:m-8">
+      <div
+        onLoad={() => console.log(favorito)}
+        className="grid gap-4 m-4 text-center md:m-8"
+      >
         <div
           className="relative p-6 rounded-lg aspect-square"
           style={{
@@ -116,7 +126,7 @@ function Servicio({
                   <StyledRating
                     onClick={() => callFav()}
                     name="customized-color"
-                    defaultValue={fav}
+                    value={fav}
                     max={1}
                     getLabelText={(value) =>
                       `${value} Heart${value !== 1 ? "s" : ""}`
@@ -187,6 +197,7 @@ function Servicio({
           cerrar={closeServ}
           check={toggleServ}
           update={setPData}
+          st={st}
         />
       )}
     </>

diff --git a/client/src/components/ui/ServiciosYFiltro.jsx b/client/src/components/ui/ServiciosYFiltro.jsx
@@ -60,7 +60,7 @@ const filters = [
   },
 ];
 
-const ServiciosYFiltro = ({ servicios, log, idUser }) => {
+const ServiciosYFiltro = ({ servicios, log, idUser, st }) => {
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [sortOption, setSortOption] = useState(ordenamiento[0]);
   const [allProducts, setAllProducts] = useState([]);
@@ -686,6 +686,7 @@ const ServiciosYFiltro = ({ servicios, log, idUser }) => {
                     valoracion={servicio.valoracion}
                     favorito={servicio.favorito}
                     log={log}
+                    st={st}
                   />
                 ))
               )}

diff --git a/client/src/components/ui/servicios/ServiciosSpa.jsx b/client/src/components/ui/servicios/ServiciosSpa.jsx
@@ -12,6 +12,7 @@ export default function ServicioEstetica() {
   const [color2, setColor2] = useState("#F6B3B9");
   const [log, setLog] = useState(false);
   const [id, setId] = useState();
+  const [st, setSt] = useState(false);
 
   const [soon, setSoon] = useState(false);
   const toggleSoon = () => {
@@ -72,7 +73,7 @@ export default function ServicioEstetica() {
           });
       }, 3000);
     }
-  }, [id]);
+  }, [id, st]);
 
   //useEffect para obtener los servicios corporales
   useEffect(() => {
@@ -93,7 +94,7 @@ export default function ServicioEstetica() {
           });
       }, 3000);
     }
-  }, [id]);
+  }, [id, st]);
 
   const toggleService = (index) => {
     setToggleState(index);
@@ -106,6 +107,11 @@ export default function ServicioEstetica() {
     }
   };
 
+  function changeSt() {
+    console.log(5);
+    setSt(!st);
+  }
+
   return (
     <>
       <Presentacion />
@@ -146,9 +152,19 @@ export default function ServicioEstetica() {
       <div className="">
         <div>
           {toggleState == 1 ? (
-            <ServiciosYFiltro servicios={facial} log={log} idUser={id} />
+            <ServiciosYFiltro
+              servicios={facial}
+              log={log}
+              idUser={id}
+              st={changeSt}
+            />
           ) : (
-            <ServiciosYFiltro servicios={corpo} log={log} idUser={id} />
+            <ServiciosYFiltro
+              servicios={corpo}
+              log={log}
+              idUser={id}
+              st={changeSt}
+            />
           )}
           <main className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
             <div className="w-full mx-auto my-16 text-center">