07.b Formulario de creación de cards

Formulario de creación de Cards

A continuación, vamos a agregar un formulario a nuestras listas, que nos permita agregar nuevas tarjetas a cada una de ellas.

Para ello, primero modificaremos nuestro componente src/components/ListTile.js para renderizar dicho formulario:

<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>
          )
        })
      }
     
      // ###### Agregar: COMIENZO bloque
      <div>
        <form>
          <textarea className="ListTile-composer"></textarea>
          <input className="ListTile-composer-add" type="submit" value="Add"/>
          <div className="ListTile-composer-close"></div>
        </form>
      </div>
      // ###### Agregar: FIN bloque
      
      <a className="ListTile-add-card">Add a card…</a>
    </div>
  </div>
</div>

Deberíamos ver lo siguiente:

Ahora, vamos a actualizar nuestro componente para que se muestre o el formulario de agregar una nueva tarjeta, o el link que habilitaría dicho formulario. Para esto, definiremos una propiedad en nuestro componente para indicar si se está agregando o no una nueva tarjeta:

class ListTile extends Component {
  // ###### Agregar: COMIENZO bloque
  constructor(props) {
    super(props);
    this.state = {
      composing: false,
      newCardText: ''
    };
  }

  toggleComposer = () => {
    this.setState(prevState => ({
      composing: !prevState.composing
    }));
  }
  // ###### Agregar: FIN bloque

  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>
                )
              })
            }
          
            // ###### 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>

            <a className="ListTile-add-card">Add a card…</a>
            // ###### Quitar: FIN bloque

            // ###### Agregar: COMIENZO bloque
            { this.state.composing ?
              <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>
            :
              <a className="ListTile-add-card" onClick={this.toggleComposer}>Add a card…</a>
            }
            // ###### Agregar: FIN bloque
          </div>
        </div>
      </div>
    );
  }

Probando en el browser deberíamos ver:

Commit en git

git add -A
git commit -m "Formulario de creacion de cards"

Siguiente: 7.c Guardar la card

# 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 6775ee4