fix(QueryRuleCustomData): pass data as object to templates (#3647)

* fix(queryRuleCustomData): pass object to template

* chore(stories): update queryRuleCustomData stories

Author: francoischalifour

src/components/QueryRuleCustomData/QueryRuleCustomData.tsx

@@ -20,7 +20,7 @@ const QueryRuleCustomData = ({
     templateKey="default"
     templates={templates}
     rootProps={{ className: cssClasses.root }}
-    data={items}
+    data={{ items }}
   />
 );
 

src/components/QueryRuleCustomData/__tests__/QueryRuleCustomData-test.tsx

@@ -17,7 +17,7 @@ describe('QueryRuleCustomData', () => {
 
     const wrapper = shallow(<QueryRuleCustomData {...props} />);
 
-    expect(wrapper.props().data).toEqual(items);
+    expect(wrapper.props().data).toEqual({ items });
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -35,7 +35,7 @@ describe('QueryRuleCustomData', () => {
 
     const wrapper = shallow(<QueryRuleCustomData {...props} />);
 
-    expect(wrapper.props().data).toEqual(items);
+    expect(wrapper.props().data).toEqual({ items });
     expect(wrapper).toMatchSnapshot();
   });
 });

src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap

@@ -2,7 +2,11 @@
 
 exports[`QueryRuleCustomData renders with empty items 1`] = `
 <Template
-  data={Array []}
+  data={
+    Object {
+      "items": Array [],
+    }
+  }
   rootProps={
     Object {
       "className": "root",
@@ -23,14 +27,16 @@ exports[`QueryRuleCustomData renders with empty items 1`] = `
 exports[`QueryRuleCustomData renders with items 1`] = `
 <Template
   data={
-    Array [
-      Object {
-        "banner": "image-1.png",
-      },
-      Object {
-        "banner": "image-2.png",
-      },
-    ]
+    Object {
+      "items": Array [
+        Object {
+          "banner": "image-1.png",
+        },
+        Object {
+          "banner": "image-2.png",
+        },
+      ],
+    }
   }
   rootProps={
     Object {

src/components/Template/Template.js

@@ -45,10 +45,7 @@ class Template extends Component {
 }
 
 Template.propTypes = {
-  data: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.arrayOf(PropTypes.object),
-  ]),
+  data: PropTypes.object,
   rootProps: PropTypes.object,
   rootTagName: PropTypes.string,
   templateKey: PropTypes.string,

stories/query-rule-context.stories.ts

@@ -41,21 +41,26 @@ storiesOf('QueryRuleContext', module)
       search.addWidget(
         instantsearch.widgets.queryRuleCustomData({
           container: widgetContainer,
-          transformItems: (items: CustomDataItem[]) => items[0],
+          transformItems(items: CustomDataItem[]) {
+            return items.filter(item => typeof item.banner !== 'undefined');
+          },
           templates: {
-            default({ title, banner, link }: CustomDataItem) {
-              if (!banner) {
-                return '';
-              }
+            default: ({ items }: { items: CustomDataItem[] }) =>
+              items
+                .map(item => {
+                  const { title, banner, link } = item;
 
-              return `
-              <h2>${title}</h2>
+                  return `
+                    <section>
+                      <h2>${title}</h2>
 
-              <a href="${link}">
-                <img src="${banner}" alt="${title}">
-              </a>
-            `;
-            },
+                      <a href="${link}">
+                        <img src="${banner}" alt="${title}">
+                      </a>
+                    </section>
+                  `;
+                })
+                .join(''),
           },
         })
       );
@@ -94,21 +99,24 @@ storiesOf('QueryRuleContext', module)
       search.addWidget(
         instantsearch.widgets.queryRuleCustomData({
           container: widgetContainer,
-          transformItems: (items: CustomDataItem[]) => items[0],
+          transformItems(items: CustomDataItem[]) {
+            return items.filter(item => typeof item.banner !== 'undefined');
+          },
           templates: {
-            default({ title, banner, link }: CustomDataItem) {
-              if (!banner) {
-                return '';
-              }
+            default: ({ items }: { items: CustomDataItem[] }) =>
+              items.map(item => {
+                const { title, banner, link } = item;
 
-              return `
-              <h2>${title}</h2>
+                return `
+                  <section>
+                    <h2>${title}</h2>
 
-              <a href="${link}">
-                <img src="${banner}" alt="${title}">
-              </a>
-            `;
-            },
+                    <a href="${link}">
+                      <img src="${banner}" alt="${title}">
+                    </a>
+                  </section>
+                `;
+              }),
           },
         })
       );

stories/query-rule-custom-data.stories.ts

@@ -29,28 +29,65 @@ storiesOf('QueryRuleCustomData', module)
       search.addWidget(
         instantsearch.widgets.queryRuleCustomData({
           container: widgetContainer,
-          transformItems: (items: CustomDataItem[]) => items[0],
           templates: {
-            default({ title, banner, link }: CustomDataItem) {
-              if (!banner) {
-                return '';
-              }
+            default: ({ items }: { items: CustomDataItem[] }) =>
+              items
+                .map(item => {
+                  const { title, banner, link } = item;
 
-              return `
-                <h2>${title}</h2>
+                  if (!banner) {
+                    return;
+                  }
 
-                <a href="${link}">
-                  <img src="${banner}" alt="${title}">
-                </a>
-              `;
-            },
+                  return `
+                    <section>
+                      <h2>${title}</h2>
+
+                      <a href="${link}">
+                        <img src="${banner}" alt="${title}">
+                      </a>
+                    </section>
+                  `;
+                })
+                .join(''),
           },
         })
       );
     }, searchOptions)
   )
   .add(
-    'with default banner',
+    'with Hogan',
+    withHits(({ search, container, instantsearch }) => {
+      const widgetContainer = document.createElement('div');
+      const description = document.createElement('p');
+      description.innerHTML = 'Type <q>music</q> and a banner will appear.';
+
+      container.appendChild(description);
+      container.appendChild(widgetContainer);
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleCustomData({
+          container: widgetContainer,
+          templates: {
+            default: `
+              {{#items}}
+                {{#banner}}
+                  <section>
+                    <h2>{{title}}</h2>
+
+                    <a href="{{link}}">
+                      <img src="{{banner}}" alt="{{title}}">
+                    </a>
+                  </section>
+                {{/banner}}
+              {{/items}}`,
+          },
+        })
+      );
+    }, searchOptions)
+  )
+  .add(
+    'with default and single banner',
     withHits(({ search, container, instantsearch }) => {
       const widgetContainer = document.createElement('div');
       const description = document.createElement('p');
@@ -65,21 +102,26 @@ storiesOf('QueryRuleCustomData', module)
           container: widgetContainer,
           transformItems: (items: CustomDataItem[]) => {
             if (items.length > 0) {
-              return items[0];
+              return items.filter(item => typeof item.banner !== 'undefined');
             }
 
-            return {
-              title: 'Kill Bill',
-              banner: 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
-              link: 'https://www.netflix.com/title/60031236',
-            };
+            return [
+              {
+                title: 'Kill Bill',
+                banner:
+                  'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
+                link: 'https://www.netflix.com/title/60031236',
+              },
+            ];
           },
           templates: {
-            default({ title, banner, link }: CustomDataItem) {
-              if (!banner) {
-                return '';
+            default(items: CustomDataItem[]) {
+              if (items.length === 0) {
+                return;
               }
 
+              const { title, banner, link } = items[0];
+
               return `
                 <h2>${title}</h2>