07.c Guardar la card

Hasta el momento, si queremos guardar una nueva tarjeta (card), nada ocurre. Para ello, implementaremos el método que realmente agrega la nueva tarjeta a nuestra lista, de este modo, tras apretar el botón "Add" se efectuará lo deseado.

En src/components/ListTile.js agregamos el estado inicial de las cards de la siguiente forma:

class ListTile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      composing: false,
+     cards: props.cards,
      newCardText: ''
    };
  }

Actualizamos la función render para obtener las cards a partir del estado del componente:

  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) => {
+             this.state.cards.map((card) => {
                return (
                  <div className="CardTile" key={card.id}>
                    <div className="CardTile-details">
                      <span className="CardTile-title">{card.text}</span>
                    </div>
                  </div>
                )
              })
            }

Ahora agregamos el manejo del nombrado de la nueva card y el guardado correspondiente:

class ListTile extends Component {
  ...

  toggleComposer = () => {
    ...
  }

  // ###### Agregar: COMIENZO bloque
  newCardTextChange = (e) => {
    this.setState({
      newCardText: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    fetch(`/boards/${this.props.boardId}/lists/${this.props.id}/cards`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        card: {
          text: this.state.newCardText
        }
      }),
    }).then(res => res.json()).then((card) => {
      this.setState(prevState => ({
        composing: false,
        cards: [...prevState.cards, card],
        newCardText: ''
      }))
    });
  }
  // ###### Agregar: FIN bloque

  ...

  render() {
    ...

Por último, actualizamos el render de nuestro componente para manejar el submit del formulario, haciendo que se ejecute nuestra nueva función: handleSubmit y también actualizamos el valor del textarea a medida que se edita dicho campo.

  ...
  
  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.state.cards.map((card) => {
                return (
                  <div className="CardTile" key={card.id}>
                    <div className="CardTile-details">
                      <span className="CardTile-title">{card.text}</span>
                    </div>
                  </div>
                )
              })
            }
            { this.state.composing ?
              // ###### Quitar: COMIENZO bloque
              <div>
                <form>
                  <textarea className="ListTile-composer"></textarea>
                  <input className="ListTile-composer-add" type="submit" value="Add"/>
                  <div className="ListTile-composer-close" onClick={this.toggleComposer}></div>
                </form>
              </div>
              // ###### Quitar: FIN bloque

              // ###### Agregar: COMIENZO bloque
              <div>
                <form onSubmit={this.handleSubmit}>
                  <textarea className="ListTile-composer" value={this.state.newCardText} onChange={this.newCardTextChange}></textarea>
                  <input className="ListTile-composer-add" type="submit" value="Add"/>
                  <div className="ListTile-composer-close" onClick={this.toggleComposer}></div>
                </form>
              </div>
              // ###### Agregar: FIN bloque
            :
              <a className="ListTile-add-card" onClick={this.toggleComposer}>Add a card…</a>
            }
          </div>
        </div>
      </div>
    );
  }

Commit en git

git add -A
git commit -m "Guardar la card"

Siguiente: 8. Creación de listas

# 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 f4ed9c7