fix: don't require recommend for brands plugin (#32)

If you currently run the demo without Recommend, the popup doesn't
display because the recommend index isn't found.

Since Recommend is complex to setup, I propose to not rely on it by
default, so anyone can run the demo more easily.

This PR uses the same approach than #31 to fetch the most popular
`brand` facets from the search results.
I'm also leaving the recommend code commented to give pointer about how
to integrate Recommend.

Note: since our demo index is not fully trained, this approach actually
works better:
- the current demo displays `Lacy-D`, `Arlene` and `Lacy-S`
- locally I now get `Apple`, `Sony`, `Lacy-D` and `Garmin`

---
SFCC-390

overrides/app/components/algolia/autocomplete/plugins/brandsPlugin.tsx

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx React.createElement */
-import {AutocompletePlugin, getAlgoliaFacets} from '@algolia/autocomplete-js'
+import {AutocompletePlugin, getAlgoliaResults} from '@algolia/autocomplete-js'
 import React, {createElement, Fragment} from 'react'
 import {ALGOLIA_PRODUCTS_INDEX_NAME} from '../constants'
 import {BrandHit} from './../types'
 import {BrandItem} from './../components/BrandItem'
-import {recommendClient} from '../recommendClient'
+import {searchClient} from '../searchClient'
 
 /**
  * An Autocomplete Plugin that provides brand results from Algolia.
@@ -20,14 +20,44 @@ export const brandsPlugin: AutocompletePlugin<BrandHit, {}> = {
             {
                 sourceId: 'brandsPlugin',
                 async getItems() {
-                    var response = await recommendClient.getTrendingFacets([
-                        {
-                          indexName: ALGOLIA_PRODUCTS_INDEX_NAME,
-                          facetName: 'brand'
+                    return getAlgoliaResults({
+                        searchClient,
+                        queries: [
+                            {
+                                indexName: ALGOLIA_PRODUCTS_INDEX_NAME,
+                                query: '',
+                                params: {
+                                    facets: ['brand'],
+                                    hitsPerPage: 1,
+                                }
+                            }
+                        ],
+                        transformResponse({ results }) {
+                            const brandFacets = results[0].facets['brand'];
+                            if (!brandFacets) {
+                                return [];
+                            }
+                            const res = [];
+                            for (let [key, value] of Object.entries(brandFacets)) {
+                                res.push({ facetValue: key, count: value });
+                            }
+                            // Sort brand facets by their count and return only the first 4
+                            res.sort((a, b) => {
+                                return b.count - a.count;
+                            });
+                            return [res.slice(0, 4)];
                         },
-                    ])
-
-                    return response.results[0].hits
+                    })
+                    // Once you have Recommend setup, you may want to use it instead of `getAlgoliaResults`
+                    // to display the trending brands. This can be achieved like that:
+                    // var response = await recommendClient.getTrendingFacets([
+                    //     {
+                    //       indexName: ALGOLIA_PRODUCTS_INDEX_NAME,
+                    //       facetName: 'brand',
+                    //     },
+                    // ])
+                    //
+                    // return response.results[0].hits
                 },
                 renderer: {createElement, Fragment, render: () => {}},
                 templates: {
@@ -41,4 +71,3 @@ export const brandsPlugin: AutocompletePlugin<BrandHit, {}> = {
         ]
     }
 }
-