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 = {
+     cards: props.cards,
      composing: false,
      newCardText: ''
    };
  }

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((response) => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      return response;
    }).then((response) => {
      return response.json();
    }).then((card) => {
      this.toggleComposer();
      this.setState(prevState => ({
        cards: [...prevState.cards, card],
        newCardText: ''
      }))
    }).catch((error) => {
      console.log(error);
    });
  }
  // ###### 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">
            <div className="CardTile">
              <div className="CardTile-details">
                <span className="CardTile-title">Create Wiki</span>
              </div>
            </div>
            <div className="CardTile">
              <div className="CardTile-details">
                <span className="CardTile-title">Setup VM</span>
              </div>
            </div>
            {this.state.composing &&
              <div>
-               <form>
+               <form onSubmit={this.handleSubmit}>
-                 <textarea className="ListTile-composer"></textarea>
+                 <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>
            }
          </div>
          {!this.state.composing &&
            <a className="ListTile-add-card" onClick={this.toggleComposer}>Add a card…</a>
          }
        </div>
      </div>
    );
  }
}