algolia / react-algoliasearch-helper

[DEPRECATED] see react-instantsearch: https://community.algolia.com/react-instantsearch/

--- NOTE FROM MAINTAINERS --- (Mar 2017) This project is deprecated. Used react-instantsearch --- / NOTE FROM MAINTAINERS ---

react-algoliasearch-helper

React <Provider> and connect(WrappedComponent) for algoliasearch-helper.

Its goal is to make building React applications with Algolia easier by allowing easy access to the algoliasearch-helper.

Table of Contents

• Install
• Example
• API
• Tests
• Dev
• Release

Install

npm install react-algoliasearch-helper --save

Example

SearchBox.js

import React from 'react';
import {connect} from 'react-algoliasearch-helper';

export default connect()(
  ({helper}) =>
    <input
      placeholder="Search here"
      autoFocus
      onChange={e => helper.setQuery(e.target.value).search()}
    />
);

Hits.js

import React, {PropTypes} from 'react';
import {connect} from 'react-algoliasearch-helper';

const Results = ({results}) => {
  if (!results) return <div/>;
  return <div>{results.hits.map(hit => <div key={hit.objectID}>{hit.Name}</div>)}</div>;
};

Results.propTypes = {
  results: PropTypes.object
};

export default connect(
  state => ({results: state.searchResults})
)(Results);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import algoliasearch from 'algoliasearch';
import algoliasearchHelper from 'algoliasearch-helper';
import {Provider} from 'react-algoliasearch-helper';
import SearchBox from './components/SearchBox.js';
import Hits from './components/Hits.js';

const client = algoliasearch('latency', 'ffc36feb6e9df06e1c3c4549b5af2b31');
const helper = algoliasearchHelper(client, 'starbucks');

const App = () =>
  <Provider helper={helper}>
    <div>
      <SearchBox/>
      <Hits/>
    </div>
  </Provider>;

ReactDOM.render(<App/>, document.querySelector('#root'));

API

<Provider helper>

Makes the Algolia Search helper available to the connect() calls in the component hierarchy below. You can’t use connect() without wrapping your root component in .

Props

• helper (algoliasearch-helper-js):
• children (ReactElement) The root of your component hierarchy.

Example

ReactDOM.render(
  <Provider helper={helper}>
    <MyRootComponent />
  </Provider>,
  rootEl
)

connect([mapStateToProps])(WrappedComponent)

Connects a React component to the helper.

Arguments

• [mapStateToProps(state, ownProps): stateProps] (function): if specified, the component will subscribe to helper events (change, search, result, error). Allowing you to compute props for your wrapper component based on the search state.

Search state shape

Every function passed to mapStateToProps argument of connect will be given an search state object with those properties:

• searching (boolean): true when a search request is pending, false otherwise
• searchParameters (object): helper's SearchParameters
• searchResults (object): helper's SearchResults
• searchResultsSearchParameters (object): SearchParameters that yielded the current SearchResults
• searchError (Error): When the search fails

Remarks

• It needs to be invoked two times. The first time with its arguments described above, and a second time, with the component: connect([mapStateToProps])(WrappedComponent).
• It does not modify the passed React component. It returns a new, connected component, that you should use instead.
• Most probably, you will use connect as in export default connect()(WrappedComponent).

Examples

Forward helper to the RefinementList component:

export default connect()(RefinementList)

Receive results in the Hits component:

export default connect(
  state =>
    ({
      results: state.searchResults
    })
)(Hits) // Hits component will receive a `results` property everytime new results are available

Tests

Tests are written with Jest.

npm test
npm run test:watch
npm run lint

Dev

npm start

Release

npm run release

react-algoliasearch-helper's Issues

Component Render atleast 5 times before final results

Hello,

When I put console.log inside connect's mapStateToProps, I can see that it prints out atleast 5 times. My component only has algolia state and I have done helper.search once in componentDidMount.

Is it something which is caused by the library itself or there is a problem with my app?

One query overrides the last (rather than adding to it...)

Whenever I change the search query in one of the SearchEnabledComponents I've added to dev (in my fork), it replaces the entire query, rather than adding to or amending the current one.

For example: If I create a text query of “something" using the SearchBox component you made, but then try to refine it with a disjunctiveFacet of “type: this” using another HOC-wrapped component, the facet applies a filter of “type: that"; but removes the original text query.

Is this because the current query isn’t being shared across all Components, or because the instance of “helper” in each component is considered different, and thus creates it’s own query?

I've noticed that when I inspect the helper prop in each of my components, helper.state doesn't reflect the current state, and instead reflects the initial, default state. Logging helper.state in the .on('change') in the Provider does output the correct state. Could this be the root of the issue? Do I need to a way to force that update down to all the SECs?

I've put together a demo in my fork of the project.

Pass data between components using URL

Hello,

I wanted to know how can I pass data across components without using state. Since I am building a web application, there can be various instances when the user refreshes the page.

The only value I have is the url from which I can take cues and add refinements back in my componentDidMount method.

I see that I can use getStateAsQueryString to generate the url, however I could not find any method that can convert it back to refinements and add it automatically for me. Do I need to parse it manually?

Since I have already used instantsearch.js to integrate my desktop application, I am sure there is a way to convert it back.

TypeError: Cannot read property 'shape' of undefined

Hello,

I'm receiving this error trying to implement custom search to our React app. Any idea what's wrong?

This is the following code.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import config from '../../config';
import SearchBox from './box';

import algoliaSearch from 'algoliasearch';
import algoliaSearchHelper from 'algoliasearch-helper';
import {Provider} from 'react-algoliasearch-helper';

const client = algoliaSearch(config.ALGOLIA_APP_ID, config.API_KEY);

export default class Search extends Component {
  static propTypes = {
    indexName: PropTypes.string.isRequired
  }

  constructor(props) {
    super(props);

    this.helper = algoliaSearchHelper(client, props.indexName);
  }

  render() {
    return (
      <Provider helper={this.helper}>
        <SearchBox />
      </Provider>
    );
  }
}

Our searchbox:

import React, {Component} from 'react';
import {connect} from 'react-algoliasearch-helper';
import {Dropdown} from 'semantic-ui-react';


class SearchBox extends Component {
  onChange(e) {
    const {helper} = this.props;

    helper.setQuery(e.target.value).search();
  }
  render() {
    console.log(this.props);
    return (
      <Dropdown
        placeholder="Search"
        fluid
        onChange={(e) => this.onChange(e)} />
    );
  }
}

export default connect()(SearchBox);

Usage with React Redux

I have just started using react and I am trying to integrate algolia in my react application.
I see that the plugin has its own provider and connect which is same as react-redux. How do I integrate both of them?

Thanks!

Make two separate queries in same Component

How can I have two search queries made at the same time and retrieve the results? Do I need to maintain Redux state to store the results? or is there any other way?

Real Library™️

This project is now pretty stable, let's make it a real library and not wait too long before writing tests.

• tests
• https://github.com/algolia/eslint-config-algolia
• release process (npm only)
• API docs and examples (README.md, codepen)
• main entrypoint (import {connect} from 'algoliasearch-helper-provider')
• use webpack dev server cli
• rename to react-algoliasearch-helper-provider

Dynamically change helper configuration from inside the component

I wanted to know how can I change the helper configuration inside the component. There are certain cases when I want to set distinct to true and sometimes to false. There can be cases when I want to add any field to facet configuration.