Merge pull request #79 from leonardoOluz/fetchData

feat: ✅ Tratando dados de api mock de pedidos e favo…

Author: leonardoOluz

package-lock.json

@@ -24,6 +24,7 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.5.1",
     "react-toastify": "^11.0.5",
+    "redux-saga": "^1.3.0",
     "styled-components": "^6.1.16",
     "swiper": "^11.2.6",
     "uuid": "^11.1.0",

package.json

@@ -8,7 +8,8 @@ import { thema } from "@/styles/thema";
 import { useNavigate } from "react-router-dom";
 import { RootState } from "@/types/store";
 import { useSelector, useDispatch } from "react-redux";
-import { logout } from "@/store/reducers/usuario";
+import { logoutUser } from "@/store/reducers/usuario";
+import { AppDispatch } from "@/store";
 
 const iconsStyles = {
   width: "6rem",
@@ -25,13 +26,13 @@ const SpanBtn = styled.span`
 `;
 const BtnLogar = () => {
   const user = useSelector((state: RootState) => state.usuario);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const width = useResize();
   const navigate = useNavigate();
 
   const handleLogout = () => {
     if (user.isLogado) {
-      dispatch(logout());
+      dispatch(logoutUser());
       navigate("/");
       return;
     }

src/components/BtnLogar/index.tsx

@@ -12,7 +12,7 @@ import useSelectCatPromocao from "@/hooks/useSelectCatPromocao";
 import { FaHeart } from "react-icons/fa";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "@/store";
-import { setFavorito } from "@/store/reducers/favorito";
+import { createFavoriteFetch, deleteFavoriteFetch } from "@/store/reducers/favorito";
 import { useSelector } from "react-redux";
 import { RootState } from "@/types/store";
 interface IProps {
@@ -24,14 +24,23 @@ const CardProduto = ({ card }: IProps) => {
   const checkPromocao = useSelectCatPromocao();
   const dispatch = useDispatch<AppDispatch>();
   const favorite = useSelector((state: RootState) => state.favorito);
+  const { isLogado } = useSelector((state: RootState) => state.usuario);
 
-  const handleFavorite = (id: number): boolean => {
+  const handleFavoriteColor = (id: number): boolean => {
     return favorite.some((item) => item.idProduct === id);
   };
   const openModalProduto = () => {
     setModalOpen(!modalOpen);
   };
 
+  const handleCheckFavoite = (idProduct: number) => {
+    if (favorite.some((item) => item.idProduct === idProduct)) {
+      dispatch(deleteFavoriteFetch(idProduct));
+      return;
+    }
+    dispatch(createFavoriteFetch({ idProduct: card.id }))
+  }
+
   return (
     <ArticleStyle>
       <Container>
@@ -63,21 +72,23 @@ const CardProduto = ({ card }: IProps) => {
           >
             Ver Mais
           </Botao>
-          <Botao
-            classNameBtn="btnUnset"
-            aria-label="Botão de favorito"
-            onClick={() => dispatch(setFavorito({ idProduct: card.id }))}
-            type="button"
-          >
-            <FaHeart
-              size={25}
-              color={
-                handleFavorite(card.id)
-                  ? thema.colorsPrimary.laranja
-                  : thema.colorsPrimary.cinza
-              }
-            />
-          </Botao>
+          {isLogado && (
+            <Botao
+              classNameBtn="btnUnset"
+              aria-label="Botão de favorito"
+              onClick={() => handleCheckFavoite(card.id)} // adiciona o id do usuario e id do produto ao estado global
+              type="button"
+            >
+              <FaHeart
+                size={25}
+                color={
+                  handleFavoriteColor(card.id)
+                    ? thema.colorsPrimary.laranja
+                    : thema.colorsPrimary.cinza
+                }
+              />
+            </Botao>
+          )}
         </div>
       </Container>
       <CheckModal

src/components/CardProduto/index.tsx

@@ -3,19 +3,20 @@ import { useSelector } from "react-redux";
 import { ItemLink } from "../styles";
 import { Link } from "react-router-dom";
 import { RootState } from "@/types/store";
-import { logout } from "@/store/reducers/usuario";
+import { logoutUser } from "@/store/reducers/usuario";
+import { AppDispatch } from "@/store";
 
 const LoginButton = () => {
   const user = useSelector((state: RootState) => state.usuario);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   return (
     <ItemLink>
       <Link
         to={user.isLogado ? "/" : "/login"}
         title={`${user.isLogado ? "Sair" : "Entrar"} na Meteora`}
         onClick={() => {
-          if (user.isLogado) dispatch(logout());
+          if (user.isLogado) dispatch(logoutUser());
         }}
       >
         {user.isLogado ? "Sair" : "Entrar"}

src/components/Navbar/components/LoginButton.tsx

@@ -6,15 +6,23 @@ import ItemList from "@/components/List/ItemList";
 import NewsLetter from "@/components/NewsLetter";
 import Section from "@/components/Section";
 import Typography from "@/components/Typography";
+import { AppDispatch } from "@/store";
+import { fetchGetFavoritosSaga } from "@/store/reducers/favorito";
 import { selectProductForFavorite } from "@/store/selectors/itemSelectors";
 import { thema } from "@/styles/thema";
 import { RootState } from "@/types/store";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
 
 const Favorite = () => {
   const produtos = useSelector((state: RootState) => {
     return selectProductForFavorite(state);
   });
+  const dispatch = useDispatch<AppDispatch>();
+  useEffect(() => {
+    dispatch(fetchGetFavoritosSaga());
+  }, [dispatch]);
 
   return (
     <>

src/pages/favorite/index.tsx

@@ -7,11 +7,11 @@ import { MessageError } from "@/components/MessageError";
 import { useEffect } from "react";
 import { ILogin } from "@/types/usuarios";
 import { useDispatch } from "react-redux";
-import { loginUser } from "@/store/reducers/usuario";
 import { useSelector } from "react-redux";
 import { RootState } from "@/types/store";
 import { useLocation, useNavigate } from "react-router-dom";
 import { AppDispatch } from "@/store";
+import { loginUser } from "@/store/reducers/usuario";
 
 const FormLogin = () => {
   const dispatch = useDispatch<AppDispatch>();

src/pages/login/FormLogin/index.tsx

@@ -10,13 +10,13 @@ import Facilidades from "@/components/Facilidades";
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "@/store";
-import { fetchGetPedidos } from "@/store/reducers/pedidos";
+import { fetchGetPedidosSaga } from "@/store/reducers/pedidos";
 const Pedidos = () => {
   const pedidos = useSelector((state: RootState) => state.pedidos);
   const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
-    dispatch(fetchGetPedidos());
+    dispatch(fetchGetPedidosSaga());
   }, [dispatch]);
 
   return (