# 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 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\`

{% code title="src/pages/Home.jsx" %}

```javascript
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);
  }
}
```

{% endcode %}

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**.

{% code title="src/pages/Home.jsx" %}

```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;
```

{% endcode %}

### Retos:&#x20;

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).