Merge pull request #72 from leonardoOluz/favorite

façanha: adicionar o fluxo de trabalho do GitHub Actions para compila…

Author: leonardoOluz

.github/workflows/build-on-push.yml

@@ -0,0 +1,21 @@
+name: Build on Push
+
+on:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm install
+      - name: Build project
+        run: npm run build

src/components/RequireAuth/index.tsx

@@ -1,8 +1,8 @@
-import useCheckLogin from "@/hooks/useCheckLogin";
+import useCheckRotas from "@/hooks/useCheckRotas";
 import { Outlet } from "react-router-dom";
 
 const RequireAuth = () => {
-  useCheckLogin();
+  useCheckRotas();
   return <Outlet />;
 };
 

src/hooks/useCheckAddress.ts

@@ -1,8 +1,8 @@
 import { RootState } from "@/types/store";
+import { showWrongToast } from "@/utils/showWrongToast";
 import { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
 
 const useCheckAddress = () => {
   const { addressChecked } = useSelector((state: RootState) => state.address);
@@ -12,11 +12,7 @@ const useCheckAddress = () => {
   useEffect(() => {
     if (!addressChecked && !toastShown.current) {
       toastShown.current = true;
-      toast.error("Você precisa informar o endereço para continuar", {
-        hideProgressBar: true,
-        autoClose: 2500,
-        theme: "colored",
-      });
+      showWrongToast("Você precisa informar o endereço para continuar");
       navigate("/checkout/address");
     }
   }, [addressChecked, navigate]);

src/hooks/useCheckLogin.ts

@@ -1,36 +1,21 @@
 import { AppDispatch } from "@/store";
-import { isCheckLogin } from "@/store/reducers/usuario";
-import { CheckoutSteps, RootState } from "@/types/store";
+import { checkAuthenticatedUser } from "@/store/reducers/usuario";
+import { RootState } from "@/types/store";
 import { useEffect } from "react";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const useCheckLogin = () => {
   const isLogado = useSelector((state: RootState) => state.usuario).isLogado;
   const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
-  const location = useLocation();
 
   useEffect(() => {
     if (!isLogado) {
-      dispatch(isCheckLogin());
+      dispatch(checkAuthenticatedUser());
     }
-  }, [dispatch, isLogado]);
-
-  useEffect(() => {
-    const privatePrefixes = [
-      `/${CheckoutSteps.CHECKOUT}`,
-      `/${CheckoutSteps.PEDIDOS}`,      
-      `/${CheckoutSteps.FAVORITOS}`,      
-    ];
-    if (
-      !isLogado &&
-      privatePrefixes.some((prefix) => location.pathname.startsWith(prefix))
-    ) {
-      navigate("/login");
-    }
-  }, [isLogado, navigate, location.pathname]);
+  }, [dispatch, isLogado, navigate]);
 };
 
 export default useCheckLogin;

src/hooks/useCheckRotas.ts

@@ -0,0 +1,35 @@
+import { AppDispatch } from "@/store";
+import { checkAuthenticatedUser } from "@/store/reducers/usuario";
+import { CheckoutSteps, RootState } from "@/types/store";
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const useCheckRotas = () => {
+  const isLogado = useSelector((state: RootState) => state.usuario).isLogado;
+  const dispatch = useDispatch<AppDispatch>();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!isLogado) {
+      navigate("/login");
+    }
+  }, [dispatch, isLogado , navigate]);
+  
+  useEffect(() => {
+    const privatePrefixes = [
+      `/${CheckoutSteps.CHECKOUT}`,
+      `/${CheckoutSteps.PEDIDOS}`,      
+      `/${CheckoutSteps.FAVORITOS}`,      
+    ];
+    if (
+      privatePrefixes.some((prefix) => location.pathname.startsWith(prefix))
+    ) {
+      dispatch(checkAuthenticatedUser());
+    }
+  }, [isLogado, navigate, location.pathname , dispatch]);
+};
+
+export default useCheckRotas;

src/hooks/usePaymentConfirmed.ts

@@ -1,25 +1,22 @@
 import { RootState } from "@/types/store";
-import { useEffect } from "react";
+import { showWrongToast } from "@/utils/showWrongToast";
+import { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
 
 const usePaymentConfirmed = () => {
   const { checkedPay } = useSelector((state: RootState) => state.pay);
   const navigate = useNavigate();
+  const toastShown = useRef(false);
 
   // Redireciona e mostra toast conforme status do pagamento
   useEffect(() => {
     if (checkedPay) {
       navigate("/checkout/address/pay/summary");
     } else {
-      if (!toast.isActive("pay-toast")) {
-        toast.error("Verifique seu pagamento! ", {
-          toastId: "pay-toast",
-          hideProgressBar: true,
-          autoClose: 2500,
-          theme: "colored",
-        });
+      if (!toastShown.current) {
+        toastShown.current = true;
+        showWrongToast("Você precisa confirmar o pagamento para continuar");
       }
       navigate("/checkout/address/pay");
     }

src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+// import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "normalize.css";
 import "./index.css";
@@ -11,12 +11,12 @@ import { RouterProvider } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
+  // <StrictMode>
     <Provider store={store}>
       <ThemeProvider theme={thema}>
         <RouterProvider router={router} />
         <ToastContainer position="top-center"/>
       </ThemeProvider>
     </Provider>
-  </StrictMode>
+  // </StrictMode>
 );

src/pages/cadastro/FormRegister/index.tsx

@@ -2,11 +2,11 @@ import Botao from "@/components/Botao";
 import FieldInput from "@/components/FieldInput";
 import Form from "@/components/Form";
 import { MessageError } from "@/components/MessageError";
-import { createUser } from "@/store/reducers/usuario";
+import { AppDispatch } from "@/store";
+import { addNewUser } from "@/store/reducers/usuario";
 import { ContainerForm, FieldsetForm, LegendForm } from "@/styles/forms";
 import { RootState } from "@/types/store";
 import { Usuario } from "@/types/usuarios";
-import { getStorage } from "@/utils/starage";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
@@ -31,22 +31,19 @@ const FormRegister = () => {
   const user = useSelector((state: RootState) => state.usuario);
   const cart = useSelector((state: RootState) => state.carrinho);
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const password = watch("password");
 
   const checkPassword = {
     minLength: (val: string | undefined) =>
-      (val?.length ?? 0) >= 6 || "O campo senha deve ter pelo menos 6 caracteres",
-    checkEmpty: (val: string | undefined) => !!val || "O campo senha deve ser preenchido",
+      (val?.length ?? 0) >= 6 ||
+      "O campo senha deve ter pelo menos 6 caracteres",
+    checkEmpty: (val: string | undefined) =>
+      !!val || "O campo senha deve ser preenchido",
     validatePassword: (val: string | undefined) =>
       val === password || "As senhas devem ser iguais",
   };
   const checkEmail = {
-    emailUsed: (val: string) => {
-      const usuarios: Usuario[] = JSON.parse(getStorage("user") || "[]");
-      const user = usuarios.find((use) => use.email === val);
-      return !user || "Email ja cadastrado";
-    },
     emailEmpty: (val: string) => !!val || "Verifique seu email",
     isEmailValid: (val: string) => {
       return (
@@ -69,7 +66,13 @@ const FormRegister = () => {
   }, [isSubmitSuccessful, reset, user, cart, navigate]);
 
   const submit = (data: Usuario) => {
-    dispatch(createUser(data));
+    dispatch(
+      addNewUser({
+        email: data.email,
+        nome: data.nome,
+        password: data.password,
+      })
+    );
   };
 
   return (

src/pages/checkout/PayForm/components/PayForTicket.tsx

@@ -13,9 +13,7 @@ import { useNavigate } from "react-router-dom";
 const BoletoSimulado = () => {
   const { totValue } = useSelector((state: RootState) => state.carrinho);
   const { price } = useSelector((state: RootState) => state.frete);
-  const {
-    usuario: { nome },
-  } = useSelector((state: RootState) => state.usuario);
+  const { nome } = useSelector((state: RootState) => state.usuario);
   const [status, setStatus] = useState("Aberto");
   const [dataPagamento, setDataPagamento] = useState<string>("");
   const dispatch = useDispatch<AppDispatch>();

src/pages/login/FormLogin/index.tsx

@@ -7,13 +7,14 @@ import { MessageError } from "@/components/MessageError";
 import { useEffect } from "react";
 import { ILogin } from "@/types/usuarios";
 import { useDispatch } from "react-redux";
-import { authenticateUser } from "@/store/reducers/usuario";
+import { loginUser } from "@/store/reducers/usuario";
 import { useSelector } from "react-redux";
 import { RootState } from "@/types/store";
 import { useNavigate } from "react-router-dom";
+import { AppDispatch } from "@/store";
 
 const FormLogin = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
   const user = useSelector((state: RootState) => state.usuario);
   const cart = useSelector((state: RootState) => state.carrinho);
@@ -42,7 +43,7 @@ const FormLogin = () => {
     }
   }, [isSubmitSuccessful, reset, user, cart, navigate]);
   const submit = (data: ILogin) => {
-    dispatch(authenticateUser(data));
+    dispatch(loginUser(data));
   };
 
   return (