From 32ec6b09b316905ff4c7cbd56c35f41be0cd272c Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Tue, 29 Sep 2015 15:08:14 +0200
Subject: [PATCH] refactor(hits): Remove unused attributes, set sensible
 defaults

- Set JSON.stringify as default template
- Removing unused attributes (`hideWhenNoResults`, `hasResults`)
- Throw error if no valid container node
- Small ES6 changes
- Sorting of attributes
---
 README.md          |  7 ++++---
 components/Hits.js | 10 +++++-----
 example/app.js     |  2 +-
 widgets/hits.js    | 25 +++++++++++++++----------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 46c133653c..63f1eed37e 100644
--- a/README.md
+++ b/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}
  */
diff --git a/components/Hits.js b/components/Hits.js
index 3106e92dc0..2b403c52b1 100644
--- a/components/Hits.js
+++ b/components/Hits.js
@@ -5,11 +5,11 @@ 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>;
   }
@@ -17,7 +17,7 @@ class Hits extends React.Component {
   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 = {
diff --git a/example/app.js b/example/app.js
index 83eefd3727..d6ffcfef4a 100644
--- a/example/app.js
+++ b/example/app.js
@@ -46,7 +46,7 @@ search.addWidget(
       empty: require('./templates/no-results.html'),
       hit: require('./templates/hit.html')
     },
-    hitsPerPage: 6
+    hitsPerPage: 10
   })
 );
 
diff --git a/widgets/hits.js b/widgets/hits.js
index 41112cbfb6..fff4044875 100644
--- a/widgets/hits.js
+++ b/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
       );