feat(emptyStates): implements empty source template and renderEmpty method (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

Author: shortcuts

examples/js/app.ts

@@ -0,0 +1,94 @@
+import {
+  autocomplete,
+  getAlgoliaHits,
+  reverseHighlightHit,
+} from '@algolia/autocomplete-js';
+import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import algoliasearch from 'algoliasearch';
+import insightsClient from 'search-insights';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+insightsClient('init', { appId, apiKey });
+
+const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
+const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+  key: 'search',
+  limit: 3,
+});
+const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+  searchClient,
+  indexName: 'instant_search_demo_query_suggestions',
+  getSearchParams() {
+    return recentSearchesPlugin.data.getAlgoliaSearchParams({
+      clickAnalytics: true,
+    });
+  },
+});
+
+autocomplete({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  openOnFocus: true,
+  plugins: [
+    algoliaInsightsPlugin,
+    recentSearchesPlugin,
+    querySuggestionsPlugin,
+  ],
+  getSources({ query }) {
+    if (!query) {
+      return [];
+    }
+
+    return [
+      {
+        getItems() {
+          return getAlgoliaHits({
+            searchClient,
+            queries: [{ indexName: 'instant_search', query }],
+          });
+        },
+        templates: {
+          item({ item, root }) {
+            const itemContent = document.createElement('div');
+            const ItemSourceIcon = document.createElement('div');
+            const itemTitle = document.createElement('div');
+            const sourceIcon = document.createElement('img');
+
+            sourceIcon.width = 20;
+            sourceIcon.height = 20;
+            sourceIcon.src = item.image;
+
+            ItemSourceIcon.classList.add('aa-ItemSourceIcon');
+            ItemSourceIcon.appendChild(sourceIcon);
+
+            itemTitle.innerHTML = reverseHighlightHit({
+              hit: item,
+              attribute: 'name',
+            });
+            itemTitle.classList.add('aa-ItemTitle');
+
+            itemContent.classList.add('aa-ItemContent');
+            itemContent.appendChild(ItemSourceIcon);
+            itemContent.appendChild(itemTitle);
+
+            root.appendChild(itemContent);
+          },
+          empty({ root }) {
+            const itemContent = document.createElement('div');
+
+            itemContent.innerHTML = 'No results for this query';
+            itemContent.classList.add('aa-ItemContent');
+
+            root.appendChild(itemContent);
+          },
+        },
+      },
+    ];
+  },
+});

packages/autocomplete-js/src/__tests__/autocomplete.test.ts

@@ -1,5 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 
+import { wait } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
 describe('autocomplete-js', () => {
@@ -92,8 +93,8 @@ describe('autocomplete-js', () => {
                     stroke-dasharray="164.93361431346415 56.97787143782138"
                     stroke-width="6"
                   >
-                    
-        
+
+
                     <animatetransform
                       attributeName="transform"
                       dur="1s"
@@ -102,7 +103,7 @@ describe('autocomplete-js', () => {
                       type="rotate"
                       values="0 50 50;90 50 50;180 50 50;360 50 50"
                     />
-                    
+
 
                   </circle>
                 </svg>

packages/autocomplete-js/src/autocomplete.ts

@@ -150,6 +150,16 @@ export function autocomplete<TItem extends BaseItem>(
         props.value.renderer.renderEmpty) ||
       props.value.renderer.render;
 
+    hasEmptySourceTemplateRef.current = renderProps.state.collections.some(
+      (collection) => collection.source.templates.empty
+    );
+
+    const render =
+      (!getItemsCount(renderProps.state) &&
+        !hasEmptySourceTemplateRef.current &&
+        props.value.renderer.renderEmpty) ||
+      props.value.renderer.render;
+
     renderSearchBox(renderProps);
     renderPanel(render, renderProps);
   }

test/utils/index.ts

@@ -8,3 +8,4 @@ export * from './createSource';
 export * from './createState';
 export * from './defer';
 export * from './runAllMicroTasks';
+export * from './wait';

test/utils/wait.ts

@@ -0,0 +1,5 @@
+export function wait(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+}