03.b Obtener datos desde la API

Luego obtenemos el listado de boards de la API y actualizamos el estado:

import React, { Component } from 'react';

class Boards extends Component {
  // ######## Agregar: COMIENZO bloque

  constructor(props) {
    super(props);
    this.state = { boards: [] };
  }


  componentDidMount() {
    fetch("/boards").then(res => res.json()).then((boards) => {
      this.setState({ boards });
    });
  }

  // ######## Agregar: FIN bloque

  render() {
    return (
      <div className="Boards">
        <div className="Boards-container">
          ...
        ...

Visitamos nuestra aplicación:

¿Qué paso?

Si inspeccionamos el pedido HTTP para obtener los boards a través de la consola del navegador, podemos ver que el mismo se realiza a la URL http://localhost:3000/boards. Nuestra API se encuentra en una IP y puerto específico. Por lo cual debemos editar nuestra aplicación para que ese sea el lugar al cual los pedidos a nuestra API se dirijan.

Para esto, editamos el archivo package.json y agregamos la siguiente línea con datos proporcionados en el workshop:

{
  "name": "wye-trello",
  "version": "0.1.0",
  "private": true,
+ "proxy": "http://<IP>:<PUERTO>/",
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Reiniciamos el servidor y verificamos el estado de nuestra aplicación:

Si bien estamos obteniendo los boards de nuestra API, aún no los estamos mostrando. Para esto, debemos obtener los boards a mostrar a partir del listado de boards presente en el estado de nuestro componente:

  render() {
    return (
      <div className="Boards">
        <div className="Boards-container">
          <div className="Boards-header">
            <div className="Boards-header-icon">
              <span className="Boards-header-icon-member"></span>
            </div>
            <h3 className="Boards-header-name">Personal Boards</h3>
          </div>

          <ul className="Boards-list-container">
           
            // ######### Quitar: COMIENZO bloque
            <li className="BoardTile">
              <a className="BoardTile-link">
                <span className="BoardTile-fade"></span>
                <span className="BoardTile-details">
                  <span className="BoardTile-details-name">
                    Workshop
                  </span>
                </span>
              </a>
            </li>
            <li className="BoardTile">
              <a className="BoardTile-link">
                <span className="BoardTile-fade"></span>
                <span className="BoardTile-details">
                  <span className="BoardTile-details-name">
                    Team
                  </span>
                </span>
              </a>
            </li>
            // ######### Quitar: FIN bloque
            
            // ######### Agregar: COMIENZO bloque
            {
              this.state.boards.map((board) => {
                return (
                  <li className="BoardTile" key={board.id}>
                    <a className="BoardTile-link">
                      <span className="BoardTile-fade"></span>
                      <span className="BoardTile-details">
                        <span className="BoardTile-details-name">
                          {board.name}
                        </span>
                      </span>
                    </a>
                  </li>
                )
              })
            }
            // #########> Agregar: FIN bloque

            <li className="NewBoardLink">
              <a className="NewBoardLink-link">
                Create new board…
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  }

Commit en git

git add -A
git commit -m "Listado de boards dinamico"

Opcional: Instalación de devTools

En este paso, lo que se hizo fue traer datos reales desde nuestra API, sin embargo a los efectos visuales nuestra aplicación es la misma. En el siguiente paso crearemos un componente que tampoco hará cambios visuales, pero nos será de mucha ayuda contar con la siguiente herramienta de desarrollo para ver como nuestra aplicación se modifica. Recomendamos instalar las devTools desde aquí

---

Siguiente: 4. Creación del componente BoardTile

# Agregar el remote si no se hizo antes
git remote add origin https://github.com/wyeworks/react-workshop-2018.git
git fetch origin
# Fin paso opcional

git reset --hard fb62c32