feat(StateResults): give access to status and error (#1151)

* feat(StateResults): give access to status and error

FX-1770

Note that this changes the implementation from connectStateResults to a render listener, as `loading` is otherwise inconsistently visible. This means it will no longer be counted in metadata.

Updated the helper in devDep to use ^ to avoid a duplicate with the InstantSearch.js version

* up margin

Author: Haroenv

package.json

@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.45.0",
+    "instantsearch.js": "^4.47.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -81,7 +81,7 @@
     "@wdio/spec-reporter": "^5.11.7",
     "@wdio/static-server-service": "^5.11.0",
     "algoliasearch": "4.0.1",
-    "algoliasearch-helper": "3.10.0",
+    "algoliasearch-helper": "^3.10.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-preset-es2015": "6.24.1",
@@ -133,11 +133,11 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "56.75 kB"
+      "maxSize": "57.25 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "58.00 kB"
+      "maxSize": "58.25 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

src/__tests__/index.js

@@ -16,6 +16,7 @@ const nonWidgetComponents = [
   'AisSnippet',
   'AisPanel',
   'AisPoweredBy',
+  'AisStateResults',
 ];
 
 function getAllComponents() {

src/components/StateResults.vue

@@ -12,34 +12,77 @@
       </p>
       <pre>results: {{ Object.keys(state.results) }}</pre>
       <pre>state: {{ Object.keys(state.state) }}</pre>
+      <pre>status: {{ state.status }}</pre>
+      <pre>error: {{ state.error }}</pre>
     </slot>
   </div>
 </template>
 
 <script>
+import { isVue3 } from '../util/vue-compat';
 import { createSuitMixin } from '../mixins/suit';
 import { createWidgetMixin } from '../mixins/widget';
 import { _objectSpread } from '../util/polyfills';
-import connectStateResults from '../connectors/connectStateResults';
 
 export default {
   name: 'AisStateResults',
   mixins: [
-    createWidgetMixin(
-      {
-        connector: connectStateResults,
-      },
-      {
-        $$widgetType: 'ais.stateResults',
-      }
-    ),
+    createWidgetMixin({ connector: true }),
     createSuitMixin({ name: 'StateResults' }),
   ],
+  props: {
+    catchError: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderFn: () => {
+        const { status, error } = this.instantSearchInstance;
+        const results = this.getParentIndex().getResults();
+        const helper = this.getParentIndex().getHelper();
+        const state = helper ? helper.state : null;
+
+        // @MAJOR no longer spread this inside `results`
+        this.state = {
+          results,
+          state,
+          status,
+          error,
+        };
+      },
+    };
+  },
+  created() {
+    this.instantSearchInstance.addListener('render', this.renderFn);
+  },
+  [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
+    if (this.widget) {
+      this.instantSearchInstance.removeListener('render', this.renderFn);
+      if (this.errorFn) {
+        this.instantSearchInstance.removeListener('error', this.errorFn);
+      }
+    }
+  },
+  watch: {
+    catchError: {
+      immediate: true,
+      handler(catchError) {
+        if (catchError) {
+          this.errorFn = () => {};
+          this.instantSearchInstance.addListener('error', this.errorFn);
+        } else if (this.errorFn) {
+          this.instantSearchInstance.removeListener('error', this.errorFn);
+          this.errorFn = undefined;
+        }
+      },
+    },
+  },
   computed: {
     stateResults() {
-      // @MAJOR: replace v-bind="stateResults" with :state="state.state" :results="state.results"
-      const { state, results } = this.state;
-      return _objectSpread({}, results, { results, state });
+      const { results, state, status, error } = this.state;
+      return _objectSpread({}, results, { results, state, status, error });
     },
   },
 };

src/components/__tests__/StateResults.js

@@ -13,6 +13,8 @@ it('renders explanation if no slot is used', () => {
     state: {
       query: 'this is the query',
     },
+    status: 'idle',
+    error: undefined,
   });
   const wrapper = mount(StateResults);
   expect(wrapper.html()).toMatchSnapshot();
@@ -39,6 +41,8 @@ it('gives state & results to default slot', () => {
   __setState({
     state,
     results,
+    status: 'idle',
+    error: undefined,
   });
 
   mount(StateResults, {
@@ -47,6 +51,8 @@ it('gives state & results to default slot', () => {
         expect(props).toEqual(expect.objectContaining(results));
         expect(props.results).toEqual(results);
         expect(props.state).toEqual(state);
+        expect(props.status).toEqual('idle');
+        expect(props.error).toEqual(undefined);
       },
     },
   });

src/components/__tests__/__snapshots__/StateResults.js.snap

@@ -20,5 +20,11 @@ exports[`renders explanation if no slot is used 1`] = `
   "query"
 ]
   </pre>
+  <pre>
+    status: idle
+  </pre>
+  <pre>
+    error:
+  </pre>
 </div>
 `;

src/mixins/__mocks__/widget.js

@@ -22,6 +22,16 @@ export const createWidgetMixin = jest.fn(() => ({
     return {
       state,
       widget,
+      instantSearchInstance: {
+        status: 'idle',
+        error: undefined,
+        addListener: () => {},
+        removeListener: () => {},
+      },
+      getParentIndex: () => ({
+        getResults: () => null,
+        getHelper: () => null,
+      }),
     };
   },
 }));

yarn.lock

@@ -1491,10 +1491,10 @@ ajv@^6.5.5, ajv@^6.9.1:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-algoliasearch-helper@3.10.0, algoliasearch-helper@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.10.0.tgz#59a0f645dd3c7e55cf01faa568d1af50c49d36f6"
-  integrity sha512-4E4od8qWWDMVvQ3jaRX6Oks/k35ywD011wAA4LbYMMjOtaZV6VWaTjRr4iN2bdaXP2o1BP7SLFMBf3wvnHmd8Q==
+algoliasearch-helper@^3.10.0, algoliasearch-helper@^3.11.1:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.11.1.tgz#d83ab7f1a2a374440686ef7a144b3c288b01188a"
+  integrity sha512-mvsPN3eK4E0bZG0/WlWJjeqe/bUD2KOEVOl0GyL/TGXn6wcpZU8NOuztGHCUKXkyg5gq6YzUakVTmnmSSO5Yiw==
   dependencies:
     "@algolia/events" "^4.0.1"
 
@@ -8373,22 +8373,22 @@ instantsearch.css@7.3.1:
   resolved "https://registry.yarnpkg.com/instantsearch.css/-/instantsearch.css-7.3.1.tgz#7ab74a8f355091ae040947a9cf5438f379026622"
   integrity sha512-/kaMDna5D+Q9mImNBHEhb9HgHATDOFKYii7N1Iwvrj+lmD9gBJLqVhUw67gftq2O0QI330pFza+CRscIwB1wQQ==
 
-instantsearch.js@^4.45.0:
-  version "4.45.0"
-  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.45.0.tgz#52be36dffd9b6b9616184c783bb8ac1f39ff205c"
-  integrity sha512-gjJDnFJO2yfkmOb0X1mZumqMGHlZIxAVNusnKfNh8s4u6SsRCM9p8S3eJi5aYo3mbS9NrePR8B44/gXh4YGcQQ==
+instantsearch.js@^4.47.0:
+  version "4.47.0"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.47.0.tgz#eb06d4deede956dff9391e577469061e0d7e9c56"
+  integrity sha512-SoIVDGtqKFtGQxcEr2vKo0SxbRjAksRKUDP+kRvD/J6tqx8qVZdSArY3XwvEOmhqee/0wK4p4ZMAJS+NI8M8cg==
   dependencies:
     "@algolia/events" "^4.0.1"
     "@algolia/ui-components-highlight-vdom" "^1.1.2"
     "@algolia/ui-components-shared" "^1.1.2"
     "@types/google.maps" "^3.45.3"
     "@types/hogan.js" "^3.0.0"
     "@types/qs" "^6.5.3"
-    algoliasearch-helper "^3.10.0"
+    algoliasearch-helper "^3.11.1"
     classnames "^2.2.5"
     hogan.js "^3.0.2"
     htm "^3.0.0"
-    preact "^10.6.0"
+    preact "^10.10.0"
     qs "^6.5.1 < 6.10"
     search-insights "^2.1.0"
 
@@ -12311,10 +12311,10 @@ posthtml@^0.10.1:
     posthtml-parser "^0.3.0"
     posthtml-render "^1.0.5"
 
-preact@^10.6.0:
-  version "10.6.4"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.4.tgz#ad12c409ff1b4316158486e0a7b8d43636f7ced8"
-  integrity sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==
+preact@^10.10.0:
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.0.tgz#26af45a0613f4e17a197cc39d7a1ea23e09b2532"
+  integrity sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==
 
 prelude-ls@~1.1.2:
   version "1.1.2"