Merge pull request #148 from algolia/refactor/hits

refactor(hits): Remove unused attributes, set sensible defaults

README.md

@@ -390,12 +390,13 @@ search.addWidget(
  * Display the list of results (hits) from the current search
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
  * @param  {Object} [options.templates] Templates to use for the widget
- * @param  {String|Function} [options.templates.empty=''] Template to use when there are no result
- * @param  {String|Function} [options.templates.hit=''] Template to use for each result
+ * @param  {String|Function} [options.templates.empty=''] Template to use when there are no results.
+ * Gets passed the `result` from the API call.
+ * @param  {String|Function} [options.templates.hit=''] Template to use for each result.
+ * Gets passed the `hit` of the result.
  * @param  {Object} [options.transformData] Method to change the object passed to the templates
  * @param  {Function} [options.transformData.empty=''] Method used to change the object passed to the empty template
  * @param  {Function} [options.transformData.hit=''] Method used to change the object passed to the hit template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @param  {Number} [hitsPerPage=20] The number of hits to display per page
  * @return {Object}
  */

components/Hits.js

@@ -5,19 +5,19 @@ var Template = require('./Template');
 
 class Hits extends React.Component {
   renderWithResults() {
-    var renderedHits = map(this.props.hits, function(hit) {
+    var renderedHits = map(this.props.hits, (hit) => {
       return (
         <this.props.Template templateKey="hit" data={hit} key={hit.objectID} />
       );
-    }, this);
+    });
 
     return <div>{renderedHits}</div>;
   }
 
   renderNoResults() {
     return (
       <div>
-        <this.props.Template data={this.props.results} templateKey="empty" />
+        <this.props.Template templateKey="empty" data={this.props.results}  />
       </div>
     );
   }
@@ -31,9 +31,9 @@ class Hits extends React.Component {
 }
 
 Hits.propTypes = {
+  Template: React.PropTypes.func,
   hits: React.PropTypes.arrayOf(React.PropTypes.object),
-  results: React.PropTypes.object,
-  Template: React.PropTypes.func
+  results: React.PropTypes.object
 };
 
 Hits.defaultProps = {

example/app.js

@@ -46,7 +46,7 @@ search.addWidget(
       empty: require('./templates/no-results.html'),
       hit: require('./templates/hit.html')
     },
-    hitsPerPage: 6
+    hitsPerPage: 10
   })
 );
 

widgets/hits.js

@@ -6,33 +6,40 @@ var bindProps = require('../decorators/bindProps');
 var Template = require('../components/Template');
 
 var defaultTemplates = {
-  empty: 'No matching objects, try another search',
-  hit: 'Object #{{objectID}}, this is the default `hits` template, you should provide one'
+  empty: 'No results',
+  hit: function(data) {
+    return JSON.stringify(data, null, 2);
+  }
 };
 
 /**
  * Display the list of results (hits) from the current search
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
  * @param  {Object} [options.templates] Templates to use for the widget
- * @param  {String|Function} [options.templates.empty=''] Template to use when there are no result
- * @param  {String|Function} [options.templates.hit=''] Template to use for each result
+ * @param  {String|Function} [options.templates.empty=''] Template to use when there are no results.
+ * Gets passed the `result` from the API call.
+ * @param  {String|Function} [options.templates.hit=''] Template to use for each result.
+ * Gets passed the `hit` of the result.
  * @param  {Object} [options.transformData] Method to change the object passed to the templates
  * @param  {Function} [options.transformData.empty=''] Method used to change the object passed to the empty template
  * @param  {Function} [options.transformData.hit=''] Method used to change the object passed to the hit template
- * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @param  {Number} [hitsPerPage=20] The number of hits to display per page
  * @return {Object}
  */
 function hits({
-    container = null,
+    container,
     templates = defaultTemplates,
     transformData,
-    hideWhenNoResults = false,
     hitsPerPage = 20
   }) {
   var Hits = require('../components/Hits');
 
   var containerNode = utils.getContainerNode(container);
+  var usage = 'Usage: hits({container, [templates.{empty,hit}, transformData.{empty,hit}, hitsPerPage])';
+
+  if (container === null) {
+    throw new Error(usage);
+  }
 
   return {
     getConfiguration: () => ({hitsPerPage}),
@@ -46,11 +53,9 @@ function hits({
 
       React.render(
         <Hits
+          Template={bindProps(Template, templateProps)}
           hits={results.hits}
           results={results}
-          Template={bindProps(Template, templateProps)}
-          hideWhenNoResults={hideWhenNoResults}
-          hasResults={results.hits.length > 0}
         />,
         containerNode
       );