From a7f171b7fd1384430a15d77f8aea6fb174d7c408 Mon Sep 17 00:00:00 2001
From: St3phan <si@codesicle.com>
Date: Thu, 27 Feb 2020 15:12:40 +0200
Subject: [PATCH] #55: added Autocomplete with Autosugest on hero section from
 homepage and creted style file for it

---
 src/assets/theme/src/_components.sass         |  1 +
 .../theme/src/components/_autocomplete.sass   | 11 ++++
 src/assets/theme/src/components/_search.sass  | 44 ---------------
 .../pages/HomePage/Sections/Hero.tsx          | 11 ++--
 .../pages/SearchResult/Autocomplete.tsx       | 55 +++++++++++++++++++
 .../pages/SearchResult/AutocompleteSearch.tsx | 20 +++++++
 src/components/pages/SearchResult/Content.tsx |  3 +-
 7 files changed, 92 insertions(+), 53 deletions(-)
 create mode 100644 src/assets/theme/src/components/_autocomplete.sass
 delete mode 100644 src/assets/theme/src/components/_search.sass
 create mode 100644 src/components/pages/SearchResult/Autocomplete.tsx
 create mode 100644 src/components/pages/SearchResult/AutocompleteSearch.tsx

diff --git a/src/assets/theme/src/_components.sass b/src/assets/theme/src/_components.sass
index e3bd40f..220d097 100644
--- a/src/assets/theme/src/_components.sass
+++ b/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"
diff --git a/src/assets/theme/src/components/_autocomplete.sass b/src/assets/theme/src/components/_autocomplete.sass
new file mode 100644
index 0000000..1321119
--- /dev/null
+++ b/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
diff --git a/src/assets/theme/src/components/_search.sass b/src/assets/theme/src/components/_search.sass
deleted file mode 100644
index fbd0121..0000000
--- a/src/assets/theme/src/components/_search.sass
+++ /dev/null
@@ -1,44 +0,0 @@
-.page-search
-
-    .search-icon
-        top: -1.5em
-        left: -1.5em
-        @apply w-full
-        &:before
-            top: 0
-            left: 4.5vw
-
-        &:after
-            top: 0
-
-.search-input
-    @apply border-burg
-    @apply border-6
-    @apply rounded-full
-    @apply bg-white
-    @apply -mt-24
-    @apply pl-10
-
-    @screen md
-        height: 52px
-        max-width: 595px
-        left: 0
-
-    @screen xl
-        height: 62px
-        max-width: 770px
-        left: 0
-
-.search-icon
-    height: 165px
-    width: 100vw
-    @apply bg-snow
-    @apply relative
-    @apply w-screen
-    // @screen md
-    //     left: -37.5%
-
-    // @screen xl
-    //     left: -14%
-
-    
diff --git a/src/components/pages/HomePage/Sections/Hero.tsx b/src/components/pages/HomePage/Sections/Hero.tsx
index 8584ee0..a92a085 100644
--- a/src/components/pages/HomePage/Sections/Hero.tsx
+++ b/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" />
diff --git a/src/components/pages/SearchResult/Autocomplete.tsx b/src/components/pages/SearchResult/Autocomplete.tsx
new file mode 100644
index 0000000..342ecd8
--- /dev/null
+++ b/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);
diff --git a/src/components/pages/SearchResult/AutocompleteSearch.tsx b/src/components/pages/SearchResult/AutocompleteSearch.tsx
new file mode 100644
index 0000000..e4108ad
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/pages/SearchResult/Content.tsx b/src/components/pages/SearchResult/Content.tsx
index 6553d69..b6c3806 100644
--- a/src/components/pages/SearchResult/Content.tsx
+++ b/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={{