Integrando third party custom hooks en Platzi Conf Merch

Si estas usando React-Router-Dom v6 una solucion es usar el hook useNavigate

import React, { useContext, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AppContext } from '../context/AppContext.js'
import '../styles/components/Information.css';

const Information = () => {
  const { state , addToBuyer } = useContext(AppContext);
  const form = useRef(null);
  const navigate = useNavigate()

  const handleSubmit = () => {
    const formData = new FormData(form.current);
    const buyer = {
      name: formData.get('name') ,
      email: formData.get('email'),
      address: formData.get('address') ,
      apto: formData.get('apto'), 
      city: formData.get('city'), 
      country: formData.get('country'),
      state: formData.get('state'),
      cp: formData.get('cp'),
      phone: formData.get('phone'),
    }
    addToBuyer(buyer);
    navigate('/checkout/payment')
  }

Ya lo solucionaron 😃 la aplicación funciona con el useHistory

Les recomiendo usar la propiedad

devtool: 'source-map'

en su configuración de webpack. Con esto los errores se referencian a los archivos del proyecto y a las lineas de codigo que ustedes escriben. Sin esta propiedad los errores se marcan en el compilado de bundle.js y es más dificil identificar su origen. Espero les sirva esto a la hora de hacer debugging.

A partir de la vesrión 6 de react-router-dom no se usa useHistory(), en su lugar tenemos useNavigate(), que cumple la misma función pero con algunas mejoras:

ej:

import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Documentación

Ahora funciona useHistory, pero no deja de ser super didáctico la forma de proceder ante un bug y cómo reportarlo, ha sido increíble Oscar!

El Hook que remplaza a useHistory es useNavigate, lo podemos instanciar de la misma forma pero este no requiere del método push para determinar la ruta. Basta con pasar la ruta entre parentesis. Dejo el código con esta opción.

import React from 'react';
import { useRef, useContext} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import AddContext from '../contex/AppContext'
import '../style/components/Information.css';

export const Information = () => {
  const {state, addToBuyer} = useContext(AddContext);
  const form = useRef(null);
  const navigate = useNavigate();
  const { cart } = state;

  const handleSubmit=()=>{
    const formData = new FormData(form.current);
    const buyer ={
      'name' : formData.get('name') ,
      'email' : formData.get('email') ,
      'address' : formData.get('address') ,
      'apto' : formData.get('apto') ,
      'city' : formData.get('city') ,
      'country' : formData.get('country') ,
      'state' : formData.get('state') ,
      'cp' : formData.get('cp') ,
      'phone' : formData.get('phone') 
    }
    addToBuyer(buyer);
    navigate('/checkout/payment');
  };

  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Informacion de contacto:</h2>
        </div>
        <div className="Information-form">
          <form ref={form}>
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo Electronico" name="email" />
            <input type="text" placeholder="Direccion" name="address" />
            <input type="text" placeholder="Apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="country" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">
            <Link to='/checkout'>
              Regresar
            </Link>

          </div>
          <div className="Information-next">
            <button
              type='button'
              onClick = {handleSubmit}
            >
              Pagar
            </button>
          </div>
        </div>
      </div>

      <div className="Information-sidebar">
        <h3>Pedido:</h3>
        {
          cart.map((item)=>(
            <div 
              className="Information-item"
              key={item.title}
            >
              <div className="Information-element">
                <h4>ITEM Name</h4>
                <span>${item.price}</span>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  );
}

Hola, si tienen el siguiente error

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at bundle.js:2
    at ie (bundle.js:2)
    at addToBuyer (bundle.js:2)
    at onClick (bundle.js:2)
    at Object.Ve (bundle.js:2)
    at Qe (bundle.js:2)
    at bundle.js:2
    at kr (bundle.js:2)
    at Cr (bundle.js:2)
    at bundle.js:2

Solo tienen que agregar la propiedad buyer al initialState.js porque la versión que compartio el profesor en gist no la tiene, entonces el initialState.js queda asi

export default {
  cart: [],
  buyer: [],
  products: [
    {
      id: '1',
      image: 'https://arepa.s3.amazonaws.com/camiseta.png',
      title: 'Camiseta',
      price: 25,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '3',
      image: 'https://arepa.s3.amazonaws.com/mug.png',
      title: 'Mug',
      price: 10,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '4',
      image: 'https://arepa.s3.amazonaws.com/pin.png',
      title: 'Pin',
      price: 4,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '5',
      image: 'https://arepa.s3.amazonaws.com/stickers1.png',
      title: 'Stickers',
      price: 2,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '6',
      image: 'https://arepa.s3.amazonaws.com/stickers2.png',
      title: 'Stickers',
      price: 2,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      id: '7',
      image: 'https://arepa.s3.amazonaws.com/hoodie.png',
      title: 'Hoodie',
      price: 35,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
  ],
};

En react-router-dom v6 useHistory() fue reemplazado por useNavigate()

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')

Esta clase fué un poco rara, ¡nos habló de como implementar un custom hook por parte de react-router-dom para a la final encontrar un error y no poderlo implementar!, sería más bien una clase de cómo identificar errores en nuestra app y cómo buscar soluciones/reaccionar ante ellos. Para los que tengan la duda aún, como han comentado los otros estudiantes, ya se puede usar el useHistory sin algún problema, y también puedes obtener más información de los errores si corres tu servidor de desarrolo en modo de desarrollo (valga la redundancia, pero en la configuración inicial de webpack que presentó el profe no se hizo así).

Una alternativa es usar

const navigate = useNavigate();

y en la funcion donde quieran redireccionar solo usan

navigate('ruta a la que quieras redireccionar')

Funciona perfecto con el useHistory!!!

Desde la versión 6 de react router dom se dejo de usar el hook useHistory y fue remplazado por el hook useNavigate, para los que estan haciendo el curso en la versión 6 de react router dom, el código quedaría de la siguiente manera.

import { useNavigate } from 'react-router-dom';

const Information = () => {
	const navigate = useNavigate()
	.
	.
	const handleSubmit = () => {
			.
			.
			navigate('/checkout/payment', { replace: true });
	}
}
	

Link de la documentación del hook
useNavigate

V6
<aside>
💡 Navigation with event :

</aside>

import { Link, useNavigate } from 'react-router-dom';
..
const navigate = useNavigate()
handleClick (){
	navigate('/checkout/payment')
}

En React Router v6 useHistory fue reemplazado por useNavigate

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Wow que excelente forma de dar con las soluciones que uno, como novato, normalmente las busca en stackOverflow

Si tienen este tipo de errores donde es importante filtrar por fecha pueden usar las flags de google: after:2020 o before:2021

Si les da el error: export ‘useHistory’ (imported as ‘useHistory’) was not found in 'react-router-dom, cambien useHistory por useNavigate y donde dice: history.push (/path) poner: navigate(/path).

useNavigate in reactrouterdomv6

Les recomiendo modificar su script de start en el package.json para empezar en modo desarrollo, esto hacer que ver los errores seá más fácil, yo tardé horas en arreglar algo, y con el modo desarrollo lo resolví en un minuto jaja era un typo!!!

"start": "webpack serve --mode development",

Para los que tengan la V6 de react-router-dom, deben usar el hook useNavigate()

const navigate = useNavigate();

¡Hola! Estoy siguiendo este curso, pero usando NextJS + TypeScript + Tailwind + Zustand + React Hook Form. Aún no lo termino, pero voy agregando poco a poco las cosas que vamos viendo.

Si les interesa ver el proyecto hasta esta clase, les dejo el link del proyecto: https://github.com/d4vsanchez/platzi-conf-merch/tree/react-hook-form

En esta clase Oscar nos enseña como googlear un bug de forma profesional, habilidad indispensable para los developers.

Deberían de cambiar el nombre de esta clase u omitirla, ya que, no se imparte como usar propiamente el Hook

Creía que solo los mortales nos encontrabamos con este tipo de problemas jaja

si ya funciona!!

este error es un amigo ingrato
😛

Estoy usando las siguientes versiones a la fecha de Enero de 2021 y funciona perfecto

"react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0"```

muy bueno que ocurran este tipo de errores en las claces asi aprendemos a como tomar y manejar este tipo de errrores

con react-router-dom en la version 6 no nos da este tipo de error

Me gusto el recorrido por el error, creo que ha sido lo mas valioso del curso hasta ahora

Me funciona el useHistory

import React, { useRef, useContext } from "react";
import { useHistory } from "react-router-dom";
import AppContext from "../context/AppContext";
import "../styles/Information.scss";

const Information = () => {
  const { state, addToBuyer } = useContext(AppContext);
  const form = useRef(null);
  const { cart } = state;
  let history = useHistory()
  const handleSubmit = () => {
    const instanceOfData = new FormData(form.current);

    const buyer = {
      nombre: instanceOfData.get("name"),
      email: instanceOfData.get("email"),
      address: instanceOfData.get("address"),
      apto: instanceOfData.get("apto"),
      city: instanceOfData.get("city"),
      country: instanceOfData.get("country"),
      state: instanceOfData.get("state"),
      cp: instanceOfData.get("cp"),
      phone: instanceOfData.get("phone"),
    };
    addToBuyer(buyer);
    history.push('/checkout/payment')
  };

Consejo , usen react developer tools para ver todos los props que tiene disponibles en sus componentes

Me parece genial que busques todos esos recursos para resolver el problema, en la documentacion en react, issues de react-router-dom. Super muy util

n