07 Agregar el componente ListTile

Obtenemos la información del board de la API

Inicializamos el estado del componente src/components/Board.js, el cual va a tener el nombre del board y sus listas asociadas:

import React, { Component } from 'react';

class Board extends Component {
  // ####### Agregar: COMIENZO bloque
  constructor(props) {
    super(props);
    this.state = { name: "", lists: [] };
    this.boardId = this.props.match.params.boardId;
  }
  // ####### Agregar: FIN bloque
  
  render() {
    return (
      ...

Luego, obtenemos la información del board desde nuestra API, y actualizamos el estado del componente:

class Board extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "", lists: [] };
    this.boardId = this.props.match.params.boardId;
  }

  // ####### Agregar: COMIENZO bloque
  componentDidMount() {
    fetch(`/boards/${this.boardId}`).then(res => res.json()).then((board) => {
      this.setState({
        name: board.name,
        lists: board.lists
      });
    });
  }
  // ####### Agregar: FIN bloque

  render() {
    return (
      ...

Sustituímos el nombre del board utilizando el estado que seteamos previamente a partir de la API

  render() {
    return (
      <div className="Board">
        <div className="Board-content">
          <div className="Board-header">
            <span className="Board-header-btn">
-             BoardId: {this.props.match.params.boardId}
+             {this.state.name}
            </span>
          </div>

Agregamos el componente ListTile

Creamos el archivo src/components/ListTile.js, cuyo contenido debería ser el siguiente:

import React, { Component } from 'react';

class ListTile extends Component {
  render() {
    return (
      <div className="ListTile">
        <div className="ListTile-content">
          <div className="ListTile-header">
            <div className="ListTile-header-title">
              {this.props.name}
            </div>
          </div>
          <div className="ListTile-cards">
            {
              this.props.cards.map((card) => {
                return (
                  <div className="CardTile" key={card.id}>
                    <div className="CardTile-details">
                      <span className="CardTile-title">{card.text}</span>
                    </div>
                  </div>
                )
              })
            }
            <a className="ListTile-add-card">Add a card…</a>
          </div>
        </div>
      </div>
    );
  }
}

export default ListTile;

Invocamos el componente ListTile

Editamos el archivo src/components/Board.js, invocando el componente. Para esto, primero debemos importarlo:

  import React, { Component } from 'react';
+ import ListTile from './ListTile';

Y luego, lo invocamos, pasándole el nombre de cada board en particular:

  ...
  render() {
    return (
      <div className="Board">
        <div className="Board-content">
          <div className="Board-header">
            <span className="Board-header-btn">
              {this.state.name}
            </span>
          </div>

          // ####### Agregar: COMIENZO bloque

          <div className="Board-canvas">
            <div className="Board-canvas-content">
              {
                this.state.lists.map((list) => {
                  return <ListTile key={list.id} id={list.id} name={list.name} boardId={this.boardId} cards={list.cards}/>
                })
              }
              <div className="NewList">
                <a className="NewList-placeholder">Add a list…</a>
              </div>
            </div>
          </div>

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

        </div>
      </div>
    );
  }

Probamos en el browser:

Commit en git

git add -A
git commit -m "Agregamos el componente ListTile"

Siguiente: 7.b Agregar formulario de creación de cards

# 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 2a8e107