docs(examples): improve playground types

Author: francoischalifour

examples/js/app.tsx

@@ -10,7 +10,6 @@ import {
 } from '@algolia/autocomplete-plugin-algolia-insights';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
-import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch';
 import { h, Fragment } from 'preact';
 import insightsClient from 'search-insights';
@@ -19,15 +18,7 @@ import '@algolia/autocomplete-theme-classic';
 
 import { createCategoriesPlugin } from './categoriesPlugin';
 import { shortcutsPlugin } from './shortcutsPlugin';
-
-type Product = {
-  name: string;
-  image: string;
-  description: string;
-  __autocomplete_indexName: string;
-  __autocomplete_queryID: string;
-};
-type ProductHit = Hit<Product>;
+import { ProductHit, ProductRecord } from './types';
 
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
@@ -78,7 +69,7 @@ autocomplete({
       {
         sourceId: 'products',
         getItems() {
-          return getAlgoliaHits<Product>({
+          return getAlgoliaHits<ProductRecord>({
             searchClient,
             queries: [
               {

examples/js/categoriesPlugin.tsx

@@ -7,18 +7,22 @@ import {
 import { SearchClient } from 'algoliasearch/lite';
 import { h, Fragment } from 'preact';
 
-type CategoryItem = {
+import { Highlighted } from './types';
+
+type CategoryRecord = {
   label: string;
   count: number;
 };
 
+type CategoryHit = Highlighted<CategoryRecord>;
+
 type CreateCategoriesPluginProps = {
   searchClient: SearchClient;
 };
 
 export function createCategoriesPlugin({
   searchClient,
-}: CreateCategoriesPluginProps): AutocompletePlugin<CategoryItem, undefined> {
+}: CreateCategoriesPluginProps): AutocompletePlugin<CategoryHit, undefined> {
   return {
     getSources({ query }) {
       return [
@@ -73,7 +77,7 @@ export function createCategoriesPlugin({
                   </div>
                   <div className="aa-ItemContent">
                     <div className="aa-ItemContentTitle">
-                      {highlightHit<CategoryItem>({
+                      {highlightHit<CategoryHit>({
                         hit: item,
                         attribute: 'label',
                       })}

examples/js/shortcutsPlugin.tsx

@@ -22,9 +22,11 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
             },
           ];
         },
-        onSelect({ setIsOpen }) {
+        onSelect({ setIsOpen, setQuery, refresh }) {
           toggleTheme();
+          setQuery('');
           setIsOpen(true);
+          refresh();
         },
         templates: {
           header({ createElement, Fragment }) {

examples/js/types/Highlighted.tsx

@@ -0,0 +1,5 @@
+import { HighlightResult } from '@algolia/client-search';
+
+export type Highlighted<TRecord> = TRecord & {
+  _highlightResult: HighlightResult<TRecord>;
+};

examples/js/types/ProductHit.tsx

@@ -0,0 +1,31 @@
+import { Hit } from '@algolia/client-search';
+
+export type ProductRecord = {
+  brand: string;
+  categories: string[];
+  description: string;
+  free_shipping: boolean;
+  hierarchicalCategories: {
+    lvl0: string;
+    lvl1?: string;
+    lvl2?: string;
+    lvl3?: string;
+    lvl4?: string;
+    lvl5?: string;
+    lvl6?: string;
+  };
+  image: string;
+  name: string;
+  popularity: number;
+  price: number;
+  prince_range: string;
+  rating: number;
+  type: string;
+};
+
+type WithAutocompleteAnalytics<THit> = THit & {
+  __autocomplete_indexName: string;
+  __autocomplete_queryID: string;
+};
+
+export type ProductHit = WithAutocompleteAnalytics<Hit<ProductRecord>>;

examples/js/types/index.tsx

@@ -0,0 +1,2 @@
+export * from './Highlighted';
+export * from './ProductHit';