feat(hits): adds allItems template as an alternative to item

This way the user can specify how to do the complete rendering of
the hits.

Author: Alexandre Stanislawski

dev/app.js

@@ -50,14 +50,25 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.hits({
+    container: '#hits-table',
+    templates: {
+      empty: require('./templates/no-results.html'),
+      allItems: require('./templates/all-items.html')
+    },
+    hitsPerPage: 24
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
       empty: require('./templates/no-results.html'),
       item: require('./templates/item.html')
     },
-    hitsPerPage: 6
+    hitsPerPage: 24
   })
 );
 

dev/index.html

@@ -66,6 +66,9 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
             </div>
           </div>
         </div>
+        <h3>Results overview</h3>
+        <div id="hits-table"></div>
+        <h3>Results</h3>
         <div id="hits"></div>
         <div id="pagination" class="text-center"></div>
       </div>

dev/templates/all-items.html

@@ -0,0 +1,10 @@
+<table class="table table-striped table-condensed">
+  <thead>
+    <tr><th>name</th><th>brand</th><th>price</th></tr>
+  </thead>
+  <tbody>
+  {{#hits}}
+    <tr><td><a href="#hit-{{objectID}}">{{name}}</a></td><td>{{brand}}</td><td>{{price}}</td></tr>
+  {{/hits}}
+  </tbody>
+</table>

dev/templates/item.html

@@ -1,4 +1,4 @@
-<div class="hit">
+<div class="hit" id="hit-{{objectID}}">
   <div class="media">
     <a class="pull-left" href="{{url}}">
       <img class="media-object" src="{{image}}">
@@ -10,4 +10,5 @@ <h4>{{{_highlightResult.name.value}}}</h4>
       {{#free_shipping}}<span class="badge pull-right">Free Shipping</span>{{/free_shipping}}
     </div>
   </div>
+  <a href="#">Go back to top</a>
 </div>

src/components/Hits.js

@@ -20,6 +20,17 @@ class Hits extends React.Component {
     return <div className={this.props.cssClasses.root}>{renderedHits}</div>;
   }
 
+  renderAllResults() {
+    return (
+      <Template
+        cssClass={this.props.cssClasses.allItems}
+        data={this.props.results}
+        templateKey="allItems"
+        {...this.props.templateProps}
+      />
+    );
+  }
+
   renderNoResults() {
     let className = this.props.cssClasses.root + ' ' + this.props.cssClasses.empty;
     return (
@@ -34,6 +45,13 @@ class Hits extends React.Component {
 
   render() {
     if (this.props.results.hits.length > 0) {
+      const useAllItemsTemplate =
+        this.props.templateProps &&
+        this.props.templateProps.templates &&
+        this.props.templateProps.templates.allItems;
+      if (useAllItemsTemplate) {
+        return this.renderAllResults();
+      }
       return this.renderWithResults();
     }
     return this.renderNoResults();
@@ -44,6 +62,7 @@ Hits.propTypes = {
   cssClasses: React.PropTypes.shape({
     root: React.PropTypes.string,
     item: React.PropTypes.string,
+    allItems: React.PropTypes.string,
     empty: React.PropTypes.string
   }),
   results: React.PropTypes.object,

src/components/__tests__/Hits-test.js

@@ -21,7 +21,7 @@ describe('Hits', () => {
     templateProps = {};
   });
 
-  it('render hits when present', () => {
+  it('render hits when present (item template)', () => {
     results = {hits: [{
       objectID: 'hello'
     }, {
@@ -58,6 +58,42 @@ describe('Hits', () => {
     );
   });
 
+  it('render hits when present (allItems template)', () => {
+    results = {hits: [{
+      objectID: 'hello'
+    }, {
+      objectID: 'mom'
+    }]};
+
+    const templateProps2 = {
+      ...templateProps,
+      templates: {
+        allItems: 'all items'
+      }
+    };
+
+    let props = {
+      results,
+      templateProps: templateProps2,
+      cssClasses: {
+        root: 'custom-root',
+        allItems: 'custom-item',
+        empty: 'custom-empty'
+      }
+    };
+    renderer.render(<Hits {...props} />);
+    let out = renderer.getRenderOutput();
+
+    expect(out).toEqualJSX(
+      <Template
+        cssClass="custom-item"
+        data={results}
+        templateKey="allItems"
+        {...templateProps2}
+      />
+    );
+  });
+
   it('renders a specific template when no results', () => {
     results = {hits: []};
 

src/widgets/hits/__tests__/hits-test.js

@@ -15,7 +15,7 @@ describe('hits call', () => {
   jsdom({useEach: true});
 
   it('throws an exception when no container', () => {
-    expect(hits).toThrow(/^Usage:/);
+    expect(hits).toThrow(/^Must provide a container/);
   });
 });
 
@@ -65,6 +65,10 @@ describe('hits()', () => {
     expect(ReactDOM.render.secondCall.args[1]).toEqual(container);
   });
 
+  it('does not accept both item and allItems templates', () => {
+    expect(hits.bind({container, templates: {item: '', allItems: ''}})).toThrow();
+  });
+
   afterEach(() => {
     hits.__ResetDependency__('ReactDOM');
     hits.__ResetDependency__('defaultTemplates');

src/widgets/hits/hits.js

@@ -14,23 +14,26 @@ import defaultTemplates from './defaultTemplates.js';
  * @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 results.
- * @param  {string|Function} [options.templates.item=''] Template to use for each result.
+ * @param  {string|Function} [options.templates.item=''] Template to use for each result. This template will receive an object containing a single record.
+ * @param  {string|Function} [options.templates.allItems=''] Template to use for each result. (can't be used with item template). This template will receive a complete SearchResults result object, this object contains the key hits that contains all the records retrieved.
  * @param  {Object} [options.transformData] Method to change the object passed to the templates
  * @param  {Function} [options.transformData.empty=identity] Method used to change the object passed to the empty template
  * @param  {Function} [options.transformData.item=identity] Method used to change the object passed to the item template
+ * @param  {Function} [options.transformData.allItems=identity] Method used to change the object passed to the item template
  * @param  {number} [hitsPerPage=20] The number of hits to display per page
  * @param  {Object} [options.cssClasses] CSS classes to add
  * @param  {string|string[]} [options.cssClasses.root] CSS class to add to the wrapping element
  * @param  {string|string[]} [options.cssClasses.empty] CSS class to add to the wrapping element when no results
  * @param  {string|string[]} [options.cssClasses.item] CSS class to add to each result
  * @return {Object}
  */
-const usage = `Usage:
+const usage = `
+Usage:
 hits({
   container,
   [ cssClasses.{root,empty,item}={} ],
-  [ templates.{empty,item} ],
-  [ transformData.{empty=identity,item=identity} ],
+  [ templates.{empty,item} | templates.{empty, allItems} ],
+  [ transformData.{empty=identity,item=identity} | transformData.{empty, allItems} ],
   [ hitsPerPage=20 ]
 })`;
 function hits({
@@ -41,7 +44,11 @@ function hits({
     hitsPerPage = 20
   } = {}) {
   if (!container) {
-    throw new Error(usage);
+    throw new Error('Must provide a container.' + usage);
+  }
+
+  if (templates.item && templates.allItems) {
+    throw new Error('Must contain only allItems OR item template.' + usage);
   }
 
   let containerNode = utils.getContainerNode(container);