#55: added Autocomplete with Autosugest on hero section from homepage…

… and creted style file for it

src/assets/theme/src/_components.sass

@@ -10,4 +10,5 @@
 @import "components/blog"
 @import "components/contact"
 @import "components/form"
+@import "components/autocomplete"
 @import "components/search_results"

src/assets/theme/src/components/_autocomplete.sass

@@ -0,0 +1,11 @@
+// @todo Seco - refactoring
+.autocomplete-search
+    position: fixed
+    top: 0
+    left: 25%
+    z-index: 999999
+    width: 50%
+    height: 100%
+    background-color: white
+    padding: 20px
+    box-shadow: 0 0 100px black

src/components/pages/HomePage/Sections/Hero.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Separator from '../../../Separator';
 import Img from 'gatsby-image';
 import { StaticQuery, graphql } from 'gatsby';
+import { AutocompleteSearch } from '../../SearchResult/AutocompleteSearch';
 
 function Hero() {
   return (
@@ -38,14 +39,10 @@ function Hero() {
                 </button>
               </div>
               <div className="hero-image md:w-2/3 md:-ml-0 xl:-ml-0 xl:w-3/4 xl:self-end">
-                <Separator color="celeste" classSeparator="xl:hidden" style={{ zIndex: 9 }} />
+                <Separator color="celeste" classSeparator="xl:hidden" css={{ zIndex: 9 }} />
                 <Img fluid={data.file.childImageSharp.fluid} alt="" />
-                <div className="search-icon hidden">
-                  <input
-                    id="search"
-                    className="border-burg border-6 rounded-full background-white absolute -mt-24 pl-10"
-                    placeholder="Caută serviciu, zonă sau tipologie beneficiar"
-                  />
+                <div className="autocomplete-search">
+                  <AutocompleteSearch />
                 </div>
               </div>
               <Separator color="celeste" bottom="-6px" />

src/components/pages/SearchResult/Autocomplete.tsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Highlight, connectAutoComplete } from 'react-instantsearch-dom';
+import AutoSuggest from 'react-autosuggest';
+
+class Autocomplete extends Component {
+  // @ts-ignore
+  state = { value: this.props.currentRefinement };
+
+  onChange = (event: any, { newValue }: any) => {
+    this.setState({ value: newValue });
+  };
+
+  onSuggestionsFetchRequested = ({ value }: any) => {
+    // @ts-ignore
+    this.props.refine(value);
+  };
+
+  onSuggestionsClearRequested = () => {
+    // @ts-ignore
+    this.props.refine();
+  };
+
+  getSuggestionValue(hit: any) {
+    return hit.name;
+  }
+
+  renderSuggestion(hit: any) {
+    return <Highlight attribute="name" hit={hit} tagName="mark" />;
+  }
+
+  render() {
+    const { hits }: any = this.props;
+    const { value } = this.state;
+
+    const inputProps = {
+      placeholder: 'Search for a product...',
+      onChange: this.onChange,
+      value,
+    };
+
+    return (
+      <AutoSuggest
+        suggestions={hits}
+        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+        getSuggestionValue={this.getSuggestionValue}
+        renderSuggestion={this.renderSuggestion}
+        inputProps={inputProps}
+      />
+    );
+  }
+}
+
+// @ts-ignore
+export default connectAutoComplete(Autocomplete);

src/components/pages/SearchResult/AutocompleteSearch.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import algoliasearch from 'algoliasearch';
+import { InstantSearch } from 'react-instantsearch-dom';
+import Autocomplete from './Autocomplete';
+
+const indexCommon: string | undefined = `${process.env.ALGOLIA_INDEX_NAME_COMMON}`;
+const client = algoliasearch(`${process.env.ALGOLIA_APP_ID}`, `${process.env.ALGOLIA_API_KEY}`);
+const common = client.initIndex(indexCommon);
+
+common.setSettings({
+  searchableAttributes: ['name', 'location', 'district', 'address', 'supplier.name', 'service.name'],
+});
+
+export function AutocompleteSearch() {
+  return (
+    <InstantSearch indexName={`${indexCommon}`} searchClient={client}>
+      <Autocomplete />
+    </InstantSearch>
+  );
+}

src/components/pages/SearchResult/Content.tsx

@@ -17,7 +17,6 @@ import {
 import algoliasearch from 'algoliasearch';
 
 const indexCommon: string | undefined = `${process.env.ALGOLIA_INDEX_NAME_COMMON}`;
-
 const client = algoliasearch(`${process.env.ALGOLIA_APP_ID}`, `${process.env.ALGOLIA_API_KEY}`);
 const common = client.initIndex(indexCommon);
 
@@ -34,7 +33,7 @@ common
 export function InstaSearchPage() {
   return (
     <div className="ais-InstantSearch">
-      <InstantSearch indexName="Common" searchClient={client}>
+      <InstantSearch indexName={`${indexCommon}`} searchClient={client}>
         <div className="search-header">
           <SearchBox
             translations={{