#27 make title clickable, and reset search if clicked

leoek · Sep 27, 2018 · 41adeab · 41adeab
1 parent 2590b13
commit 41adeab
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 39 deletions.
diff --git a/frontend/src/components/MainScreen.js b/frontend/src/components/MainScreen.js
@@ -12,10 +12,15 @@ import classnames from "classnames";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import withWidth from "@material-ui/core/withWidth";
+import Button from "@material-ui/core/Button";
 
 import SearchForm from "./SearchForm";
 
-import { updateSearchInput, toggleAdvancedSearch } from "../redux/actions";
+import {
+  updateSearchInput,
+  toggleAdvancedSearch,
+  resetSearchInput
+} from "../redux/actions";
 import { getSearchFormValues, getAdvancedSearch } from "../redux/selectors";
 import ResultList from "./ResultList";
 import DatasheetSectionDialog from "./DatasheetSectionDialog";
@@ -25,6 +30,7 @@ import FacetSelection from "./FacetSelection";
 import config from "../config";
 import DatasheetDialog from "./DatasheetDialog";
 import AdvancedSearchForm from "./AdvancedSearchForm";
+import { getDefaultInputValues } from "../lib";
 
 const styles = theme => ({
   root: {
@@ -94,30 +100,6 @@ const SearchFormWrapper = connect(state => ({
   isAdvancedSearch: getAdvancedSearch(state)
 }))(RawSearchFormWrapper);
 
-const getDefaultInputValues = isAdvancedSearch => {
-  const both = {
-    fuzzy: false
-  };
-  if (isAdvancedSearch) {
-    return {
-      ...both,
-      productId: null,
-      fsgString: null,
-      fscString: null,
-      niin: null,
-      companyName: null,
-      beginDate: null,
-      endDate: null,
-      ingredients: null
-    };
-  }
-  return {
-    ...both,
-    query: "",
-    wholeDoc: false
-  };
-};
-
 export class Screen extends Component {
   componentDidMount = () => {
     const { updateSearchInput } = this.props;
@@ -135,7 +117,7 @@ export class Screen extends Component {
   };
 
   render() {
-    const { values, classes, t, width } = this.props;
+    const { values, classes, t, width, resetSearchInput } = this.props;
     const phoneWidth = "xs" === width;
 
     /**
@@ -147,13 +129,15 @@ export class Screen extends Component {
       <div className={classes.root}>
         <AppBar position="sticky" color="default">
           <Toolbar>
-            <Typography
-              variant="title"
-              color="inherit"
-              className={classnames({ [classes.grow]: phoneWidth })}
-            >
-              {t("title")}
-            </Typography>
+            <Button onClick={resetSearchInput}>
+              <Typography
+                variant="title"
+                color="inherit"
+                className={classnames({ [classes.grow]: phoneWidth })}
+              >
+                {t("title")}
+              </Typography>
+            </Button>
             {!phoneWidth && (
               <Typography
                 color="inherit"
@@ -189,7 +173,8 @@ export class Screen extends Component {
 Screen.propTypes = {
   classes: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired,
-  values: PropTypes.object
+  values: PropTypes.object,
+  resetSearchInput: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => {
@@ -200,7 +185,8 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = {
-  updateSearchInput
+  updateSearchInput,
+  resetSearchInput
 };
 
 export const ConnectedScreen = connect(

diff --git a/frontend/src/lib/index.js b/frontend/src/lib/index.js
@@ -0,0 +1,23 @@
+export const getDefaultInputValues = isAdvancedSearch => {
+  const both = {
+    fuzzy: false
+  };
+  if (isAdvancedSearch) {
+    return {
+      ...both,
+      productId: null,
+      fsgString: null,
+      fscString: null,
+      niin: null,
+      companyName: null,
+      beginDate: null,
+      endDate: null,
+      ingredients: null
+    };
+  }
+  return {
+    ...both,
+    query: "",
+    wholeDoc: false
+  };
+};
diff --git a/frontend/src/redux/actions/index.js b/frontend/src/redux/actions/index.js
@@ -1,10 +1,14 @@
-import { actionTypes as reduxFormActionTypes } from "redux-form";
-
+import {
+  actionTypes as reduxFormActionTypes,
+  reset as _reduxFormReset
+} from "redux-form";
 import config from "../../config";
 
 export const REDUX_FORM_SUBMIT = reduxFormActionTypes.SUBMIT;
 export const REDUX_FORM_SUBMIT_SUCCEEDED =
   reduxFormActionTypes.SET_SUBMIT_SUCCEEDED;
+export const reduxFormReset = _reduxFormReset;
+export const reduxFormResetSearchForm = () => reduxFormReset("search");
 
 export const REDUX_REHYDRATION_COMPLETED = "MSS/REDUX_REHYDRATION_COMPLETED";
 export const reduxRehydrationCompleted = () => ({
@@ -139,6 +143,11 @@ export const updateSearchInput = update => ({
   }
 });
 
+export const RESET_SEARCH_INPUT = "MSS/RESET_SEARCH_INPUT";
+export const resetSearchInput = () => ({
+  type: RESET_SEARCH_INPUT
+});
+
 export const TOGGLE_ADVANCED_SEARCH = "MSS/TOGGLE_ADVANCED_SEARCH";
 export const toggleAdvancedSearch = value => ({
   type: TOGGLE_ADVANCED_SEARCH,

diff --git a/frontend/src/redux/reducers/searchInput.js b/frontend/src/redux/reducers/searchInput.js
@@ -1,4 +1,4 @@
-import { UPDATE_SEARCH_INPUT } from "../actions";
+import { UPDATE_SEARCH_INPUT, RESET_SEARCH_INPUT } from "../actions";
 
 const initialState = {};
 
@@ -10,6 +10,8 @@ const searchInput = (state = initialState, action) => {
       ...state,
       ...update
     };
+  } else if (type === RESET_SEARCH_INPUT) {
+    return initialState;
   }
   return state;
 };

diff --git a/frontend/src/redux/sagas/index.js b/frontend/src/redux/sagas/index.js
@@ -17,7 +17,9 @@ import {
   FETCH_SUGGEST_REQUEST,
   fetchSuggestSuccess,
   fetchSuggestFailure,
-  SELECT_PAGE
+  SELECT_PAGE,
+  RESET_SEARCH_INPUT,
+  reduxFormResetSearchForm
 } from "../actions";
 import { getSearchInput, getAdvancedSearch } from "../selectors";
 import { post, get } from "../../lib/api";
@@ -119,6 +121,12 @@ export function* updateSearchInputSaga(action) {
   yield put(fetchSearchRequest({ searchInput, advancedSearch }));
 }
 
+export function* resetSearchInputSaga(action) {
+  const advancedSearch = yield select(getAdvancedSearch);
+  yield put(reduxFormResetSearchForm());
+  yield put(fetchSearchRequest({ advancedSearch }));
+}
+
 export function* updateSearchMetaSaga(action) {
   const { type, payload } = action;
   if (type === SELECT_PAGE) {
@@ -158,6 +166,7 @@ export default function* root() {
     takeEvery(FETCH_SEARCH_REQUEST, fetchSearchSaga),
     takeEvery(FETCH_SUGGEST_REQUEST, fetchSuggestSaga),
     takeEvery(UPDATE_SEARCH_INPUT, updateSearchInputSaga),
+    takeEvery(RESET_SEARCH_INPUT, resetSearchInputSaga),
     takeEvery(SELECT_PAGE, updateSearchMetaSaga),
     takeEvery([SELECT_FACET, DESELECT_FACET], handleSelectFacetSaga),
     takeEvery(DESELECT_FACETS, handleDeselectFacetsSaga),