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">
-            <li className="BoardTile">
-              <a className="BoardTile-link">
-                <span className="BoardTile-fade"></span>
-                <span className="BoardTile-details">
-                  <span className="BoardTile-details-name">
-                    Board 1
-                  </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">
-                    Board 2
-                  </span>
-                </span>
-              </a>
-            </li>
+            {
+              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>
+                )
+              })
+            }
            <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"

---

Siguiente: 4. Componentizar el listado de boards