feat: ✨ Refatora lógica de autenticação e gerenciamento de pedidos - Atualiza o hook useCheckRotas para redirecionar usuários não autenticados. - Altera a função de adição de pedidos para usar createOrder. - Implementa a função getOrder para buscar pedidos do localStorage. - Adiciona idUser ao tipo IPedido para associar pedidos ao usuário.

Author: leonardoOluz

src/hooks/useCheckRotas.ts

@@ -12,24 +12,21 @@ const useCheckRotas = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  useEffect(() => {
-    if (!isLogado) {
-      navigate("/login");
-    }
-  }, [dispatch, isLogado , navigate]);
-  
   useEffect(() => {
     const privatePrefixes = [
       `/${CheckoutSteps.CHECKOUT}`,
-      `/${CheckoutSteps.PEDIDOS}`,      
-      `/${CheckoutSteps.FAVORITOS}`,      
+      `/${CheckoutSteps.PEDIDOS}`,
+      `/${CheckoutSteps.FAVORITOS}`,
     ];
     if (
       privatePrefixes.some((prefix) => location.pathname.startsWith(prefix))
     ) {
       dispatch(checkAuthenticatedUser());
+      if (!isLogado) {
+        navigate("/login");
+      }
     }
-  }, [isLogado, navigate, location.pathname , dispatch]);
+  }, [isLogado, navigate, location.pathname, dispatch]);
 };
 
-export default useCheckRotas;
+export default useCheckRotas;

src/pages/checkout/Summary/index.tsx

@@ -10,7 +10,7 @@ import usePaymentConfirmed from "@/hooks/usePaymentConfirmed";
 import Botao from "@/components/Botao";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "@/store";
-import { addPedido } from "@/store/reducers/pedidos";
+import { addPedidoFetch } from "@/store/reducers/pedidos";
 import { useNavigate } from "react-router-dom";
 import useCleanStatus from "@/hooks/useCleanStatus";
 const Summary = () => {
@@ -27,7 +27,7 @@ const Summary = () => {
   const clearStatus = useCleanStatus();
   const handlefinalizePurchase = () => {
     dispatch(
-      addPedido({
+      addPedidoFetch({
         status: "concluido",
         date: cart.data,
         totValue: cart.totValue + frete.price,

src/pages/login/FormLogin/index.tsx

@@ -10,12 +10,13 @@ import { useDispatch } from "react-redux";
 import { loginUser } from "@/store/reducers/usuario";
 import { useSelector } from "react-redux";
 import { RootState } from "@/types/store";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { AppDispatch } from "@/store";
 
 const FormLogin = () => {
   const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
+  const location = useLocation();
   const user = useSelector((state: RootState) => state.usuario);
   const cart = useSelector((state: RootState) => state.carrinho);
   const {
@@ -32,16 +33,11 @@ const FormLogin = () => {
   });
 
   useEffect(() => {
-    if (isSubmitSuccessful && user.isLogado) {
-      if (cart.data.length) {
-        navigate("/carrinho");
-        reset();
-        return;
-      }
-      navigate("/");
+    if (isSubmitSuccessful || user.isLogado) {
       reset();
+      navigate(-1);
     }
-  }, [isSubmitSuccessful, reset, user, cart, navigate]);
+  }, [isSubmitSuccessful, reset, user, cart, navigate, location]);
   const submit = (data: ILogin) => {
     dispatch(loginUser(data));
   };

src/pages/login/index.tsx

@@ -2,24 +2,13 @@ import Section from "@/components/Section";
 import Typography from "@/components/Typography";
 import { thema } from "@/styles/thema";
 import FormLogin from "./FormLogin";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import useWriteSlowly from "@/hooks/useWriteSlowly";
 import { DivFadeInForm } from "@/styles/forms";
-import { useSelector } from "react-redux";
-import { RootState } from "@/types/store";
-import { useEffect } from "react";
 const title = "Entre com sua conta!";
 const Login = () => {
   const writeTitle = useWriteSlowly(title);
-  const { isLogado } = useSelector((state: RootState) => state.usuario);
-  const navigate = useNavigate();
 
-  useEffect(() => {
-    if (isLogado) {
-      navigate("/");
-    }
-  }, [isLogado, navigate]);
-  
   return (
     <Section classNameSection="secao login">
       <Typography

src/pages/pedidos/PedidosCard.tsx

@@ -43,21 +43,22 @@ const PedidosCard = ({ product, pedido }: PedidosCardProps) => {
         </Typography>
         <CardPedidoDetails>
           {pedido.date.map((date) =>
-            date.details.map((detail) => (
+            date.details.map((detail) =>
               product.id === date.id ? (
                 <Typography
-                classNameTypograph="basicParagraphSmall"
-                elementoHtml="p"
-                isColor={thema.colorsPrimary.cinzaChumbo}
-              >
-                <strong>Cor: </strong>
-                {detail.cor} - <strong>Tamanho: </strong>
-                {detail.tamanho}.
-              </Typography>
+                  key={detail.id}
+                  classNameTypograph="basicParagraphSmall"
+                  elementoHtml="p"
+                  isColor={thema.colorsPrimary.cinzaChumbo}
+                >
+                  <strong>Cor: </strong>
+                  {detail.cor} - <strong>Tamanho: </strong>
+                  {detail.tamanho}.
+                </Typography>
               ) : null
-            )))}
+            )
+          )}
         </CardPedidoDetails>
-      
       </CardPedidoContent>
     </CardPedido>
   );

src/pages/pedidos/index.tsx

@@ -7,8 +7,18 @@ import { RootState } from "@/types/store";
 import CartIsEmpty from "@/components/CartIsEmpty";
 import NewsLetter from "@/components/NewsLetter";
 import Facilidades from "@/components/Facilidades";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { AppDispatch } from "@/store";
+import { fetchGetPedidos } from "@/store/reducers/pedidos";
 const Pedidos = () => {
   const pedidos = useSelector((state: RootState) => state.pedidos);
+  const dispatch = useDispatch<AppDispatch>();
+  
+  useEffect(() => {
+    dispatch(fetchGetPedidos());
+  }, [dispatch]);
+
   return (
     <>
       <Section classNameSection="secao produtos">

src/service/index.ts

@@ -1,7 +1,7 @@
 import apiCep from "@/api";
 import { v4 as uuidv4 } from "uuid";
 import { IData } from "@/types/checkout";
-import { IFrete } from "@/types/store";
+import { IFrete, IPedido } from "@/types/store";
 import {
   DateUsuario,
   ILogin,
@@ -159,12 +159,17 @@ export const authenticateUserFetch = async (
       try {
         const usuarios = getStorage("user") as UsuarioLocalStorage[];
         /* verifica se o email existe */
-        if (!Array.isArray(usuarios) || !usuarios.some((u) => u.email === data.email)) {
+        if (
+          !Array.isArray(usuarios) ||
+          !usuarios.some((u) => u.email === data.email)
+        ) {
           reject(new Error("Email não cadastrado"));
           return;
         }
 
-        const user = usuarios.find((user) => user.email === data.email) as UsuarioLocalStorage;
+        const user = usuarios.find(
+          (user) => user.email === data.email
+        ) as UsuarioLocalStorage;
         const isValid = await verifyPassword(
           data.password,
           user.salt,
@@ -202,13 +207,13 @@ export const authenticateUserFetch = async (
   });
 };
 /* Função para verificar se o usuário está logado */
-export const checkAuthenticated = (): Promise<UsuarioState> => {
+export const checkAuthenticated = async (): Promise<UsuarioState> => {
   return new Promise((resolve, reject) => {
     try {
       const validToken = getAccessToken();
       const dataUser = getSessionStorage("dataUser") as UsuarioState;
 
-      if (!validToken || validToken !== dataUser.accessToken){
+      if (!validToken || validToken !== dataUser.accessToken) {
         console.warn("Token inválido ou expirado");
         resolve({ isLogado: false } as UsuarioState);
         return;
@@ -227,3 +232,64 @@ export const checkAuthenticated = (): Promise<UsuarioState> => {
     }
   });
 };
+
+/* Api simular pedido */
+
+export const getOrder = async (): Promise<IPedido[]> => {
+  return new Promise((resolve, reject) => {
+    try {
+      /* Verifica se o usuário está logado */
+      const user = getSessionStorage("dataUser") as UsuarioState;
+      if (!user) {
+        console.warn("Usuário nao autenticado", user);
+        reject(new Error("Usuário não autenticado"));
+        return;
+      }
+      /* Pegando os pedidos do localStorage */
+      const pedidos = getStorage("pedidos") as IPedido[];
+      if (Array.isArray(pedidos)) {
+        resolve(pedidos.filter((p) => p.idUser === user.id));
+        return;
+      }
+      resolve([]);
+    } catch (error) {
+      console.error("Erro ao buscar pedidos:", error);
+      reject(error);
+    }
+  });
+}
+export const createOrder = async (newPedidos: IPedido): Promise<IPedido[]> => {
+  return new Promise((resolve, reject) => {
+    try {
+      console.log("Criando pedido:", newPedidos);
+      /* Verifica se o usuário está logado */
+      const user = getSessionStorage("dataUser") as UsuarioState;
+      if (!user) {
+        console.warn("Usuário nao autenticado", user);
+        reject(new Error("Usuário não autenticado"));
+        return;
+      }
+      
+      /* Adicionando o id do usuário */
+      const addUserPedido = {
+        ...newPedidos,
+        idUser: user.id,
+        id: uuidv4(),
+      };
+      
+      /* Adicionando o pedido */
+      const pedidos = getStorage("pedidos") as IPedido[];
+      if (Array.isArray(pedidos)) {
+        pedidos.push(addUserPedido);
+        setStorage("pedidos", pedidos);
+        resolve(pedidos.filter((p) => p.idUser === user.id));
+        return;
+      }
+      setStorage("pedidos", [addUserPedido]);
+      resolve([addUserPedido]);
+    } catch (error) {
+      console.error("Erro ao adicionar pedido:", error);
+      reject(error);
+    }
+  });
+};

src/store/reducers/pedidos.ts

@@ -1,10 +1,21 @@
+import { createOrder, getOrder } from "@/service";
 import { IPedido } from "@/types/store";
 import { showSuccessNotification } from "@/utils/showSuccessNotification";
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { v4 as uuidv4 } from "uuid";
 
 const initialState: IPedido[] = [];
 
+export const fetchGetPedidos = createAsyncThunk<IPedido[]>(
+  "pedidos/fetchGetPedidos",
+  getOrder
+)
+
+export const addPedidoFetch = createAsyncThunk<IPedido[], IPedido>(
+  "pedidos/addPedidoFetch",
+  createOrder
+);
+
 const pedidosSlice = createSlice({
   name: "pedidos",
   initialState,
@@ -25,6 +36,14 @@ const pedidosSlice = createSlice({
       ];
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(addPedidoFetch.pending, (state) => state);
+    builder.addCase(addPedidoFetch.rejected, (state) => state);
+    builder.addCase(addPedidoFetch.fulfilled, (_, { payload }) => payload);
+    builder.addCase(fetchGetPedidos.pending, (state) => state);
+    builder.addCase(fetchGetPedidos.rejected, (state) => state);
+    builder.addCase(fetchGetPedidos.fulfilled, (_, { payload }) => payload);
+  },
 });
 
 export const { addPedido } = pedidosSlice.actions;

src/types/store.ts

@@ -84,6 +84,7 @@ export enum CheckoutSteps {
 
 export interface IPedido {
   id?: string;
+  idUser?: string;
   status: "pendente" | "concluido" | "cancelado";
   date: ICart[];
   totValue: number;