peticiones_component - MutakamwoyoCloud/MCloud GitHub Wiki

Este es el componente principal en el cual se representa el formulario para solicitar las nuevas peticiones de búsqueda y una tabla con los resultados (si los hubiera). Como se comentó en la sección 3.1 una de las ventajas más destacadas es que los componentes que lo forman son reutilizables y muy fáciles de mantener al estar divididos en porciones pequeñas, por este hecho en concreto nos sirve para manejar tanto las peticiones del módulo de Wikipedia como las de YouTube. Este componente está formado por otros dos NameForm y Table que veremos más en detalle a lo largo de esta sección.

Crea el componente, hereda las propiedades (props) del componente desde el cual es llamado y define los atributos propios del componente.

      constructor(props)

Se encargada de realizar las peticiones (POST) para obtener los datos que el usuario ha solicitado durante su búsqueda, a continuación podremos ver como esta función será pasada al componente NameForm que será el encargado de recoger dichos parámetros para poder ser procesados y enviados.

     solicitaDatos(data, resource, path, myThis){
    var urlpath = path;
    $.ajax({
        url: urlpath,
        type: "POST",
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function(response) {
          console.log(response);
        },
        error: function(response) {
          console.log("error");
        }
    });
  }

Este método es el encargado de indicar si hay datos relacionados con los parámetros de búsqueda introducidos por el usuario,diferenciando si la búsqueda se está realizando desde el módulo de Wikipedia o de Youtube esta función será utilizada en el componente Table que hará que la tabla se muestre o no en función de si existen coincidencias entre los datos introducidos y los previamente almacenados.

handleChange(event)

Este es el método que hace visible el componente, puede apreciarse como se llama al componente NameForm y el componente Table pasándola como atributo los métodos mencionadas anteriormente para que ellos, como componente de forma independiente, realicen las funciones necesarias correspondientes.

    render() {
       return (
         <div>
          <form onSubmit={this.handleSubmit}>
           <Row>
            <Col sm={10} large={8}>
             <h1 className="texto_principal_peticiones App-header">
                   {this.name}
             </h1>
            </Col>
           </Row>
          </form>
          <Row>
           <div className="search">
            <fieldset>
             <legend><h3>{"Nueva Peticion"}</h3></legend>
             <NameForm Change={this.handleChange} 
                        solicitaDatos={this.solicitaDatos} 
                        that={this.thisPrincipal} 
                        name={this.name}/>
            </fieldset>
           </div>
           <div className="search">
            <fieldset>
             <legend>Resultados</legend>
             <Table rows={this.table} type={this.name}/>
            </fieldset>
           </div>
          </Row>
        </div>
    );
  }

Método que crea el componente, en este caso las propiedades(props) que recibe el constructor del componente son las que hemos utilizado en el método render() de Peticiones entre ellos el método solicitaDatos que habíamos comentado en el apartado anterior.

    constructor(props) 

Este método se encarga de recoger los datos introducidos en el formulario cuando el usuario hace click en el botón correspondiente al envío del formulario. Utilizando la función solicitarDatos realiza las peticiones, se muestra un mensaje de confirmación en caso de que la petición se haya realizado con éxito o de error si por el contrario, no se ha introducido ningún criterio de búsqueda en el formulario.

    handleSubmit(event) 

Pinta el componente teniendo en cuenta, en primer lugar que no se trate del módulo vademécum ya que este no tendrá una opción de búsqueda en el que se especifiquen el número de resultados que se desea recibir. El resto del método muestra el formulario que podemos apreciar en la [figura 12].

   render() {
    var numAndSearch = "";
    if (this.name !== "Vademecum") {
      numAndSearch =  <Row className="search">
                        <Column small={5} large={3}>
                          <label>{"Numero de coincidencias"}</label>
                          <input placeholder="3" 
                                 ref="number" 
                                 type="number"/>
                        </Column>
                        <Column small={2} large={3}>
                          <Button type="submit">
                                 <Send size={Sizes.small} />
                          </Button>
                          <NotificationSystem ref="notificationSystem" />
                        </Column>
                      </Row>;
    }
        
    return (
      <div className="grid_form_request">
       <form onSubmit={this.handleSubmit}>
        <Row className="search">
          <Column small={12} large={12}>
            <label>search:</label> 
            <input 
                  placeholder={"introduce la busqueda"} 
                  onChange={this.props.Change} 
                  ref="search" 
                  type="text"/>
          </Column>
        </Row>
        {numAndSearch}
       </form>
      </div>
    );
  }

![image10]

Figura 12: Componente peticiones

Este es el otro componente que se incluye en Peticiones. Su finalidad es mostrar la tabla con los resultados de búsquedas que ya se han realizado previamente, mostrando en cada una de las filas los distintos contenidos relacionados con la misma. Cuando pulsemos en alguna de ellas el sistema nos reaccionará al componente Result que es encargado de mostrar el contenido.

Crea el componente.

    constructor(props) 

Cuando seleccionamos una fila de la tabla, este método nos trae el contenido con el que esta relacionado, si todo funciona correctamente se redirige al componente Result por medio del browserHistory.push añadiendo el salto a esa "ruta" (componente Result) y pasándole la información del contenido.

    handleSubmit(event) {
    var params = {};
    params.success = function(request,response){
      browserHistory.push({
        pathname: '/result',
        state: { data: response }
      });
    }
    params.error = function(response){
      console.log(response);
    }
    params.data = event.target['id'];
    params.type = "wiki";
    if(params.data !== "")
      CommonActions.list(params, "getData");
    event.preventDefault();
  }

Esta método muestra la tabla de resultados, como podemos ver en la [Figura 12] en caso de que los haya, si no, en luegar de la tabla simplemente mostrará un texto indicando al usuario que introduzca una nueva búsqueda.

    render()