search-page.js

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

import PageContainer from '../pages/PageContainer';
import Painel        from '../pages/Painel';
import ProductCard   from '../ProductCard/ProductCard';

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

class SearchPage extends Component {
  state = {
    value: this.props.value
  }

  setInitialState(state = {}) {
    this.setState({
      search: this.props.value,
      ...state,
    });
  }

  componentWillMount = () => this.setInitialState()

  _handleChange = (event) => {
    this.setState({value: event.target.value});

    this.props.relay.setVariables({
      search: event.target.value,
      searchProducts: false,
      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,
    });
  }

  searchProducts = search => this.props.relay.setVariables({ search, searchProducts: true, })

  render() {
    const { viewer } = this.props;
    //console.log('viewer --->', viewer);
    let { search } = this.props.relay.variables;
    //console.log('TEXT -->', text)
    return (
      <PageContainer card>
        <Painel title="Página de Busca">
          <div style={styles.feedContainer}>
            <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 (

                    <h3 key={product.node._id}>
                      {product.node.name}
                    </h3>

                  );
                })}

                <div>
                  <button onClick={this._goToNextProductPage}
                    disabled={!this.props.viewer.search.products.pageInfo.hasNextPage}>
                    show more
                  </button>
                </div>
              </div>
              <div style={styles.resultList}>
                <h3>ATRIBUTOS</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>
        </Painel>
      </PageContainer>
    );
  }
}

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: {
    search: null,
    searchProducts: false,
    productQuantity: 6,
    attributeQuantity: 3,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        search(text: $search) @include(if: $searchProducts) {
          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
              }
            }
          }
        }
      }
    `,
  },
});