From aa7caa92c80d5381d830dd219949b4f3e31b5043 Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Tue, 22 Feb 2022 09:49:50 +0100
Subject: [PATCH] docs(example): update vue-instantsearch example to reflect
 guide steps (#900)

---
 examples/vue-instantsearch/src/App.vue        |  24 +-
 .../vue-instantsearch/src/Autocomplete.vue    | 255 ++++++++++++++++++
 .../src/autocompleteMiddleware.js             | 247 -----------------
 3 files changed, 266 insertions(+), 260 deletions(-)
 create mode 100644 examples/vue-instantsearch/src/Autocomplete.vue
 delete mode 100644 examples/vue-instantsearch/src/autocompleteMiddleware.js

diff --git a/examples/vue-instantsearch/src/App.vue b/examples/vue-instantsearch/src/App.vue
index 788f91eea..7ea669463 100644
--- a/examples/vue-instantsearch/src/App.vue
+++ b/examples/vue-instantsearch/src/App.vue
@@ -1,20 +1,19 @@
 <template>
   <div>
-    <header class="header">
-      <div class="header-wrapper wrapper">
-        <nav class="header-nav">
-          <a href="/">Home</a>
-        </nav>
-        <div id="autocomplete"></div>
-      </div>
-    </header>
-
     <ais-instant-search
       :search-client="searchClient"
       :index-name="indexName"
       :routing="routing"
-      :middlewares="middlewares"
     >
+      <header class="header">
+        <div class="header-wrapper wrapper">
+          <nav class="header-nav">
+            <a href="/">Home</a>
+          </nav>
+          <Autocomplete />
+        </div>
+      </header>
+
       <ais-configure
         :attributes-to-snippet.camel="['name:7', 'description:15']"
         :snippet-ellipsis-text.camel="'…'"
@@ -32,7 +31,6 @@
           </ais-panel>
         </div>
         <div>
-          <ais-search-box><template></template></ais-search-box>
           <ais-hits>
             <template v-slot:item="{ item }">
               <article class="hit">
@@ -62,11 +60,12 @@
 import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
 import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';
 
-import { autocompleteMiddleware } from './autocompleteMiddleware';
+import Autocomplete from './Autocomplete.vue';
 import { INSTANT_SEARCH_INDEX_NAME } from './constants';
 import { searchClient } from './searchClient';
 
 export default {
+  components: { Autocomplete },
   data() {
     return {
       searchClient,
@@ -75,7 +74,6 @@ export default {
         router: historyRouter(),
         stateMapping: singleIndexMapping(INSTANT_SEARCH_INDEX_NAME),
       },
-      middlewares: [autocompleteMiddleware],
     };
   },
 };
diff --git a/examples/vue-instantsearch/src/Autocomplete.vue b/examples/vue-instantsearch/src/Autocomplete.vue
new file mode 100644
index 000000000..e42159593
--- /dev/null
+++ b/examples/vue-instantsearch/src/Autocomplete.vue
@@ -0,0 +1,255 @@
+<template>
+  <div ref="autocompleteContainer"></div>
+</template>
+
+<script lang="jsx">
+import { Fragment, render } from 'vue';
+
+import { createWidgetMixin } from 'vue-instantsearch/vue3/es';
+import { connectSearchBox } from 'instantsearch.js/es/connectors';
+import { autocomplete } from '@algolia/autocomplete-js';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+
+import '@algolia/autocomplete-theme-classic';
+
+import { createElement } from './utils/createElement';
+import {
+  INSTANT_SEARCH_INDEX_NAME,
+  INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE,
+} from './constants';
+import { searchClient } from './searchClient';
+
+function debounce(fn, time) {
+  let timerId;
+
+  return function (...args) {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    timerId = setTimeout(() => fn(...args), time);
+  };
+}
+
+export default {
+  mixins: [createWidgetMixin({ connector: connectSearchBox })],
+  mounted() {
+    const { instantSearchInstance } = this;
+    function getInstantSearchCurrentCategory() {
+      const indexRenderState =
+        instantSearchInstance.renderState[INSTANT_SEARCH_INDEX_NAME];
+
+      const refinedCategory = indexRenderState?.hierarchicalMenu?.[
+        INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE
+      ]?.items?.find(({ isRefined }) => isRefined);
+
+      return refinedCategory?.value;
+    }
+
+    function setInstantSearchUiState({
+      query,
+      category,
+      resetCategory = false,
+    }) {
+      let hierarchicalMenu;
+      if (resetCategory) {
+        hierarchicalMenu = {
+          hierarchicalMenu: { [INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]: [] },
+        };
+      } else if (!category) {
+        hierarchicalMenu = {};
+      } else {
+        hierarchicalMenu = {
+          hierarchicalMenu: {
+            [INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]: [category],
+          },
+        };
+      }
+
+      instantSearchInstance.setUiState((uiState) => ({
+        ...uiState,
+        [INSTANT_SEARCH_INDEX_NAME]: {
+          ...uiState[INSTANT_SEARCH_INDEX_NAME],
+          page: 1,
+          query,
+          ...hierarchicalMenu,
+        },
+      }));
+    }
+
+    const debouncedSetInstantSearchUiState = debounce(
+      setInstantSearchUiState,
+      500
+    );
+
+    const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+      key: 'instantsearch',
+      limit: 3,
+      transformSource({ source }) {
+        return {
+          ...source,
+          onSelect({ item }) {
+            setInstantSearchUiState({
+              query: item.label,
+              category: item.category,
+            });
+          },
+        };
+      },
+    });
+
+    const querySuggestionPluginInCategory = createQuerySuggestionsPlugin({
+      searchClient,
+      indexName: 'instant_search_demo_query_suggestions',
+      getSearchParams() {
+        const currentCategory = getInstantSearchCurrentCategory();
+        return recentSearchesPlugin.data.getAlgoliaSearchParams({
+          hitsPerPage: 3,
+          facetFilters: [
+            `${INSTANT_SEARCH_INDEX_NAME}.facets.exact_matches.categories.value:${currentCategory}`,
+          ],
+        });
+      },
+      transformSource({ source }) {
+        const currentCategory = getInstantSearchCurrentCategory();
+
+        return {
+          ...source,
+          sourceId: 'querySuggestionsPluginInCategory',
+          onSelect({ item }) {
+            setInstantSearchUiState({
+              query: item.query,
+              category: currentCategory,
+            });
+          },
+          getItems(params) {
+            if (!currentCategory) {
+              return [];
+            }
+
+            return source.getItems(params);
+          },
+          templates: {
+            ...source.templates,
+            header({ items }) {
+              if (items.length === 0) {
+                return null;
+              }
+
+              return (
+                <Fragment>
+                  <span className="aa-SourceHeaderTitle">
+                    In {currentCategory}
+                  </span>
+                  <span className="aa-SourceHeaderLine"></span>
+                </Fragment>
+              );
+            },
+          },
+        };
+      },
+    });
+
+    const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+      searchClient,
+      indexName: 'instant_search_demo_query_suggestions',
+      getSearchParams() {
+        const currentCategory = getInstantSearchCurrentCategory();
+
+        if (!currentCategory) {
+          return recentSearchesPlugin.data.getAlgoliaSearchParams({
+            hitsPerPage: 6,
+          });
+        }
+
+        return recentSearchesPlugin.data.getAlgoliaSearchParams({
+          hitsPerPage: 3,
+          facetFilters: [
+            `${INSTANT_SEARCH_INDEX_NAME}.facets.exact_matches.categories.value:-${currentCategory}`,
+          ],
+        });
+      },
+      categoryAttribute: [
+        'instant_search',
+        'facets',
+        'exact_matches',
+        INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE,
+      ],
+      transformSource({ source }) {
+        const currentCategory = getInstantSearchCurrentCategory();
+
+        return {
+          ...source,
+          sourceId: 'querySuggestionsPlugin',
+          onSelect({ item }) {
+            setInstantSearchUiState({
+              query: item.query,
+              category: item.__autocomplete_qsCategory,
+            });
+          },
+          getItems(params) {
+            if (!params.state.query) {
+              return [];
+            }
+
+            return source.getItems(params);
+          },
+          templates: {
+            ...source.templates,
+            header({ items }) {
+              if (!currentCategory || items.length === 0) {
+                return null;
+              }
+
+              return (
+                <Fragment>
+                  <span className="aa-SourceHeaderTitle">
+                    In other categories
+                  </span>
+                  <span className="aa-SourceHeaderLine" />
+                </Fragment>
+              );
+            },
+          },
+        };
+      },
+    });
+
+    const initialState =
+      instantSearchInstance.mainIndex.getHelper()?.state || {};
+
+    this.autocompleteInstance = autocomplete({
+      container: this.$refs.autocompleteContainer,
+      placeholder: 'Search for products',
+      detachedMediaQuery: 'none',
+      openOnFocus: true,
+      plugins: [
+        recentSearchesPlugin,
+        querySuggestionPluginInCategory,
+        querySuggestionsPlugin,
+      ],
+      initialState: { query: initialState.query || '' },
+      onSubmit({ state }) {
+        setInstantSearchUiState({ query: state.query });
+      },
+      onReset() {
+        setInstantSearchUiState({ query: '', resetCategory: true });
+      },
+      onStateChange({ prevState, state }) {
+        if (prevState.query !== state.query) {
+          debouncedSetInstantSearchUiState({ query: state.query });
+        }
+      },
+      renderer: {
+        createElement,
+        Fragment,
+      },
+      render({ children }, root) {
+        render(children, root);
+      },
+    });
+  },
+  beforeUnmount() {},
+};
+</script>
diff --git a/examples/vue-instantsearch/src/autocompleteMiddleware.js b/examples/vue-instantsearch/src/autocompleteMiddleware.js
deleted file mode 100644
index 52e351668..000000000
--- a/examples/vue-instantsearch/src/autocompleteMiddleware.js
+++ /dev/null
@@ -1,247 +0,0 @@
-import { Fragment, render } from 'vue';
-
-import { autocomplete } from '@algolia/autocomplete-js';
-import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
-import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
-
-import {
-  INSTANT_SEARCH_INDEX_NAME,
-  INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE,
-} from './constants';
-import { searchClient } from './searchClient';
-import { createElement } from './utils/createElement';
-
-import '@algolia/autocomplete-theme-classic';
-
-function debounce(fn, time) {
-  let timerId;
-
-  return function (...args) {
-    if (timerId) {
-      clearTimeout(timerId);
-    }
-
-    timerId = setTimeout(() => fn(...args), time);
-  };
-}
-
-export function autocompleteMiddleware({ instantSearchInstance }) {
-  let autocompleteInstance;
-
-  function getInstantSearchCurrentCategory() {
-    const indexRenderState =
-      instantSearchInstance.renderState[INSTANT_SEARCH_INDEX_NAME];
-
-    const refinedCategory = indexRenderState?.hierarchicalMenu?.[
-      INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE
-    ]?.items?.find(({ isRefined }) => isRefined);
-
-    return refinedCategory?.value;
-  }
-
-  function setInstantSearchUiState({ query, category, resetCategory = false }) {
-    let hierarchicalMenu;
-    if (resetCategory) {
-      hierarchicalMenu = {
-        hierarchicalMenu: { [INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]: [] },
-      };
-    } else if (!category) {
-      hierarchicalMenu = {};
-    } else {
-      hierarchicalMenu = {
-        hierarchicalMenu: {
-          [INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]: [category],
-        },
-      };
-    }
-
-    instantSearchInstance.setUiState((uiState) => ({
-      ...uiState,
-      [INSTANT_SEARCH_INDEX_NAME]: {
-        ...uiState[INSTANT_SEARCH_INDEX_NAME],
-        page: 1,
-        query,
-        ...hierarchicalMenu,
-      },
-    }));
-  }
-
-  const debouncedSetInstantSearchUiState = debounce(
-    setInstantSearchUiState,
-    500
-  );
-
-  const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
-    key: 'instantsearch',
-    limit: 3,
-    transformSource({ source }) {
-      return {
-        ...source,
-        onSelect({ item }) {
-          setInstantSearchUiState({
-            query: item.label,
-            category: item.category,
-          });
-        },
-      };
-    },
-  });
-
-  const querySuggestionPluginInCategory = createQuerySuggestionsPlugin({
-    searchClient,
-    indexName: 'instant_search_demo_query_suggestions',
-    getSearchParams() {
-      const currentCategory = getInstantSearchCurrentCategory();
-      return recentSearchesPlugin.data.getAlgoliaSearchParams({
-        hitsPerPage: 3,
-        facetFilters: [
-          `${INSTANT_SEARCH_INDEX_NAME}.facets.exact_matches.categories.value:${currentCategory}`,
-        ],
-      });
-    },
-    transformSource({ source }) {
-      const currentCategory = getInstantSearchCurrentCategory();
-
-      return {
-        ...source,
-        sourceId: 'querySuggestionsPluginInCategory',
-        onSelect({ item }) {
-          setInstantSearchUiState({
-            query: item.query,
-            category: currentCategory,
-          });
-        },
-        getItems(params) {
-          if (!currentCategory) {
-            return [];
-          }
-
-          return source.getItems(params);
-        },
-        templates: {
-          ...source.templates,
-          header({ items }) {
-            if (items.length === 0) {
-              return null;
-            }
-
-            return (
-              <Fragment>
-                <span className="aa-SourceHeaderTitle">
-                  In {currentCategory}
-                </span>
-                <span className="aa-SourceHeaderLine"></span>
-              </Fragment>
-            );
-          },
-        },
-      };
-    },
-  });
-
-  const querySuggestionsPlugin = createQuerySuggestionsPlugin({
-    searchClient,
-    indexName: 'instant_search_demo_query_suggestions',
-    getSearchParams() {
-      const currentCategory = getInstantSearchCurrentCategory();
-
-      if (!currentCategory) {
-        return recentSearchesPlugin.data.getAlgoliaSearchParams({
-          hitsPerPage: 6,
-        });
-      }
-
-      return recentSearchesPlugin.data.getAlgoliaSearchParams({
-        hitsPerPage: 3,
-        facetFilters: [
-          `${INSTANT_SEARCH_INDEX_NAME}.facets.exact_matches.categories.value:-${currentCategory}`,
-        ],
-      });
-    },
-    categoryAttribute: [
-      'instant_search',
-      'facets',
-      'exact_matches',
-      INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE,
-    ],
-    transformSource({ source }) {
-      const currentCategory = getInstantSearchCurrentCategory();
-
-      return {
-        ...source,
-        sourceId: 'querySuggestionsPlugin',
-        onSelect({ item }) {
-          setInstantSearchUiState({
-            query: item.query,
-            category: item.__autocomplete_qsCategory,
-          });
-        },
-        getItems(params) {
-          if (!params.state.query) {
-            return [];
-          }
-
-          return source.getItems(params);
-        },
-        templates: {
-          ...source.templates,
-          header({ items }) {
-            if (!currentCategory || items.length === 0) {
-              return null;
-            }
-
-            return (
-              <Fragment>
-                <span className="aa-SourceHeaderTitle">
-                  In other categories
-                </span>
-                <span className="aa-SourceHeaderLine" />
-              </Fragment>
-            );
-          },
-        },
-      };
-    },
-  });
-
-  return {
-    subscribe() {
-      const initialState =
-        instantSearchInstance.mainIndex.getHelper()?.state || {};
-
-      autocompleteInstance = autocomplete({
-        container: '#autocomplete',
-        placeholder: 'Search for products',
-        detachedMediaQuery: 'none',
-        openOnFocus: true,
-        plugins: [
-          recentSearchesPlugin,
-          querySuggestionPluginInCategory,
-          querySuggestionsPlugin,
-        ],
-        initialState: { query: initialState.query || '' },
-        onSubmit({ state }) {
-          setInstantSearchUiState({ query: state.query });
-        },
-        onReset() {
-          setInstantSearchUiState({ query: '', resetCategory: true });
-        },
-        onStateChange({ prevState, state }) {
-          if (prevState.query !== state.query) {
-            debouncedSetInstantSearchUiState({ query: state.query });
-          }
-        },
-        renderer: {
-          createElement,
-          Fragment,
-        },
-        render({ children }, root) {
-          render(children, root);
-        },
-      });
-    },
-    unsubscribe() {
-      autocompleteInstance?.destroy();
-    },
-  };
-}