Manejo de Gatsby Templates

En casi todos los cursos de PLATZI nos indican (repetidas veces) que se tiene que seguir una norma con las mayúsculas y el camelCase para los archivos, sobre todo por el hecho de ser coherente y constante… Pues en el curso ya van como 3 veces que el profe no es constante con eso.
El problema no es el profe (que también). El problema es que surgen errores en nuestras compilaciones que luego no encontramos el porqué y perdemos mucho rato entendiendo que ha sido por este tema.
Por favor, cuando graben un curso díganle al profesor que ‘sea constante’ con la normativa que elija y emplee hasta el final…
Por favor.

Está buenísimo este curso ¿Alguien en 2021 viéndolo? pa ser panas

Tuve este error

React Hook "useState" is called in function "productDetail" which is neither a React function component or a custom React Hook function

Lo solucione cambiando en nombre de la función a ProductDetail, colocando la primera letra en mayúscula.

Además, los estilos que presenta el profe al final de este vídeo no se corresponden para nada con lo que se ve finalmente en nuestro proyecto… y así vamos desde el principio… Arreglen esto por favor!!!

Hola Devs:
-Me he puesto a mejorar un poco el aspecto visual del proyecto, mas aun en la pagina donde muestra el detalle del producto, espero y les guste:

-Si desean los cambios que tengo, lo pueden encontrar en mi repositorio [accediendo al commit especifico de esta clase]: Click Aqui
-Cabe destacar que tuve que meterme al codigo y toquetear mucho, les invito hacerlo, aprendes X10.
Recuerden, #NuncaParesDeAprender 💚

Compañeros, para que el precio sea dinámico y se actualice con la cantidad basta con poner:

export default function ProductDetail({ unit_amount, sku: id, product: {name, images, metadata} }) {
	const [size, setSize] = useState(3);
	const [qty, setQty] = useState(1);
	const formatedPrice = priceFormat(unit_amount * qty);

return (
	// ...
	<b>USD {formatedPrice}</b>
)

En mi caso Stripe me devuelve unit_amount en vez de price como al profesor. Es cuestión de cambiar el prop en cualquier caso nada mas. Un saludo!

query{
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          images
          description
          metadata{            
            wear
          }      
        }
      }
    }
  }
}

Noten que cuando Agregan mas productos el precio no cambia, aqui el codigo que le agregue para hacerlo

import React, { useState } from "react"
import priceFormat from "../utils/PriceFormat"
import {
  Tag,
  SizeButton,
  QtyButton,
  SizeSelect,
  Button,
  StyledProductDetail,
  QtySelect,
} from "../styles/Components"
import { SEO, Stars } from "./"

export default function ProductDetails({
  id,
  unit_amount,
  product: { name, metadata },
}) {
  const price = priceFormat(unit_amount)
  const resetPrice = price.split("$")
  const newPrice = parseInt(resetPrice[1])
  const [precio, setPrecio] = useState({
    precioInicial: newPrice,
    dinero: newPrice,
  })
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)

  const quitPriceAndQty = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1)
      setPrecio({ ...precio, dinero: precio.dinero - precio.precioInicial })
    }
  }
  const setPriceAndQty = () => {
    setQuantity(quantity + 1)
    setPrecio({ ...precio, dinero: precio.dinero + precio.precioInicial })
  }
  return (
    <StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt={name} />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>USD: {precio.dinero}</b>
        <Stars />
        {metadata.wear && (
          <SizeSelect selected={size}>
            <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
            <SizeButton onClick={() => setSize(2)}>S</SizeButton>
            <SizeButton onClick={() => setSize(3)}>M</SizeButton>
            <SizeButton onClick={() => setSize(4)}>L</SizeButton>
          </SizeSelect>
        )}
        <p>Quantity:</p>
        <QtySelect>
          <button onClick={quitPriceAndQty}>-</button>
          <input type="text" disabled value={quantity} />
          <button onClick={setPriceAndQty}>+</button>
        </QtySelect>
      </div>
    </StyledProductDetail>
  )
}

Funciono Muy bien solo modifique si existia metadata

{metadata?.wear && (
                    <SizeSelect selected={size}>
                        <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
                        <SizeButton onClick={() => setSize(2)}>S</SizeButton>
                        <SizeButton onClick={() => setSize(3)}>M</SizeButton>
                        <SizeButton onClick={() => setSize(4)}>L</SizeButton>
                        <SizeButton onClick={() => setSize(5)}>XL</SizeButton>
                    </SizeSelect>
                )}

adjunto como quedo 😄

No usamos Button ni QtyButton en esta clase y los usé en vez de la etiqueta común button pero no cambió el aspecto visual de la página.

Que chimbo que no tengan talla para gorditos XL.

Si tienen problemas con los estilos hace falta un div que los encapsule.

<StyledProductDetail>
      <SEO title={name} />
      <img src={metadata.img} alt="name" />
      <div>
        <Tag>Popular</Tag>
        <h2>{name}</h2>
        <b>MXN {formatPrice}</b>
        <Stars />
        {/* {metadata.wear && <h1>Color: Azul</h1>} */}
        <small>{metadata.description}</small>
        {metadata.wear && (
          <SizeSelect selected={size}>
            <SizeButton onClick={() => setSize(1)}>XS</SizeButton>
            <SizeButton onClick={() => setSize(2)}>S</SizeButton>
            <SizeButton onClick={() => setSize(3)}>M</SizeButton>
            <SizeButton onClick={() => setSize(4)}>L</SizeButton>
          </SizeSelect>
        )}
        <p>Cantidad</p>
        <QtySelect>
          <button onClick={() => (qty > 1 ? setQty(qty - 1) : null)}>-</button>
          <input type="text" disabled value={qty} />
          <button onClick={() => setQty(qty + 1)}>+</button>
        </QtySelect>
        <Button>Agregar al carrito</Button>
      </div>
    </StyledProductDetail>```

Por que product: { name, metadata } siguio funcionando aun sin editar las referencias dentro de la funcion? (ej. name)

tuve algunos problemas con la destructuracion y lo resolvi de la siguiente forma

export default function ProductDetail({ pageContext: { unit_amount, id, product: { name, metadata } } })