Merge pull request #15 from afosto/Fix/autocomplete-widget-support-qu…

…ery-session Fix/autocomplete-widget-support-query-session
afosto · Apr 19, 2022 · 1f6ebde · 1f6ebde
2 parents ef68aed + a4cc721
commit 1f6ebde
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@afosto/instant-search-client",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": false,
   "description": "The Afosto InstantSearch client",
   "main": "./dist/afosto-instant-search.min.js",

diff --git a/playground/index.html b/playground/index.html
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <title>Test</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic/dist/theme.min.css" />
         <style>
             .ais-Hits-list-item .hit-name {
                 font-weight: bold;
@@ -23,9 +24,14 @@
                 display: inline;
                 padding: 8px;
             }
+
+            .aa-Panel {
+                z-index: 2;
+            }
         </style>
     </head>
     <body>
+    <div id="autocomplete"></div>
         <div>
             <div style="display:flex">
                 <div id="dynamic-list" style="padding:20px">
@@ -45,6 +51,8 @@ <h2>Products</h2>
             </div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-query-suggestions"></script>
         <script>
           async function initSearchDemo() {
             try {
@@ -60,9 +68,15 @@ <h2>Products</h2>
 
               const { alias: indexName, filters = [] } = firstIndex;
               const filterKeys = filters.map(filter => filter.key);
+
+              const router = instantsearch.routers.history();
+
               const search = instantsearch({
                 indexName,
                 searchClient,
+                routing: {
+                  router,
+                },
               });
 
               search.addWidgets([
@@ -80,9 +94,6 @@ <h2>Products</h2>
 
                 instantsearch.widgets.dynamicWidgets({
                   container: '#dynamic-list',
-                  transformItems(_, { results }) {
-                    return Object.keys(results._rawResults[0].facets);
-                  },
                   widgets: filterKeys.map((attribute) => (container) =>
                     instantsearch.widgets.panel({
                       templates: {
@@ -129,6 +140,68 @@ <h2>Products</h2>
               ]);
 
               search.start();
+
+              function setInstantSearchUiState(indexUiState) {
+                search.setUiState(uiState => {
+                  return {
+                    ...uiState,
+                    [indexName]: {
+                      ...uiState[indexName],
+                      page: 1,
+                      ...indexUiState,
+                    },
+                  };
+                });
+              }
+
+              function getInstantSearchUiState() {
+                const uiState = router.read();
+                return (uiState && uiState[indexName]) || {}
+              }
+
+              const searchPageState = getInstantSearchUiState();
+
+              const createQuerySuggestionsPlugin = window['@algolia/autocomplete-plugin-query-suggestions'].createQuerySuggestionsPlugin;
+              const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+                searchClient,
+                indexName,
+                getSearchParams() {
+                  return { hitsPerPage: 4 };
+                },
+                transformSource({ source }) {
+                  return {
+                    ...source,
+                   templates: {
+                      ...source.templates,
+                     item(params) {
+                        const { item, html } = params;
+                        return html`<div>${item.title}</div>`;
+                     },
+                   },
+                  };
+                },
+              });
+
+              window['@algolia/autocomplete-js'].autocomplete({
+                container: '#autocomplete',
+                placeholder: 'Search for products',
+                detachedMediaQuery: 'none',
+                initialState: {
+                  query: searchPageState.query || '',
+                },
+                plugins: [querySuggestionsPlugin],
+                onSubmit({ state }) {
+                  setInstantSearchUiState({ query: state.query })
+                },
+                onReset() {
+                  setInstantSearchUiState({ query: '' })
+                },
+                onStateChange({ prevState, state }) {
+                  if (prevState.query !== state.query) {
+                    setInstantSearchUiState({ query: state.query })
+                  }
+                },
+              });
             } catch (error) {
 
             }

diff --git a/src/afostoInstantSearch.js b/src/afostoInstantSearch.js
@@ -41,19 +41,22 @@ const afostoInstantSearch = (searchEngineKey, options = {}) => {
   };
 
   const setSearchQueryState = requests => {
-    const { allowEmptyQuery = true } = clientOptions;
     const [firstRequest] = requests || [];
     const { query } = firstRequest?.params || {};
+    const searchQuery = query || firstRequest?.query;
     const lastQuery = searchQueryState.query;
     const querySessionID = searchQueryState.querySessionID;
-    const isNewQuery = !querySessionID || (allowEmptyQuery && lastQuery && !query) ||
-      (!allowEmptyQuery && query?.length === 1 && query?.charAt(0) !== lastQuery?.charAt(0));
+    const isNewQuery = !querySessionID ||
+      (!!lastQuery &&
+        (!searchQuery?.length || searchQuery?.length === 1) &&
+        searchQuery?.charAt(0) !== lastQuery?.charAt(0)
+      );
 
     if (isNewQuery) {
       searchQueryState.querySessionID = uuid();
     }
 
-    searchQueryState.query = query;
+    searchQueryState.query = searchQuery;
   };
 
   const searchRequest = async contexts => {