correo - MutakamwoyoCloud/MCloud GitHub Wiki

A diferencia del resto, el módulo de correos tiene su propia pantalla principal, un componente específico ya que el tratamiento y el tipo de datos en nada se asemeja con el resto. Este componente no es más que un visualizador de la bandeja de entrada de correo, que nos permite realizar las gestiones básicas, leer los emails recibidos y enviar uno nuevo. Si bien la funcionalidad no parece muy compleja si lo es por otra parte su diseño, ya que este componente aprovecha al máximo los fundamentos de ReactJs en cuanto a componentes se refiere. Sin entrar en demasiado detalle, en la [figura 13] podremos ver difirenciados los distintos componentes que lo forman.

Figura 13

En esta figura podemos visualizar la bandeja de entrada junto con el contenido del correo que se ha seleccionado de la tabla que contiene todos los correos recibidos.

A continuación veremos en la [figura 14] el último componente que forma parte de nuestro gestor de correos que sólo se hará visible cuando pulsemos sobre el boton que nos permite redactar un correo nuevo.

Figura 14

Al ser tan extenso sólo mencionaremos el método render del componente que es el más importante ya que se encarga de la visualización de todos estos componentes juntos.

render() {
    var email_id = this.state.email_id;
    var new_email = this.state.new_email;
    var selected_email;
    if(new_email){
      selected_email = <NewEmail/>
    }
    else{
      if (email_id) {
        var mail = this.emails.filter(function(mail) {
          return mail.id === email_id;
        })[0];
        selected_email = <Email id={mail.id}
                                from={mail.from}
                                to={mail.to}
                                subject={mail.subject}
                                emailContent={mail.body} />;
      } else {
        selected_email = <div className="none-selected alert alert-warning" 
                              role="alert">
                            <span>No {this.props.text} selected.</span>
                         </div>
        }
    }

    return (
      <div className="inbox">
      <div className="row">
        <div className="col-md-4">
          <Button type="submit" onClick={this.handleNewMail}>
                    Nuevo correo
          </Button>
        </div>
        <div>
        <EmailList emails={this.emails}
                     onSelectEmail={this.handleSelectEmail} />
        </div>
        </div>
        <div className="email-viewer">
          {selected_email}
        </div>
      </div>
    );
  }
}

Podemos ver al principio del método como primeramente hace la comprobación de si se ha pulsado o no el botón para enviar un nuevo correo, de ser así muestra el componente newEmail.js en caso contrario, si se ha seleccionado un correo, mostrará su contenido o en su defecto un mensaje de que no se ha seleccionado ninguno.