fix(react-router): search was triggered two many times (#1840)

#1834
algolia · Jan 18, 2017 · 25e9db5 · 25e9db5
1 parent 9b4c602
commit 25e9db5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 39 deletions.
diff --git a/packages/react-instantsearch/examples/react-router/src/App.js b/packages/react-instantsearch/examples/react-router/src/App.js
@@ -7,6 +7,7 @@ import {
 import {withRouter} from 'react-router';
 import 'react-instantsearch-theme-algolia/style.css';
 import qs from 'qs';
+import {isEqual} from 'lodash';
 
 class App extends Component {
   constructor(props) {
@@ -18,6 +19,10 @@ class App extends Component {
     this.setState({searchState: qs.parse(this.props.router.location.query)});
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return !isEqual(this.state.searchState, nextState.searchState);
+  }
+
   onSearchStateChange(nextSearchState) {
     const THRESHOLD = 700;
     const newPush = Date.now();

diff --git a/packages/react-instantsearch/src/core/createConnector.js b/packages/react-instantsearch/src/core/createConnector.js
@@ -1,5 +1,5 @@
 import React, {PropTypes, Component} from 'react';
-import {has} from 'lodash';
+import {has, isEqual} from 'lodash';
 
 import {shallowEqual, getDisplayName} from './utils';
 
@@ -97,7 +97,7 @@ export default function createConnector(connectorDesc) {
     }
 
     componentWillReceiveProps(nextProps) {
-      if (!shallowEqual(this.props, nextProps)) {
+      if (!isEqual(this.props, nextProps)) {
         this.setState({
           props: this.getProvidedProps(nextProps),
         });

diff --git a/packages/react-instantsearch/src/core/createConnector.test.js b/packages/react-instantsearch/src/core/createConnector.test.js
@@ -31,14 +31,16 @@ describe('createConnector', () => {
       const props = {
         hello: 'there',
       };
-      const wrapper = mount(<Connected {...props} />, {context: {
-        ais: {
-          store: {
-            getState: () => state,
-            subscribe: () => null,
+      const wrapper = mount(<Connected {...props} />, {
+        context: {
+          ais: {
+            store: {
+              getState: () => state,
+              subscribe: () => null,
+            },
           },
         },
-      }});
+      });
       const args = getProvidedProps.mock.calls[0];
       expect(args[0]).toEqual(props);
       expect(args[1]).toBe(state.widgets);
@@ -59,14 +61,16 @@ describe('createConnector', () => {
       })(Dummy);
       const state = createState();
       let props = {hello: 'there'};
-      const wrapper = mount(<Connected {...props} />, {context: {
-        ais: {
-          store: {
-            getState: () => state,
-            subscribe: () => null,
+      const wrapper = mount(<Connected {...props} />, {
+        context: {
+          ais: {
+            store: {
+              getState: () => state,
+              subscribe: () => null,
+            },
           },
         },
-      }});
+      });
       props = {hello: 'you'};
       wrapper.setProps(props);
       expect(getProvidedProps.mock.calls.length).toBe(2);
@@ -98,16 +102,18 @@ describe('createConnector', () => {
         hello: 'there',
       };
       let listener;
-      const wrapper = mount(<Connected {...props} />, {context: {
-        ais: {
-          store: {
-            getState: () => state,
-            subscribe: l => {
-              listener = l;
+      const wrapper = mount(<Connected {...props} />, {
+        context: {
+          ais: {
+            store: {
+              getState: () => state,
+              subscribe: l => {
+                listener = l;
+              },
             },
           },
         },
-      }});
+      });
       expect(wrapper.find(Dummy).props()).toEqual({...props, ...state.widgets});
       state = {
         ...createState(),
@@ -134,40 +140,53 @@ describe('createConnector', () => {
         getId,
       })(() => null);
       const unsubscribe = jest.fn();
-      const wrapper = mount(<Connected />, {context: {
-        ais: {
-          store: {
-            getState: () => ({}),
-            subscribe: () => unsubscribe,
+      const wrapper = mount(<Connected />, {
+        context: {
+          ais: {
+            store: {
+              getState: () => ({}),
+              subscribe: () => unsubscribe,
+            },
           },
         },
-      }});
+      });
       expect(unsubscribe.mock.calls.length).toBe(0);
       wrapper.unmount();
       expect(unsubscribe.mock.calls.length).toBe(1);
     });
 
     it('doesn\'t update the component when passed props don\'t change', () => {
-      const getProvidedProps = jest.fn(() => {});
+      const getProvidedProps = jest.fn(() => {
+      });
+      const getSearchParameters = jest.fn(() => {
+      });
+      const update = jest.fn();
       const Dummy = jest.fn(() => null);
       const Connected = createConnector({
         displayName: 'CoolConnector',
         getProvidedProps,
+        getSearchParameters,
         getId,
       })(Dummy);
-      const wrapper = mount(<Connected />, {context: {
-        ais: {
-          store: {
-            getState: () => ({}),
-            subscribe: () => null,
+      const wrapper = mount(<Connected />, {
+        context: {
+          ais: {
+            store: {
+              getState: () => ({}),
+              subscribe: () => null,
+            },
+            widgetsManager: {
+              registerWidget: () => null,
+              update,
+            },
           },
         },
-      }});
-      expect(Dummy.mock.calls.length).toBe(1);
-      wrapper.setProps({hello: 'there'});
-      expect(Dummy.mock.calls.length).toBe(2);
-      wrapper.setProps({hello: 'there'});
-      expect(Dummy.mock.calls.length).toBe(2);
+      });
+      expect(update.mock.calls.length).toBe(0);
+      wrapper.setProps({hello: 'there', another: ['one', 'two']});
+      expect(update.mock.calls.length).toBe(1);
+      wrapper.setProps({hello: 'there', another: ['one', 'two']});
+      expect(update.mock.calls.length).toBe(1);
     });
   });