From c462e6e006c1cefbb441eff341ff6627e30476ae Mon Sep 17 00:00:00 2001
From: Leonard Krause <leoek2011@gmail.com>
Date: Sun, 4 Nov 2018 23:15:56 +0100
Subject: [PATCH] #27 #28 added autocompletion with topterms for general search
 field

---
 frontend/src/components/SearchForm.js         | 11 +++++++----
 frontend/src/components/common/InputFields.js | 12 ++++++++----
 frontend/src/config/index.js                  |  4 ++--
 frontend/src/redux/actions/index.js           |  6 ++++--
 frontend/src/redux/sagas/index.js             |  5 +++--
 5 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/SearchForm.js b/frontend/src/components/SearchForm.js
index 6454609..0ac3a2e 100644
--- a/frontend/src/components/SearchForm.js
+++ b/frontend/src/components/SearchForm.js
@@ -11,9 +11,9 @@ import { withStyles } from "@material-ui/core/styles";
 import { Field, reduxForm } from "redux-form";
 import { translate } from "react-i18next";
 import classnames from "classnames";
-import { getSearchIsFetching } from "../redux/selectors";
+import { getSearchIsFetching, getSuggestValue } from "../redux/selectors";
 
-import { RenderTextField, RenderCheckbox } from "./common/InputFields";
+import { RenderCheckbox, InputAutoSuggest } from "./common/InputFields";
 
 const styles = theme => ({
   root: {
@@ -107,10 +107,13 @@ export class SearchForm extends Component {
                 lg={10}
                 className={classes.formItemContainer}
               >
-                <Field
+                <InputAutoSuggest
                   label={t("searchform.search.querylbl")}
                   name="query"
-                  component={RenderTextField}
+                  options={{
+                    endpoint: "top"
+                  }}
+                  suggestionsSelector={getSuggestValue("topTerms")("query")}
                   className={classes.formItem}
                 />
               </Grid>
diff --git a/frontend/src/components/common/InputFields.js b/frontend/src/components/common/InputFields.js
index fddb024..3623b19 100644
--- a/frontend/src/components/common/InputFields.js
+++ b/frontend/src/components/common/InputFields.js
@@ -60,7 +60,8 @@ const RawInputAutoSuggest = ({
   count,
   suggestions,
   classes,
-  fetchSuggestRequest
+  fetchSuggestRequest,
+  options
 }) => (
   <Field
     label={label}
@@ -72,7 +73,8 @@ const RawInputAutoSuggest = ({
       fetchSuggestRequest({
         s: value,
         field: name,
-        count
+        count,
+        options
       })
     }
     handleClearSuggestions={() => false}
@@ -82,9 +84,11 @@ const RawInputAutoSuggest = ({
 export const InputAutoSuggest = compose(
   connect(
     (state, ownProps) => {
-      const { name } = ownProps;
+      const { name, suggestionsSelector } = ownProps;
       return {
-        suggestions: getSuggestions(name)(state)
+        suggestions: suggestionsSelector
+          ? suggestionsSelector(state)
+          : getSuggestions(name)(state)
       };
     },
     { fetchSuggestRequest }
diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js
index cca6cd5..e798b8d 100644
--- a/frontend/src/config/index.js
+++ b/frontend/src/config/index.js
@@ -3,8 +3,8 @@ import datasheetFormat, { ingredientFormat } from "./datasheetFormat";
 const devEnv = process.env.NODE_ENV === "development";
 
 const devConfig = {
-  apiBaseUrl: "http://localhost:8080"
-  //apiBaseUrl: "https://api.mss.leoek.tech"
+  //apiBaseUrl: "http://localhost:8080"
+  apiBaseUrl: "https://api.mss.leoek.tech"
 };
 
 export const baseConfig = {
diff --git a/frontend/src/redux/actions/index.js b/frontend/src/redux/actions/index.js
index b8009f8..c9dd9c8 100644
--- a/frontend/src/redux/actions/index.js
+++ b/frontend/src/redux/actions/index.js
@@ -90,13 +90,15 @@ export const FETCH_SUGGEST_REQUEST = "MSS/FETCH_SUGGEST_REQUEST";
 export const fetchSuggestRequest = ({
   s,
   field,
-  count = config.DEFAULTS.suggestionCount
+  count = config.DEFAULTS.suggestionCount,
+  options
 }) => ({
   type: FETCH_SUGGEST_REQUEST,
   payload: {
     s,
     field,
-    count
+    count,
+    options
   }
 });
 
diff --git a/frontend/src/redux/sagas/index.js b/frontend/src/redux/sagas/index.js
index a5576a5..8ac594b 100644
--- a/frontend/src/redux/sagas/index.js
+++ b/frontend/src/redux/sagas/index.js
@@ -81,14 +81,15 @@ const handleResponseJsonError = (errorMessage, statusCode) => {
 
 export function* fetchSuggestSaga(action) {
   const { payload = {} } = action;
-  const { field, s, count } = payload;
+  const { field, s, count, options = {} } = payload;
+  const { endpoint = "suggest" } = options;
   const parameters = {
     field,
     count,
     s
   };
   const response = yield get({
-    endpoint: "suggest",
+    endpoint,
     parameters
   });
   const reponseData = yield response.json().catch(handleResponseJsonError);