Cómo integrar la API de Platzi Store

La api esta caida :c

Para el manejo de peticiones asíncronas con Async/Await usamos el plugin @babel/plugin-transform-runtime .

npm i @babel/plugin-transform-runtime -D

Cómo integrar la API de Platzi Store

https://us-central1-gndx-fake-api.cloudfunctions.net/api

• Crearemos un hook para trabajar directamente con el llamado de esta API
  1.- Creamos una carpeta en src llamada hooks.
  2.- Creamos un archivo dentro de hooks > llamado useInitialState.js
  3.- Instalamos axios con: npm install axios -S
  4.- Instalamos: npm install @babel/plugin-transform-runtime -D
  5.- Actualizamos .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

App.jsx:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

import useInitialState from '../hooks/useInitialState';

const App = () => {
  const initialState = useInitialState();
  const isEmpty = Object.keys(initialState.products).length;
  return (
    <>
    {isEmpty > 0 ? (
        <BrowserRouter>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/checkout" component={Checkout} />
              <Route component={NotFound} />
            </Switch>
          </Layout>
        </BrowserRouter>
      ) : <h1>Loading ...</h1>}
    </>
  )
}

export default App;

useInitialState.js :

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

const API = 'https://us-central1-gndx-fake-api.cloudfunctions.net/api';

const useInitialState = () => {
    const [products, setProducts] = useState([]);

    useEffect(async () => {
        const response = await axios(API);
        setProducts(response.data);
    }, []);

    return {
        products,
    }
}

export default useInitialState;

Buenas! Les dejo mi versión del hook useInitialState.
Este hook no utiliza la librería Axios por lo cual no hay necesidad de instalarla.
Espero les ayude 😃

import { useState, useEffect} from "react";

const API= "https://us-central1-gndx-fake-api.cloudfunctions.net/api";

const useInitialState = () => {
  try {
    const [products, setProducts] = useState([]);

    useEffect(async () => {
      const response = await fetch(API);
      const data = await response.json();
      setProducts(data);
    }, []);

    return {
      products
    };
  } catch (error) {
    return {
      products: [],
      error: typeof error === "object" ? error.message : error
    }
  }
}

export default useInitialState;

Recuerden añadir la carpeta dist al archivo .gitignore para que no suban esta carpeta a su repositorio remoto

Si no les fuinciona la API que está en los recursos pueden usar la nueva API de Platzi en: https://fakeapi.platzi.com/ El objeto json que retorna es un poco diferente, pero funcionará: Aquí el endpoint: https://api.escuelajs.co/api/v1/products

La API a no funciona 😦