Construyendo el Carrito de Compras: Vista

Seria buena idea deshabilitar los pop-ups de documentación durante los videos, para que no tapen el código en varias ocasiones.

components/Cart.js

import React, { useContext } from 'react'
import { Link } from 'gatsby'
import { Button, StyledCart } from '../styles/components'
import { priceFormat } from '../utils/priceFormat'
import { CartContext } from '../context'

export default function Cart() {
    const { cart } = useContext(CartContext)
    return (
        <StyledCart>
            <h2>Carrito de compras</h2>
            <table>
                <tbody>
                    <tr>
                        <th>Producto</th>
                        <th>Precio</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                    {cart.map(swag => (
                        <tr key={swag.sku}>
                            <td><img src={swag.metadata.image} alt={swag.name} /> {swag.name}</td>
                            <td>USD {priceFormat(swag.price)}</td>
                            <td>{swag.quantity}</td>
                            <td>{priceFormat(swag.quantity * swag.price)}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
            <nav>
                <div>
                    <h3>Subtotal: </h3>
                    <small>Total</small>
                </div>
                <div>
                    <Link to='/'>
                        <Button type='outline'>Volver</Button>
                    </Link>
                    <Button>Comprar</Button>
                </div>
            </nav>
        </StyledCart>
    )
}

Construyendo el Carrito de Compras: Vista

Creamos el componente Cart.js:

import React, { useContext } from 'react'
import { Link } from 'gatsby'
import { Button, StyledCart } from '../styles/components'
import priceFormat from '../utils/priceFormat'
import { CartContext } from '../context'

export default function Cart() {
  const { cart } = useContext(CartContext)
  return (
    <StyledCart>
      <h2>Carrito de compras</h2>
      <table>
        <tobdy>
          <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Total</th>
          </tr>
          {cart.map(swag => (
            <tr key={swag.sku}>
              <td>
                <img src={swag.metadata.img} alt={swag.name}/> {swag.name}
              </td>
              <td>USD {priceFormat(swag.unit_amount)}</td>
              <td>{swag.quantity}</td>
              <td>{priceFormat(swag.quantity * swag.unit_amount)}</td>
            </tr>
          ))}
        </tobdy>
      </table>
      <nav>
        <div>
          <h3>Subtotal: </h3>
          <small>Total</small>
        </div>
        <div>
          <Link to='/'>
            <Button type='outline'>Volver</Button>
            <Button>Comprar</Button>
          </Link>
        </div>
      </nav>
    </StyledCart>
  )
}

Lo usamos en pages/cart.js:

import React from 'react'
import { Cart } from '../components'

export default function cart() {
  return (
    <Cart/>
  )
}

Y no olvidemos exportarlo en index.js:

export { default as Cart } from './Cart'

table>tbody>tr>th*4 y presionamos Tab.

Hola Devs:
-Construimos nuestra vista del Cart Shopping!

-Si desean el codigo, pueden visitar mi repositorio de este proyecto [en el commit de esta clase]: Click Aqui
Recuerden, #NuncaParesDeAprender 💚

Me rompre la cabeza como funciona useStaticQuery… wow, parece brujeria