Contador de productos en el carrito

Podemos usar la desestructuración: permite desempacar valores de arreglos o propiedades de objetos.
En este caso desempacamos los valores que trae ShoppingCartContex para una mejor lectura

const { count, setCount } = useContext(ShoppingCartContex)
 <button
   onClick={() => setCount(count + 1)}
 >
   +
 </button>

Como les dije antes, estamos haciendo click en un botón… usemos la correspondiente etiqueta button, no un div. Hagamos buenas prácticas:

<button
          onClick={() => context.setCount(context.Count + 1)}
          className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1"
        >
          +
        </button>

En mi navbar estoy haciendo .map a las urls entonces debo verificar si mi url tiene ‘/cart’ para mostrar el contador de los productos:

import { useContext } from "react";
import { NavLink } from "react-router-dom";
import { ShoppingCartContext } from "../../Context";
import { menu1, menu2 } from "../../routes";

export const Navbar = () => {
  const context = useContext(ShoppingCartContext)

  const textDecoration = 'underline underline-offset-4'

  return (
    <nav className="flex items-center justify-between w-full py-5 px-8 text-sm fixed z-10 top-0">
      <ul className='flex gap-3 items-center'>
        {menu1.map(link => (
          <li
            key={link.text}
            className={link.className}
          >
            <NavLink
              to={link.to}
              className={({isActive})=> isActive ? textDecoration : undefined }
            >
              {link.text}
            </NavLink>
          </li>
        ))}
      </ul>
      <ul className='flex gap-3 items-center'>
        {menu2.map(link => (
          <li
            key={link.text}
            className={link.className}
          >
            <NavLink
              to={link.to}
              className={({isActive})=> isActive ? textDecoration : undefined }
            >
              {link.to === '/cart' ? `${link.text} ${context.Count}` : link.text}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  )
}

Les comparto la forma en la que me parece interesante usar el useContext. Sería utilizarlo en el mismo archivo del Context así:

 
Para luego no tener que importar el useContext en cada lugar en el que queramos hacer uso del context. Simplemente llamamos nuestro hook que lo llama internamente. Ejemplo:

mejorar performance del +:
algo que podemos hacer para mejorar la experiencia de usuario es poner una acción en el botón del + para que el usuario sepa que está encima de él, en mi caso le agregué esta linea de código para cambiar el color de fondo cuando el mouse entra en el botón y por supuesto cambiar el Div por un Button, html semantico

hover:bg-blue-500

Otra forma de hacerlo es usando un hook personalizado:

import { useContext } from "react";

import { EcommerceContext } from "../context/EcommerceProvider";

const useEcommerce = () => {
	return useContext(EcommerceContext);
};

export { useEcommerce };

Y así no tienen que crear el useContext en cada componente sino que solamente deben llamar al hook y éste ya contiene todas las variables del provider:

import { useEcommerce } from "../hooks/useEcommerce";

const Card = (data) => {
	const { incrementShoppingCart } = useEcommerce();
	return (
		<div className="bg-gray-200 cursor-pointer w-56 h-60 rounded-lg ">
			<figure className="relative mb-2 w-full h-4/5">
				<span className="absolute bottom-0 left-0 m-2 px-2 bg-white/70 rounded-full text-black text-xs">
					{data?.data?.category}
				</span>
				<img
					className="w-full h-full object-cover rounded-lg"
					src={data?.data?.image}
					alt={data?.data?.title}
				/>
				<button
					className="absolute top-0 right-0 m-2 flex justify-center items-center bg-white w-6 h-6 rounded-full hover:bg-black color-black hover:text-white transition-colors duration-200"
					onClick={incrementShoppingCart}
				>
					+
				</button>
			</figure>
			<p className="flex justify-between px-3">
				<span className="text-sm font-light truncate">{data?.data?.title}</span>
				<span className="text-lg font-bold">${data?.data?.price}</span>
			</p>
		</div>
	);
};

export { Card };

Lo que podemos hacer también es directamente crear la función de aumentar el contador dentro del Context. Además podemos crear una variable “data” con todo lo que vamos a pasarle al value para que quede más limpio el código.

import { createContext, useState } from 'react';
import PropTypes from 'prop-types';

export const Context = createContext();

export const ContextProvider = ({ children }) => {
	ContextProvider.propTypes = {
		children: PropTypes.node.isRequired,
	};

	const [count, setCount] = useState(0);

	const onAdd = () => {
		setCount(count + 1);
	};

	const data = { onAdd, count };

	return <Context.Provider value={data}>{children}</Context.Provider>;
};

Hola comunidad les comparto mis apuntes de la clase, espero les sean de utilidad.
Link aquí:

https://www.notion.so/bg99astro/Contexto-global-8668a3e7a2ce4e398221689616a633e2

<figcaption className='absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5'>{data?.data?.category?.name || ''}</figcaption> <FaPlus className='absolute top-0 right-0 flex justify-center items-center bg-white text-black w-6 h-6 rounded-full m-2 p-1' onClick={incrementCount} />

{data?.data?.title} ${data?.data?.title}

{menu1.map(link => (
• <NavLink to={link.to} className={({ isActive }) => isActive ? 'underline underline-offset-4' : undefined}> {link.text} </NavLink>
))}

{menu2.map(link => (
• <NavLink to={link.to} className={({ isActive }) => isActive ? 'underline underline-offset-4' : undefined}> {link.text} </NavLink>
))}

una forma de incrementar en contador sin pasar el estado solo es actualizador del estado es de la siguiente manera:

<button
  className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-1 p-2"
  value={0}
  onClick={() => {
    setcount((value) => value + 1);
  }}
>
  +
</button>

Card.jsx

const { count } = 
 useContext(ShoppingCartContext)

<li>Carrito{count}</li>

Context.jsx

const [count, setCount] = useState(0)

 const contextValue = {
  count,
  setCount
 }

 return (
  <ShoppingCartContext.Provider 
  value={contextValue}>
   {children}
  </ShoppingCartContext.Provider>
)

en el curso de react router vi que juanDC creava una funcion para recien usarla como constext.AnyThing

Esta es la funcion para llamar ha auth.unaFn || estado

function useAuth() {
  const auth = React.useContext(AuthContext);
  return auth;
}

luego de la importacion ha un componente se llamaba asi:

const auth = useAuth();

para luego usarla asi:

auth.myFuncionExample() 

• luego de explicar mi logica pregunto de donde sale la variable context?? que alguien me explique porfa…

Asi vamos!!!

Yo decidí limpiar un poco el archivo de Navbar llevandome toda la info donde se listan en objetos cada uno de los items del Navbar, este sería el resultado:

import { NavLink } from "react-router-dom";
import { useContext } from "react";
import { ShoppingCartContext } from "../../Context";
import { navData } from "../../Assets/nav-data";

const Navbar = () => {
    const context = useContext(ShoppingCartContext);
    const navItems = navData(context);
    const activeStyle = "underline underline-offset-4";

    return (
        <nav className="flex justify-between items-center fixed top-0 z-10 w-full py-5 px-8 text-sm font-light">
            <ul className="flex items-center gap-3">
                {navItems.mainNav.map((link) => (
                    <li className={link.className} key={link.text}>
                        <NavLink 
                            to={link.to}
                            className={({isActive}) => isActive ? activeStyle : undefined}
                        >
                            {link.text}
                        </NavLink>
                    </li>
                ))}          
            </ul>
            <ul className="flex items-center gap-3">
                {navItems.asideMenu.map((link) => (
                    <li className={link.className} key={link.text}>
                        <NavLink 
                            to={link.to}
                            className={({isActive}) => isActive ? activeStyle : undefined}
                        >
                            {link.text}
                        </NavLink>
                    </li>
                ))}
            </ul>
        </nav>
    );
}

export default Navbar;

Y el archivo donde guardo toda la info de los items del Navbar es este:

function navData(prop) {

    const mainNav = [
        {
            to: '/',
            text: 'Shopi',
            className: 'font-semibold text-lg'
        },
        {
            to: '/',
            text: 'All',
            className: ''
        },
        {
            to: '/clothes',
            text: 'clothes',
            className: '' 
        },
        {
            to: '/electronics',
            text: 'electronics',
            className: ''
        },
        {
            to: '/furnitures',
            text: 'furnitures',
            className: ''
        },
        {
            to: '/toys',
            text: 'toys',
            className: ''
        },
        {
            to: '/others',
            text: 'others',
            className: ''
        },
    ];
    
    const asideMenu = [
        {
            to: '/email',
            text: '[email protected]',
            className: 'text-black/60'
        },
        {
            to: '/my-orders',
            text: 'My Orders',
            className: ''
        },
        {
            to: '/my-account',
            text: 'My Account',
            className: ''
        },
        {
            to: '/signin',
            text: 'Sign In',
            className: ''
        },
        {
            to: '/shoppcar',
            text: `🛒 ${prop.counter}`,
            className: ''
        },
    ];

  return {
    mainNav,
    asideMenu
  }
}

export {navData};

La carpeta donde hice esto la llamé Assets/nav-data.jsx, no se porque elegí esos nombres pero fue lo primero que se me ocurrio para nombrar estos archivos…

Me gustaría leer sus comentarios para que me ayuden a darle una mejor estructura de carpetas y de nombres para la solución que hice.

✨ ![](

Estoy haciendo de nuevo este proyecto con TypeScript y me ha costado un montón pero aca les dejo mi código y mi repositorio

archivo context .tsx

import React, { createContext, ReactNode, useState, Dispatch, SetStateAction } from "react";

type Props = {
    children: ReactNode,
};

type ShoppingCartContextType = {
    count: number,
    setCount: Dispatch<SetStateAction<number>>,
};

export const ShoppingCartContext = createContext<ShoppingCartContextType | null>(null);

export const ShoppingCartProvider: React.FC<Props> = ({ children }: Props) => {
    const [count, setCount] = useState<number>(0);
    console.log('Count:', count)

    return (
        <ShoppingCartContext.Provider value={{ count, setCount }}>
            {children}
        </ShoppingCartContext.Provider>
    );
};

export default ShoppingCartProvider;

archivo card

import { useContext } from 'react'
import { Product } from '../../Models/Products'
import { ShoppingCartContext } from '../../Context'

function Card(data: Product) {
    const context = useContext(ShoppingCartContext)!;

    const incrementCount = () => {
        context.setCount(prevCount => prevCount + 1);
    };

    return (
	//Codigo de card
	<button onClick={incrementCount}> </button>
)

va quedando

Envés de un contador se le pueden pasar los datos del producto que fue agregado al carrito y hacer el contador con .length (una propiedad que retorna el número de elementos de un Array) de esta manera ya incluso se podrían mostrar los productos en el carrito

// Contexto
import { createContext, useState } from "react";
export const CartContext = createContext()
export const CartProvider = ({ children }) => {
    const [cart, setCart] = useState([])
    const addToCart = (product) => {
        setCart(prevState => ([
            ...prevState,
            {
                ...product
            }
        ]
        ))
    }
   
    return (
        <CartContext.Provider value={{
            cart,
            addToCart
        }} >
            {children}
        </CartContext.Provider >)
}

// Añadir producto al carrito. componente Card 

import { CartContext } from "../../Context/Cart"
import { useContext } from "react";

export function Card({ price, title, category, image, id }) {
    const { addToCart, cart } = useContext(CartContext);
    const checkProductInCart = (product) => {
        return cart.some(item => item.id === product.id)
    }
    const isProductInCart = checkProductInCart({ id })
    return (
        <article className='cursor-pointer w-56 h-60 rounded-lg p-4'>
            <figure className='relative mb-2 w-full h-4/5'>
                <figcaption className='absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5'>
                    {category}
                </figcaption>
                <img className='w-full h-full object-cover rounded-lg' src={image} alt={title} />
                <button className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1 text-black'
                    onClick={() => addToCart({ price, title, category, image, id })}  >
                    {isProductInCart ? 'x' : '+'}
                </button>
            </figure><p className='flex justify-between'>
                <span className='text-sm font-light'>{title}</span>
                <span className='text-lg font-medium'>{price}</span></p>
        </article>
    )
}

Mostrar Cantidad de productos en el NavBar

import { NavLink } from 'react-router-dom'
import { categories } from '../../Services/products'
import { useContext } from 'react';
import { CartContext } from '../../Context/Cart';
export const Navbar = () => {
    const { cart } = useContext(CartContext);

    return (
        <nav className='flex justify-between items-center bg-white dark:bg-zinc-900 fixed z-10 w-full py-5 px-8 text-sm font-light top-0'>
            <ul className='flex items-center gap-3'>
                <li>
                    🛒 {cart.length}
                </li>
            </ul>
        </nav>
    )
}

Por buenas prácticas en react se recomienda usar una arro function que actualiza el estado dentro del setState en lugar de actualizar el estado con operaciones simples directas porque si es que hay más de un setState en el mismo archivo el valor real del estado se perderá y solo reflejara el resultado del primer setState. En otras palabras se debe usar el setState de esta manera…

<div className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1' onClick={()=>(context.setCount(***(count)=>count+1***))}>+</div>

Y no de esta manera…

<div className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1' onClick={()=>(context.setCount(context.count + 1))}>+</div> 

Fuente:

Alguien me podría indicar por que a la hora de agregar un item me sale el mismo mensaje dos veces

Yo quise que se le diera un feedback al usuario al agregar productos al carrito, para ello agrege un operador ternario que al momento de validar que el count es mayor que 0 agregara unas clases al elemento para que se visualize mejor.

<li>
	<span>💰</span>
        <span 
		className={count == 0 ? '' : 'bg-blue-500 rounded-full text-white px-2 py-0.5 font-semibold'}
	>
		{count}
	</span>
</li>

Asi vamos…

Para los que lo hicimos con un array se me ocurrio esta manera de agregar el contador 😄

Mis apuntes:

tomamos el context de react, ese context lo pasamos a una variable que se termina leyendo en un componente.

import { createContext, useState } from ‘react’

export const ShoppingCartContext = createContext()

export const ShoppingCartProvider = ({children}) => {

const [count, setCount] = useState(0) // establecemos un contador inicial, y una variable que acepte los cambios en el contador


return (
    <ShoppingCartContext.Provider value={{
        count,
        setCount
    }}>
        {children}
    </ShoppingCartContext.Provider>
)

}

Para hacer uso del contexto, pasamos el contexto declarado a una variable en otro componente y llamamos al componente con una función:

  <li>
                🛒 {context.count}
            </li>

o

import {ShoppingCartContext } from ‘…/…/Context’

const Card = (data) => {

const context = useContext(ShoppingCartContext) // lee el estado global del proveedor

//…//
<div
onClick={() => context.setCount(context.count + 1)}
>
+
</div>

}

Hola, estoy super contenta con este curso, porque he comprendido mas a profundidas los conceptos adquiridos con el profe Juan DC (

)

para los que estan usando exports nombrados, deben exportar 2 cosas

export { ShoppingCartProvider, ShoppingCartContext }

por aca les dejo el Store con Zustand por si no quieren usar Context, automaticamente guarda en localStorage la suma, se puede modificar para que no guarde numeros si no que el objeto añadido solo modifiquen la suma y el type o in

terface

Creo que lo que más me ha gustado de este curso es lo sencillo que lo hace la profe teff. Si necesitas conocimientos previos tal como lo dijeron al inicio del curso

Así va mi proyecto!!!

Card component

import { useContext } from 'react'
import { ShoppingCartContext } from '../../context'

const Card = ({ product }) => {
  const { count, setCount } = useContext(ShoppingCartContext)
  const { category, images, title, price } = product

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div className="bg-white cursor-pointer w-56 h-60 rounded-lg">
      <figure className="relative mb-2 w-full h-4/5">
        <span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">
          {category.name}
        </span>
        <img className="w-full h-full object-cover rounded-lg" src={images[0]} alt={title} />
        <div
          className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2  p-1"
          onClick={handleClick}
        >
          +
        </div>
      </figure>
      <p className="flex justify-between">
        <span className="text-sm font-light">{title}</span>
        <span className="text-lg font-medium">${price}</span>
      </p>
    </div>
  )
}

export default Card