feat: ajustar formateo, agregar profile y UserContext

.tokeignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+backend/package-lock.json

src/App.jsx

@@ -1,17 +1,20 @@
-import { Route, Routes } from "react-router-dom";
+import { useContext } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import "./App.css";
+import CartProvider from "./context/CartContext.jsx";
+import { UserContext } from "./context/UserContext.jsx";
 import Footer from "./Footer";
 import Navbar from "./Navbar";
 import Cart from "./pages/Cart";
 import Home from "./pages/Home";
 import Login from "./pages/Login";
-import Register from "./pages/Register";
-import "./App.css";
 import NotFound from "./pages/NotFound";
 import Pizza from "./pages/Pizza";
 import Profile from "./pages/Profile.jsx";
-import CartProvider from "./context/CartContext.jsx";
+import Register from "./pages/Register";
 
 function App() {
+  const { token } = useContext(UserContext);
   return (
     <CartProvider>
       <Navbar />
@@ -20,9 +23,12 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
-          <Route path="/pizza/p001" element={<Pizza />} />
+          <Route path="/pizza/:id" element={<Pizza />} />
           <Route path="/cart" element={<Cart />} />
-          <Route path="/profile" element={<Profile />} />
+          <Route
+            path="/profile"
+            element={token ? <Profile /> : <Navigate to="/login" />}
+          />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </main>

src/Navbar.jsx

@@ -1,12 +1,13 @@
 import { CartContext } from "./context/CartContext";
+import { UserContext } from "./context/UserContext";
 import "./Navbar.css";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 
 const Navbar = () => {
-  const { cart } = useContext(CartContext);
-  const token = false;
-  const total = cart.reduce((acc, it) => acc + it.price * it.count, 0);
+  const { getTotal } = useContext(CartContext);
+  const { logout, token } = useContext(UserContext);
+  const total = getTotal();
 
   return (
     <nav className="bg-green-700 text-white flex items-center justify-between gap-4">
@@ -17,7 +18,7 @@ const Navbar = () => {
         {token ? (
           <>
             <Link to="/profile">Profile</Link>
-            <button>Logout</button>
+            <button onClick={logout}>Logout</button>
           </>
         ) : (
           <>

src/components/CardPizza.jsx

@@ -1,8 +1,8 @@
 import { useContext } from "react";
 import "./CardPizza.css";
+import * as R from "radashi";
 import { Link } from "react-router-dom";
 import { CartContext } from "../context/CartContext";
-import * as R from "radashi";
 
 /**
  *
@@ -10,7 +10,7 @@ import * as R from "radashi";
  * @returns
  */
 const CardPizza = (props) => {
-  const { cart, setCart } = useContext(CartContext);
+  const { addToCart } = useContext(CartContext);
   return (
     <article className="card-pizza">
       <img src={props.img} />
@@ -35,18 +35,7 @@ const CardPizza = (props) => {
           Ver más
         </Link>
         <button
-          onClick={() =>
-            setCart((cart) => {
-              const pizza = cart.find((p) => p.id === props.id);
-              if (pizza) {
-                return cart.map((p) =>
-                  p.id === props.id ? { ...p, count: p.count + 1 } : p,
-                );
-              } else {
-                return [...cart, { ...R.omit(props, ["key"]), count: 1 }];
-              }
-            })
-          }
+          onClick={() => addToCart(props)}
           className="bg-black text-white rounded-md px-4"
         >
           Añadir

src/context/CartContext.jsx

@@ -1,11 +1,27 @@
 import { createContext, useState } from "react";
+import * as R from "radashi";
 
 export const CartContext = createContext();
 
 const CartProvider = ({ children }) => {
   const [cart, setCart] = useState([]);
+  const getTotal = () => {
+    return cart.reduce((acc, it) => acc + it.price * it.count, 0);
+  };
+  const addToCart = (pizzaToAdd) => {
+    setCart((cart) => {
+      const pizza = cart.find((p) => p.id === pizzaToAdd.id);
+      if (pizza) {
+        return cart.map((p) =>
+          p.id === pizzaToAdd.id ? { ...p, count: p.count + 1 } : p,
+        );
+      } else {
+        return [...cart, { ...R.omit(pizzaToAdd, ["key"]), count: 1 }];
+      }
+    });
+  };
   return (
-    <CartContext.Provider value={{ cart, setCart }}>
+    <CartContext.Provider value={{ cart, setCart, addToCart, getTotal }}>
       {children}
     </CartContext.Provider>
   );

src/context/UserContext.jsx

@@ -0,0 +1,17 @@
+import { createContext, useState } from "react";
+
+export const UserContext = createContext();
+
+const UserProvider = ({ children }) => {
+  const [token, setToken] = useState(true);
+  const logout = () => {
+    setToken(false);
+  };
+  return (
+    <UserContext.Provider value={{ token, setToken, logout }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserProvider;

src/main.jsx

@@ -5,11 +5,14 @@ import App from "./App.jsx";
 import "@unocss/reset/tailwind.css";
 import "virtual:uno.css";
 import { BrowserRouter } from "react-router-dom";
+import UserProvider from "./context/UserContext.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <BrowserRouter>
+      <UserProvider>
         <App />
+      </UserProvider>
     </BrowserRouter>
   </StrictMode>,
 );

src/pages/Cart.jsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
-import { pizzaCart } from "../pizzas";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { CartContext } from "../context/CartContext";
+import { pizzaCart } from "../pizzas";
+import { UserContext } from "../context/UserContext";
 
 const Cart = () => {
+  const { token } = useContext(UserContext);
   const { cart, setCart } = useContext(CartContext);
   return (
     <>
@@ -58,7 +59,8 @@ const Cart = () => {
       </div>
       <button
         type="submit"
-        className="bg-black text-white rounded-md p-2 text-lg hover:bg-gray-500"
+        disabled={!token}
+        className="bg-black text-white rounded-md p-2 text-lg hover:bg-gray-500 disabled:bg-gray-200"
       >
         Pagar
       </button>

src/pages/Home.jsx

@@ -1,10 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import española from "../assets/española.jpg";
 import napolitana from "../assets/napolitana.jpg";
 import pepperoni from "../assets/pepperoni.jpg";
 import CardPizza from "../components/CardPizza";
 import Header from "../Header";
-import { useEffect } from "react";
 
 const Home = () => {
   const [pizzas, setPizzas] = useState([]);

src/pages/Pizza.jsx

@@ -1,10 +1,14 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { CartContext } from "../context/CartContext";
 
 const Pizza = () => {
+  const { id } = useParams();
   const [pizza, setPizza] = useState(null);
   const [error, setError] = useState(null);
+  const { addToCart } = useContext(CartContext);
   const fetchPizza = async () => {
-    const url = "http://localhost:5000/api/pizzas/p001";
+    const url = `http://localhost:5000/api/pizzas/${id}`;
     const res = await fetch(url);
     const data = await res.json();
     setPizza(data);
@@ -26,7 +30,10 @@ const Pizza = () => {
           <li key={index}>- {i}</li>
         ))}
       </ul>
-      <button className="text-white bg-black p-2 rounded-md">
+      <button
+        onClick={() => addToCart(pizza)}
+        className="text-white bg-black p-2 rounded-md"
+      >
         Añadir al carrito
       </button>
     </section>

src/pages/Profile.jsx

@@ -1,12 +1,19 @@
+import { useContext } from "react";
+import { UserContext } from "../context/UserContext";
+
 const Profile = () => {
   const email = "test@example.com";
+  const { logout } = useContext(UserContext);
   return (
     <div>
       <p>
         <strong>Mail: </strong>
         {email}
       </p>
-      <button className="bg-green-700 hover:bg-green-300 text-white hover:text-black">
+      <button
+        onClick={logout}
+        className="bg-green-700 hover:bg-green-300 text-white hover:text-black"
+      >
         Cerrar sesión
       </button>
     </div>

src/pizzas.js

@@ -1,8 +1,8 @@
-import imgNapolitana from "./assets/napolitana.jpg";
-import imgEspanola from "./assets/española.jpg";
-import imgSalame from "./assets/pepperoni.jpg";
-import imgCuatroEstaciones from "./assets/cuatro-estaciones.jpg";
 import imgBacon from "./assets/bacon.jpg";
+import imgCuatroEstaciones from "./assets/cuatro-estaciones.jpg";
+import imgEspanola from "./assets/española.jpg";
+import imgNapolitana from "./assets/napolitana.jpg";
+import imgSalame from "./assets/pepperoni.jpg";
 import imgPolloPicante from "./assets/pollo-picante.jpg";
 
 export const pizzas = [