#27 #28 added autocompletion with topterms for general search field

leoek · Nov 4, 2018 · c462e6e · c462e6e
1 parent f1da107
commit c462e6e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);