Advertisement
fabiobiondi

React Pro - Real World App - Ch9. 20. ShopPage - refactoring - usare actions e reducer

Mar 21st, 2023
1,267
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // src/pages/shop/ShopPage.tsx
  2.  
  3. import { useEffect } from 'react';
  4. import { useCart, useCartPanel } from '@/services/cart';
  5. import { useProductsService } from '@/services/products';
  6. import { ServerError, Spinner } from '@/shared/';
  7. import { ProductCard } from './components/ProductCard';
  8.  
  9.  
  10. export function ShopPage() {
  11.   const openCartPanel = useCartPanel(state => state.openOverlay);
  12.   const addToCart = useCart(state => state.addToCart)
  13.  
  14.   const { actions, state } = useProductsService()
  15.  
  16.   useEffect(() => {
  17.     actions.getProducts();
  18.   }, [])
  19.  
  20.   return (
  21.     <div>
  22.       <h1 className="title">SHOP</h1>
  23.  
  24.       {state.pending && <Spinner />}
  25.       {state.error && <ServerError />}
  26.  
  27.       <div className="grid grid-cols-1 sm:grid-cols-2 gap-16">
  28.       {
  29.         state.products.map(p => {
  30.           return (
  31.             <ProductCard
  32.               key={p.id}
  33.               product={p}
  34.               onAddToCart={() => {
  35.                 openCartPanel();
  36.                 addToCart(p);
  37.               }}
  38.             />
  39.           )
  40.         })
  41.       }
  42.       </div>
  43.  
  44.     </div>
  45.   )
  46. }
  47.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement