From 485dbf5517140d20f62cd24ba7e4edff41a2701c Mon Sep 17 00:00:00 2001
From: St3phan <si@codesicle.com>
Date: Thu, 27 Feb 2020 15:16:20 +0200
Subject: [PATCH] #55: added real file with the real name

---
 .../pages/SearchResult/Autocomplete.tsx       | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/pages/SearchResult/Autocomplete.tsx

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);