Conectando la API

Estos son los endpoints disponibles en nuestra api:

Route	HTTP Verb	Route Middleware	Description
/api/users	GET	isAuthenticated	Obtiene lista de usuarios
/api/users	POST		Crea un nuevo usuario
/api/users/:id	GET	isAuthenticated	Obtiene un solo usuario
/api/products/	GET		Obtiene la lista de productos
/api/products/:id	GET	isAuthenticated	Obtiene el detalle del producto
/api/products	POST		Crea a nueva producto

Para obtener los datos nuestra api vamos a utilizar `fetch`.

API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. Esta es la API nativa del navegador que nos va brindar la opción de comunicarnos con nuestro backend.

Otener los productos

Vamos a crear un metodo en nuestro Pagina de home `Home.jsx`

src/pages/Home.jsx

const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/products';
const getProducts = async(setProducts) => {
  try {
    const result = await fetch(API);
    const products = await result.json();
    setProducts(products);
  } catch (error) {
    console.error('Error :(', error);
  }
}

Este metodo va a llamar a la api `/products` que consulta todos los productos disponibles en nuestra base de datos. Estos productos vamos agregarlos al estado interno del componente usando el hook useState que pasaremos como parametro a esta función (setProducts)

Queremos que al entrar a nuestra pagina inmediatamente se ejecute nuestra función y obtenga los productos, para eso vamos a usar el hook useEffect.

src/pages/Home.jsx

import React, { useEffect, useState } from 'react';

import Header from '../components/Header';
import Product from '../components/Product';

const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/products';

const getProducts = async(setProducts) => {
  try {
    const result = await fetch(API);
    const products = await result.json();
    setProducts(products);
  } catch (error) {
    console.error('Error :(', error);
  }
}

const Home = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    getProducts(setProducts)
  }, []);

  return (
    <>
      <Header />
      <div className="container mt-4">
        <div className="row">
          { /*inicio render de lista de productos*/  }
              <div key={idx} className="col-lg-4 col-md-6 mb-4">
                <Product {...product} />
              </div>
           { /*final render de lista de productos*/  }  
        </div>
      </div>
    </>
  );
}
export default Home;

Retos:

1. Luego de obtener los productos deberas mostrar estos en la vista, para eso debes usar el componente Product y recorrer el arreglo de productos usando map.

2. Ve a la pagina de detalle y haz el mismo proceso pero esta vez llama al endpoint del detalle del producto. (Recuerda que debes capturar el id a traves de la URL, para enviarlo a tu endpoint).