refactor(connectStateResults): remove usage of createConnector for co…

…nditional display (#475) * refactor(connectStateResults): remove usage of createConnector for conditional display * remove duplicate imports * fix react native code * remove console.log
algolia · Oct 16, 2017 · eb45d9a · eb45d9a
1 parent faba1ad
commit eb45d9a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 63 deletions.
diff --git a/docgen/src/examples/default-theme/App.js b/docgen/src/examples/default-theme/App.js
@@ -1,6 +1,5 @@
 /* eslint react/prop-types: 0 */
 import React from 'react';
-import { createConnector } from 'react-instantsearch';
 import {
   InstantSearch,
   Hits,
@@ -16,6 +15,7 @@ import {
   Highlight,
   Configure,
 } from 'react-instantsearch/dom';
+import { connectStateResults } from 'react-instantsearch/connectors';
 import { withUrlSync } from '../urlSync';
 import 'react-instantsearch-theme-algolia/style.scss';
 
@@ -118,21 +118,13 @@ const Hit = ({ hit }) => {
   );
 };
 
-const CustomResults = createConnector({
-  displayName: 'CustomResults',
-
-  getProvidedProps(props, searchState, searchResults) {
-    const noResults = searchResults.results
-      ? searchResults.results.nbHits === 0
-      : false;
-    return { query: searchState.query, noResults };
-  },
-})(({ noResults, query }) => {
-  if (noResults) {
+const CustomResults = connectStateResults(({ searchState, searchResult }) => {
+  if (searchResult && searchResult.nbHits === 0) {
     return (
       <div className="results-wrapper">
         <div className="no-results">
-          No results found matching <span className="query">{query}</span>
+          No results found matching{' '}
+          <span className="query">{searchState.query}</span>
         </div>
       </div>
     );

diff --git a/docgen/src/examples/e-commerce-infinite/App.js b/docgen/src/examples/e-commerce-infinite/App.js
@@ -1,7 +1,6 @@
 /* eslint react/prop-types: 0 */
 
 import React from 'react';
-import { createConnector } from 'react-instantsearch';
 import {
   InstantSearch,
   HierarchicalMenu,
@@ -19,6 +18,7 @@ import {
   connectSearchBox,
   connectRefinementList,
   connectInfiniteHits,
+  connectStateResults,
 } from 'react-instantsearch/connectors';
 import 'react-instantsearch-theme-algolia/style.scss';
 
@@ -176,7 +176,7 @@ const Hit = ({ item }) => {
   for (let i = 0; i < 5; i++) {
     const suffix = i >= item.rating ? '_empty' : '';
     icons.push(
-      <label key={i} label className={`ais-StarRating__ratingIcon${suffix}`} />
+      <label key={i} className={`ais-StarRating__ratingIcon${suffix}`} />
     );
   }
   return (
@@ -204,21 +204,13 @@ const Hit = ({ item }) => {
   );
 };
 
-const CustomResults = createConnector({
-  displayName: 'CustomResults',
-
-  getProvidedProps(props, searchState, searchResults) {
-    const noResults = searchResults.results
-      ? searchResults.results.nbHits === 0
-      : false;
-    return { query: searchState.query, noResults };
-  },
-})(({ noResults, query }) => {
-  if (noResults) {
+const CustomResults = connectStateResults(({ searchState, searchResult }) => {
+  if (searchResult && searchResult.nbHits === 0) {
     return (
       <div className="results-wrapper">
         <div className="no-results">
-          No results found matching <span className="query">{query}</span>
+          No results found matching{' '}
+          <span className="query">{searchState.query}</span>
         </div>
       </div>
     );

diff --git a/docgen/src/examples/e-commerce/App.js b/docgen/src/examples/e-commerce/App.js
@@ -1,7 +1,6 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/prop-types: 0 */
 import React from 'react';
-import { createConnector } from 'react-instantsearch';
 import {
   InstantSearch,
   HierarchicalMenu,
@@ -20,6 +19,7 @@ import {
   connectSearchBox,
   connectRefinementList,
   connectHits,
+  connectStateResults,
 } from 'react-instantsearch/connectors';
 import { withUrlSync } from '../urlSync';
 import 'react-instantsearch-theme-algolia/style.scss';
@@ -169,7 +169,7 @@ const Hit = ({ item }) => {
   for (let i = 0; i < 5; i++) {
     const suffix = i >= item.rating ? '_empty' : '';
     icons.push(
-      <label key={i} label className={`ais-StarRating__ratingIcon${suffix}`} />
+      <label key={i} className={`ais-StarRating__ratingIcon${suffix}`} />
     );
   }
   return (
@@ -197,21 +197,13 @@ const Hit = ({ item }) => {
   );
 };
 
-const CustomResults = createConnector({
-  displayName: 'CustomResults',
-
-  getProvidedProps(props, searchState, searchResults) {
-    const noResults = searchResults.results
-      ? searchResults.results.nbHits === 0
-      : false;
-    return { query: searchState.query, noResults };
-  },
-})(({ noResults, query }) => {
-  if (noResults) {
+const CustomResults = connectStateResults(({ searchState, searchResult }) => {
+  if (searchResult && searchResult.nbHits === 0) {
     return (
       <div className="results-wrapper">
         <div className="no-results">
-          No results found matching <span className="query">{query}</span>
+          No results found matching{' '}
+          <span className="query">{searchState.query}</span>
         </div>
       </div>
     );

diff --git a/packages/react-instantsearch/examples/react-native/src/components/Spinner.js b/packages/react-instantsearch/examples/react-native/src/components/Spinner.js
@@ -1,27 +1,22 @@
 import React from 'react';
 import { ActivityIndicator, View, Dimensions } from 'react-native';
-import { createConnector } from 'react-instantsearch';
+import { connectStateResults } from 'react-instantsearch/connectors';
 
 const { width, height } = Dimensions.get('window');
 
-export default createConnector({
-  displayName: 'ConditionalQuery',
-  getProvidedProps(props, searchState, results) {
-    return {
-      loading: results.searching || results.searchingForFacetValues,
-      left: props.left ? props.left : 0,
-      bottom: props.bottom ? props.bottom : height - 20,
-    };
-  },
-})(({ loading, left, bottom }) => (
-  <View
-    style={{
-      position: 'absolute',
-      left: width - left,
-      bottom: height - bottom,
-      zIndex: 2,
-    }}
-  >
-    <ActivityIndicator animating={loading} />
-  </View>
-));
+export default connectStateResults(({ searching, props }) => {
+  const left = props.left ? props.left : 0;
+  const bottom = props.bottom ? props.bottom : height - 20;
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: width - left,
+        bottom: height - bottom,
+        zIndex: 2,
+      }}
+    >
+      <ActivityIndicator animating={searching} />
+    </View>
+  );
+});