feat(qs): rename category to categoryAttribute

algolia · Feb 26, 2021 · 5d8c5d4 · 5d8c5d4
1 parent 396dcb7
commit 5d8c5d4
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 18 deletions.
diff --git a/examples/js/app.tsx b/examples/js/app.tsx
@@ -48,7 +48,12 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       hitsPerPage: state.query ? 5 : 10,
     });
   },
-  categoryAttribute: 'categories',
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
 });
 const categoriesPlugin = createCategoriesPlugin({ searchClient });
 

diff --git a/examples/query-suggestions-with-inline-categories/app.tsx b/examples/query-suggestions-with-inline-categories/app.tsx
@@ -18,7 +18,12 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       hitsPerPage: 6,
     };
   },
-  categoryAttribute: 'categories',
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
   categoriesPerItem: 1,
   categoriesLimit: 2,
   transformSource: ({ source, onTapAhead }) => {

diff --git a/packages/autocomplete-plugin-query-suggestions/package.json b/packages/autocomplete-plugin-query-suggestions/package.json
@@ -33,7 +33,8 @@
   "dependencies": {
     "@algolia/autocomplete-core": "1.0.0-alpha.43",
     "@algolia/autocomplete-js": "1.0.0-alpha.43",
-    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.43"
+    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.43",
+    "@algolia/autocomplete-shared": "1.0.0-alpha.43"
   },
   "devDependencies": {
     "@algolia/client-search": "4.8.3",

diff --git a/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts b/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts
@@ -3,6 +3,7 @@ import {
   AutocompleteState,
 } from '@algolia/autocomplete-core';
 import { AutocompleteSource, getAlgoliaHits } from '@algolia/autocomplete-js';
+import { getAttributeValueByPath } from '@algolia/autocomplete-shared';
 import { SearchOptions } from '@algolia/client-search';
 import { SearchClient } from 'algoliasearch/lite';
 
@@ -21,8 +22,10 @@ export type CreateQuerySuggestionsPluginParams<
   }): AutocompleteSource<TItem>;
   /**
    * The attribute to display categories.
+   * @example "instant_search.facets.exact_matches.categories"
+   * @example "instant_search.facets.exact_matches['hierarchicalCategories.lvl0']"
    */
-  categoryAttribute?: string;
+  categoryAttribute?: string | string[];
   /**
    * The number of items to display categories for.
    * @default 1
@@ -86,9 +89,12 @@ export function createQuerySuggestionsPlugin<
                   > = [current];
 
                   if (i <= categoriesPerItem - 1) {
-                    const categories = current.instant_search.facets.exact_matches[
-                      categoryAttribute
-                    ]
+                    const categories = getAttributeValueByPath(
+                      current,
+                      Array.isArray(categoryAttribute)
+                        ? categoryAttribute
+                        : [categoryAttribute]
+                    )
                       .map((x) => x.value)
                       .slice(0, categoriesLimit);
 

diff --git a/packages/autocomplete-preset-algolia/src/highlight/getAttributeValueByPath.ts b/packages/autocomplete-preset-algolia/src/highlight/getAttributeValueByPath.ts
diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts
@@ -1,6 +1,5 @@
-import { warn } from '@algolia/autocomplete-shared';
+import { getAttributeValueByPath, warn } from '@algolia/autocomplete-shared';
 
-import { getAttributeValueByPath } from './getAttributeValueByPath';
 import { HighlightedHit } from './HighlightedHit';
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { parseAttribute } from './parseAttribute';

diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts
@@ -1,6 +1,5 @@
-import { warn } from '@algolia/autocomplete-shared';
+import { getAttributeValueByPath, warn } from '@algolia/autocomplete-shared';
 
-import { getAttributeValueByPath } from './getAttributeValueByPath';
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { parseAttribute } from './parseAttribute';
 import { ParsedAttribute } from './ParsedAttribute';

diff --git a/packages/autocomplete-shared/src/getAttributeValueByPath.ts b/packages/autocomplete-shared/src/getAttributeValueByPath.ts
@@ -0,0 +1,6 @@
+export function getAttributeValueByPath<TRecord>(
+  record: TRecord,
+  path: string[]
+): any {
+  return path.reduce((current, key) => current && current[key], record);
+}
diff --git a/packages/autocomplete-shared/src/index.ts b/packages/autocomplete-shared/src/index.ts
@@ -1,5 +1,6 @@
 export * from './createRef';
 export * from './debounce';
+export * from './getAttributeValueByPath';
 export * from './getItemsCount';
 export * from './invariant';
 export * from './isEqual';

diff --git a/packages/website/docs/adding-suggested-searches.mdx b/packages/website/docs/adding-suggested-searches.mdx
@@ -17,7 +17,12 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
 const querySuggestionsPluginWithCategories = createQuerySuggestionsPlugin({
   searchClient,
   indexName: 'instant_search_demo_query_suggestions',
-  categoryAttribute: 'categories',
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
   categoriesLimit: 2,
   categoriesPerItem: 2,
 });
@@ -141,7 +146,7 @@ With [some configuration](https://www.algolia.com/doc/guides/getting-insights-an
 
 To display categories with the suggestions, you need to define the attribute to retrieve category information from, using the `categoryAttribute` option when instantiating the plugin.
 
-In this example, the category data is stored in the nested attribute `instant_search.facets.exact_matches.categories`. With this structure, you only need to provide `"categories"` as the `categoryAttribute`.
+In this example, the category data is stored in the nested attribute `instant_search.facets.exact_matches.categories`. With this structure, you need to provide the path `["instant_search", "facets", "exact_matches", "categories"]` as the `categoryAttribute`.
 
 You can also set the number of items to display categories for using `categoriesLimit` and the maximum number of categories to display per item using `categoriesPerItem`. Both default to `1`.
 
@@ -159,7 +164,12 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   getSearchParams({ state }) {
     return { hitsPerPage: state.query ? 5 : 10 };
   },
-  categoryAttribute: 'categories',
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
   categoriesLimit: 2,
   categoriesPerItem: 2,
 });

diff --git a/packages/website/docs/introduction.mdx b/packages/website/docs/introduction.mdx
@@ -19,7 +19,12 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       hitsPerPage: 3,
     };
   },
-  categoryAttribute: 'categories',
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
   categoriesLimit: 2,
 });
 const productsPlugin = createProductsPlugin();