product-page.js

import React, { Component } from 'react';
import Relay from 'react-relay';


import FacebookButton from '../utils/fb';

class SearchPage extends Component {
  state = {
    value: this.props.value
  }
  
  componentDidMount () {
    const {relay, value} = this.props;

    relay.setVariables({
      text: value,
    });
  }

  handleChange = (event) => {
    //console.log('HANDLING CHANGE --->', event.target.value);
    this.setState({value: event.target.value});
    this.props.relay.setVariables({
      text: event.target.value,
      productQuantity: 6,
      attributeQuantity: 3,
    });
  }

  _goToNextProductPage = () => {
    this.props.relay.setVariables({
      productQuantity: this.props.relay.variables.productQuantity + 6,
    });
  }

  _goToNextAttributePage = () => {
    this.props.relay.setVariables({
      attributeQuantity: this.props.relay.variables.attributeQuantity + 3,
    });
  }

  render() {
    const { viewer } = this.props;
    //console.log('viewer --->', viewer);
    let { text } = this.props.relay.variables;
    //console.log('TEXT -->', text)
    return (
      <div style={styles.feedContainer}>

        <h1>Página de Busca</h1>
        <div>
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </div>

        <h2>Resultados da busca por: {viewer.search.query}</h2>
          <div style={styles.feedContainer}>
          <div style={styles.resultList}>
            <h3>PRODUTOS</h3>
            {viewer.search.products.edges.map(product => {
              return <p key={product.node._id}>{product.node.name}</p>
            })}
            <div>
              <button onClick={this._goToNextProductPage}
                disabled={!this.props.viewer.search.products.pageInfo.hasNextPage}>
                show more
              </button>
            </div>
          </div>
          <div style={styles.resultList}>
            <h3>ATRIBUTOS ss</h3>
            {viewer.search.attributes.edges.map(attribute => {
              return <p key={attribute.node.id}>{attribute.node.name}</p>
            })}
            <div>
              <button onClick={this._goToNextAttributePage}
                disabled={!this.props.viewer.search.attributes.pageInfo.hasNextPage}>
                show more
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    width: 'inherit',
  },
  feedContainer: {
    width: '100%',
    maxWidth: '1000px',
    margin: '5px auto',
  },
  searchResults: {
    maxWidth: '500px',
    display: 'flex',
    border: '1px solid #ccc',
  },
  resultList: {
    width: '250px',
    padding: '10px',
  }
};

export default Relay.createContainer(SearchPage, {
  initialVariables: {
    text: '',
    productQuantity: 6,
    attributeQuantity: 3,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        search(text: $text){
          query,
          products(first: $productQuantity){
            pageInfo{
              hasNextPage,
              hasPreviousPage,
              startCursor,
              endCursor
            },
            edges{
              cursor
              node{
                _id,
                id,
                name,
              }
            }
          },
          attributes(first: $attributeQuantity){
            pageInfo{
              hasNextPage,
              hasPreviousPage,
              startCursor,
              endCursor
            },
            edges{
              node{
                id
                name
              }
            }
          }
        }
      }
    `,
  },
});