Search example

actionCreators_search.js

import { pushState } from 'redux-router';

export function createSearchQuery({ query }) {
  return (dispatch) => {
    if (query) {
      dispatch(pushState(null, '/search', { q: query }));
    }
  };
}

SearchBoxContainer.js

import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { injectIntl } from 'react-intl';

import { createSearchQuery } from '../../actionCreators/search';

import SearchBox from './SearchBox';

export default compose(
  connect(
    null,
    {
      onSubmit: createSearchQuery,
    }
  ),
  injectIntl,
  reduxForm({
    form: 'SearchBoxForm',
    fields: ['query'],
  })
)(SearchBox);

SearchPageContainer.js

import React from 'react';
import Relay from 'react-relay';
import { compose } from 'redux';
import { connect } from 'react-redux';
import relay from 'frontend/utils/relay';
import propsToRelay from 'frontend/utils/propsToRelay';

import SearchPage from './SearchPage';
import { GoodContainer } from '../../../shop/components/Good';

export default compose(
  propsToRelay(props => ({
    text: props.location.query.q,
  })),
  relay({
    initialVariables: {
      text: null,
      first: 9,
    },

    fragments: {
      viewer: () => Relay.QL`
        fragment on Viewer {
          search {
            goods(text: $text, first: $first) {
              edges {
                node {
                  id
                  ${GoodContainer.getFragment('good')}
                }
              }
            }
          }
        }
      `,
    },
  }),
  connect(
    null,
    null,
    (stateProps, actionProps, parentProps) => ({
      ...parentProps,
      onNextPageRequest: () => {
        parentProps.relay.setVariables({
          first: parentProps.relay.variables.first + 9,
        });
      },
      children: parentProps.viewer.search.goods.edges.map(({ node }) => (
        <GoodContainer
          key={node.id}
          good={node}
        />
      )),
    })
  )
)(SearchPage);

utils_propsToRelay.js

import React from 'react';
import Relay from 'react-relay';

export default function propsToRelay(getter) {
  return Component => {
    return class extends React.Component {
      static displayName = `PropsToRelay(${Component.displayName || Component.name || ''})`;

      render() {
        const route = {
          name: 'PropsToRelayRoute',
          params: getter(this.props),
          queries: {
            viewer: (Comp, params) => Relay.QL`
              query {
                viewer {
                  ${Comp.getFragment('viewer', params)}
                }
              }
            `,
          },
        };

        return (
          <Relay.RootContainer
            Component={Component}
            route={route}
          />
        );
      }
    };
  };
}