fix: hits widget should allow hitsPerPage configuration, pagination should not

Author: vvo

components/Hits/index.js

@@ -7,27 +7,46 @@ var TemplateFn = require('../templates/Function');
 
 class Hits extends React.Component {
   render() {
-    var results = this.props.results;
-    if (!results || !results.hits || results.hits.length === 0) {
-      return this.renderNoResults(results, this.props.noResultsTemplate);
+    if (this.props.hits.length === 0) {
+      return this.renderNoResults();
     }
-    return this.renderWithResults(results.hits, this.props.hitTemplate);
+
+    return this.renderWithResults();
   }
-  renderWithResults(hits, hitTemplate) {
-    var TemplateComponent = isString(hitTemplate) ? Hogan : TemplateFn;
-    var renderedHits = map(hits, function(hit) {
-      return <TemplateComponent data={hit} key={hit.objectID} template={hitTemplate} />;
-    });
-    return <div className="search_list search_results_container row">{renderedHits}</div>;
+
+  renderWithResults() {
+    var TemplateComponent = isString(this.props.hitTemplate) ? Hogan : TemplateFn;
+
+    var renderedHits = map(this.props.hits, function(hit) {
+      return <TemplateComponent data={hit} key={hit.objectID} template={this.props.hitTemplate} />;
+    }, this);
+
+    return <div>{renderedHits}</div>;
   }
-  renderNoResults(results, noResultsTemplate) {
-    var TemplateComponent = isString(noResultsTemplate) ? Hogan : TemplateFn;
+
+  renderNoResults() {
+    var TemplateComponent = isString(this.props.noResultsTemplate) ? Hogan : TemplateFn;
+
     return (
-      <div className="search_list search_results_container row">
-        <TemplateComponent data={results} template={noResultsTemplate} />
-      </div>
+      <div><TemplateComponent template={this.props.noResultsTemplate} /></div>
     );
   }
 }
 
+Hits.propTypes = {
+  hits: React.PropTypes.array,
+  hitTemplate: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.func
+  ]).isRequired,
+  noResultsTemplate: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.func
+  ]).isRequired
+};
+
+Hits.defaultProps = {
+  hits: []
+};
+
 module.exports = Hits;

example/app.js

@@ -20,17 +20,17 @@ instant.addWidget(
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      noResults: require('./templates/no-results.html'),
+      empty: require('./templates/no-results.html'),
       hit: require('./templates/hit.html')
-    }
+    },
+    hitsPerPage: 5
   })
 );
 
 instant.addWidget(
   instantsearch.widgets.pagination({
     container: '#pagination',
     cssClass: 'pagination',
-    hitsPerPage: 5,
     maxPages: 20
   })
 );

widgets/hits/index.js

@@ -2,17 +2,18 @@ var React = require('react');
 
 var utils = require('../../lib/widgetUtils.js');
 
-function hits(params) {
+function hits({container=null, templates={}, hitsPerPage=20}) {
   var Hits = require('../../components/Hits');
-  var containerNode = utils.getContainerNode(params.container);
+  var containerNode = utils.getContainerNode(container);
 
   return {
+    getConfiguration: () => ({hitsPerPage}),
     render: function(results, state, helper) {
       React.render(
-        <Hits results={results}
+        <Hits hits={results.hits}
           helper={helper}
-          noResultsTemplate={params.templates.noResults}
-          hitTemplate={params.templates.hit} />,
+          noResultsTemplate={templates.empty}
+          hitTemplate={templates.hit} />,
         containerNode
       );
     }

widgets/pagination/index.js

@@ -2,16 +2,11 @@ var React = require('react');
 
 var utils = require('../../lib/widgetUtils.js');
 
-function hits({container, cssClass, labels, hitsPerPage=20, maxPages}={}) {
+function hits({container, cssClass, labels, maxPages}={}) {
   var Pagination = require('../../components/Pagination/');
   var containerNode = utils.getContainerNode(container);
 
   return {
-    getConfiguration: function() {
-      return {
-        hitsPerPage
-      };
-    },
     render: function(results, state, helper) {
       var nbPages = maxPages !== undefined ? maxPages : results.nbPages;