fix(MultiIndex): Trigger new search when <Index> props are updated (#…

…318) * fix(MultiIndex): Index props we're not updated if change * fix: Mono index was broken because of getMetadata
algolia · Sep 13, 2017 · bb11965 · bb11965
1 parent cb129ab
commit bb11965
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 72 deletions.
diff --git a/packages/react-instantsearch/examples/react-native/yarn.lock b/packages/react-instantsearch/examples/react-native/yarn.lock
@@ -4720,9 +4720,9 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-"react-native-drawer@git+https://github.com/GeekyAnts/react-native-drawer.git":
+"react-native-drawer@https://github.com/GeekyAnts/react-native-drawer":
   version "2.3.0"
-  resolved "git+https://github.com/GeekyAnts/react-native-drawer.git#8d9078516d177c9cb02d2579a6860706d2370d25"
+  resolved "https://github.com/GeekyAnts/react-native-drawer#8d9078516d177c9cb02d2579a6860706d2370d25"
   dependencies:
     prop-types "^15.5.8"
     tween-functions "^1.0.1"
@@ -4737,9 +4737,9 @@ react-native-gesture-handler@^1.0.0-alpha.14:
   version "1.0.0-alpha.19"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.0.0-alpha.19.tgz#7ae7cc218549791d82ad28c083942e8da4f867a7"
 
-"react-native-keyboard-aware-scroll-view@git+https://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git":
+"react-native-keyboard-aware-scroll-view@https://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view":
   version "0.2.9"
-  resolved "git+https://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view.git#f4805f254d6cc8e3329f5fb224944401f66655db"
+  resolved "https://github.com/GeekyAnts/react-native-keyboard-aware-scroll-view#f4805f254d6cc8e3329f5fb224944401f66655db"
   dependencies:
     create-react-class "^15.6.0"
     prop-types "^15.5.10"
@@ -6117,7 +6117,7 @@ webidl-conversions@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
-"websql@github:expo/node-websql#18.0.0":
+websql@expo/node-websql#18.0.0:
   version "0.4.4"
   resolved "https://codeload.github.com/expo/node-websql/tar.gz/e364fa65146a9e2157a19e5c719e7702c2b6b87a"
   dependencies:

diff --git a/packages/react-instantsearch/src/core/Index.js b/packages/react-instantsearch/src/core/Index.js
@@ -40,13 +40,7 @@ class Index extends Component {
      It means that with only <Index> present a new query will be sent to Algolia.
      That way you don't need a virtual hits widget to use the connectAutoComplete. 
     */
-    this.unregisterWidget = widgetsManager.registerWidget({
-      getSearchParameters: searchParameters =>
-        this.getSearchParameters(searchParameters, this.props),
-      multiIndexContext: {
-        targetedIndex: this.props.indexName,
-      },
-    });
+    this.unregisterWidget = widgetsManager.registerWidget(this);
   }
 
   componentWillMount() {
@@ -57,6 +51,12 @@ class Index extends Component {
     );
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.indexName !== nextProps.indexName) {
+      this.context.ais.widgetsManager.update();
+    }
+  }
+
   componentWillUnmount() {
     this.unregisterWidget();
   }
@@ -70,7 +70,9 @@ class Index extends Component {
   }
 
   getSearchParameters(searchParameters, props) {
-    return searchParameters.setIndex(props.indexName);
+    return searchParameters.setIndex(
+      this.props ? this.props.indexName : props.indexName
+    );
   }
 
   render() {

diff --git a/packages/react-instantsearch/src/core/Index.test.js b/packages/react-instantsearch/src/core/Index.test.js
@@ -15,12 +15,14 @@ describe('Index', () => {
   };
 
   const registerWidget = jest.fn();
-  const widgetsManager = { registerWidget };
+  const update = jest.fn();
+  const widgetsManager = { registerWidget, update };
 
   let context = {
     ais: {
       widgetsManager,
       onSearchParameters: () => {},
+      update,
     },
   };
 
@@ -65,6 +67,19 @@ describe('Index', () => {
     );
   });
 
+  it('update search if indexName prop change', () => {
+    const wrapper = mount(
+      <Index {...DEFAULT_PROPS}>
+        <div />
+      </Index>,
+      { context }
+    );
+
+    wrapper.setProps({ indexName: 'newIndexName' });
+
+    expect(update.mock.calls.length).toBe(1);
+  });
+
   it('calls onSearchParameters when mounted', () => {
     const onSearchParameters = jest.fn();
     context = {

diff --git a/packages/react-instantsearch/src/core/createConnector.js b/packages/react-instantsearch/src/core/createConnector.js
@@ -61,7 +61,7 @@ export default function createConnector(connectorDesc) {
       constructor(props, context) {
         super(props, context);
 
-        const { ais: { store, widgetsManager }, multiIndexContext } = context;
+        const { ais: { store, widgetsManager } } = context;
         const canRender = false;
         this.state = {
           props: this.getProvidedProps({ ...props, canRender }),
@@ -78,37 +78,44 @@ export default function createConnector(connectorDesc) {
             });
           }
         });
-
-        const getSearchParameters = hasSearchParameters
-          ? searchParameters =>
-              connectorDesc.getSearchParameters.call(
-                this,
-                searchParameters,
-                this.props,
-                store.getState().widgets
-              )
-          : null;
-        const getMetadata = hasMetadata
-          ? nextWidgetsState =>
-              connectorDesc.getMetadata.call(this, this.props, nextWidgetsState)
-          : null;
-        const transitionState = hasTransitionState
-          ? (prevWidgetsState, nextWidgetsState) =>
-              connectorDesc.transitionState.call(
-                this,
-                this.props,
-                prevWidgetsState,
-                nextWidgetsState
-              )
-          : null;
         if (isWidget) {
-          this.unregisterWidget = widgetsManager.registerWidget({
-            getSearchParameters,
-            getMetadata,
-            transitionState,
-            multiIndexContext,
-          });
+          this.unregisterWidget = widgetsManager.registerWidget(this);
+        }
+      }
+
+      getMetadata(nextWidgetsState) {
+        if (hasMetadata) {
+          return connectorDesc.getMetadata.call(
+            this,
+            this.props,
+            nextWidgetsState
+          );
+        }
+        return {};
+      }
+
+      getSearchParameters(searchParameters) {
+        if (hasSearchParameters) {
+          return connectorDesc.getSearchParameters.call(
+            this,
+            searchParameters,
+            this.props,
+            this.context.ais.store.getState().widgets
+          );
+        }
+        return null;
+      }
+
+      transitionState(prevWidgetsState, nextWidgetsState) {
+        if (hasTransitionState) {
+          return connectorDesc.transitionState.call(
+            this,
+            this.props,
+            prevWidgetsState,
+            nextWidgetsState
+          );
         }
+        return nextWidgetsState;
       }
 
       componentDidMount() {

diff --git a/packages/react-instantsearch/src/core/createInstantSearchManager.derived.test.js b/packages/react-instantsearch/src/core/createInstantSearchManager.derived.test.js
@@ -55,21 +55,26 @@ describe('createInstantSearchManager', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('first query 1'),
+          context: {},
+          props: {},
         });
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('second query 1'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: {},
         });
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setPage(3),
-          multiIndexContext: { targetedIndex: 'first' },
+          context: { multiIndexContext: { targetedIndex: 'first' } },
+          props: {},
         });
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setIndex('second'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: { indexName: 'second' },
         });
 
         expect(ism.store.getState().results).toBe(null);
@@ -127,18 +132,23 @@ describe('createInstantSearchManager', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('first query 1'),
+          context: {},
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('second query 1'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setPage(3),
-          multiIndexContext: { targetedIndex: 'first' },
+          context: { multiIndexContext: { targetedIndex: 'first' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setIndex('second'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: { indexName: 'second' },
         });
 
         ism.onExternalStateUpdate({});
@@ -170,18 +180,23 @@ describe('createInstantSearchManager', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('first query 1'),
+          context: {},
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('second query 1'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setPage(3),
-          multiIndexContext: { targetedIndex: 'first' },
+          context: { multiIndexContext: { targetedIndex: 'first' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setIndex('second'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: { indexName: 'second' },
         });
 
         ism.onExternalStateUpdate({});
@@ -222,15 +237,18 @@ describe('createInstantSearchManager', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('second query 2'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setPage(3),
-          multiIndexContext: { targetedIndex: 'first' },
+          context: { multiIndexContext: { targetedIndex: 'first' } },
+          props: {},
         });
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setIndex('second'),
-          multiIndexContext: { targetedIndex: 'second' },
+          context: { multiIndexContext: { targetedIndex: 'second' } },
+          props: {},
         });
 
         ism.onExternalStateUpdate({});

diff --git a/packages/react-instantsearch/src/core/createInstantSearchManager.error.test.js b/packages/react-instantsearch/src/core/createInstantSearchManager.error.test.js
@@ -51,6 +51,8 @@ describe('createInstantSearchManager errors', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('search'),
+          context: {},
+          props: {},
         });
 
         expect(ism.store.getState().error).toBe(null);
@@ -130,6 +132,8 @@ describe('createInstantSearchManager errors', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('search'),
+          context: {},
+          props: {},
         });
 
         expect(ism.store.getState().error).toBe(null);

diff --git a/packages/react-instantsearch/src/core/createInstantSearchManager.js b/packages/react-instantsearch/src/core/createInstantSearchManager.js
@@ -69,7 +69,11 @@ export default function createInstantSearchManager({
     const sharedParameters = widgetsManager
       .getWidgets()
       .filter(widget => Boolean(widget.getSearchParameters))
-      .filter(widget => !widget.multiIndexContext)
+      .filter(
+        widget =>
+          !widget.context.multiIndexContext &&
+          (widget.props.indexName === indexName || !widget.props.indexName)
+      )
       .reduce(
         (res, widget) => widget.getSearchParameters(res),
         initialSearchParameters
@@ -81,11 +85,14 @@ export default function createInstantSearchManager({
       .filter(widget => Boolean(widget.getSearchParameters))
       .filter(
         widget =>
-          widget.multiIndexContext &&
-          widget.multiIndexContext.targetedIndex !== indexName
+          (widget.context.multiIndexContext &&
+            widget.context.multiIndexContext.targetedIndex !== indexName) ||
+          (widget.props.indexName && widget.props.indexName !== indexName)
       )
       .reduce((indices, widget) => {
-        const targetedIndex = widget.multiIndexContext.targetedIndex;
+        const targetedIndex = widget.context.multiIndexContext
+          ? widget.context.multiIndexContext.targetedIndex
+          : widget.props.indexName;
         const index = indices.find(i => i.targetedIndex === targetedIndex);
         if (index) {
           index.widgets.push(widget);
@@ -100,8 +107,9 @@ export default function createInstantSearchManager({
       .filter(widget => Boolean(widget.getSearchParameters))
       .filter(
         widget =>
-          widget.multiIndexContext &&
-          widget.multiIndexContext.targetedIndex === indexName
+          (widget.context.multiIndexContext &&
+            widget.context.multiIndexContext.targetedIndex === indexName) ||
+          (widget.props.indexName && widget.props.indexName === indexName)
       )
       .reduce(
         (res, widget) => widget.getSearchParameters(res),
@@ -118,7 +126,6 @@ export default function createInstantSearchManager({
         mainIndexParameters,
         derivatedWidgets,
       } = getSearchParameters(helper.state);
-
       Object.keys(derivedHelpers).forEach(key => derivedHelpers[key].detach());
       derivedHelpers = {};
 

diff --git a/packages/react-instantsearch/src/core/createInstantSearchManager.result.test.js b/packages/react-instantsearch/src/core/createInstantSearchManager.result.test.js
@@ -50,6 +50,8 @@ describe('createInstantSearchManager', () => {
 
         ism.widgetsManager.registerWidget({
           getSearchParameters: params => params.setQuery('search'),
+          props: {},
+          context: {},
         });
 
         expect(ism.store.getState().results).toBe(null);