homeflowjs 0.6.2 → 0.7.0

package/actions/search.actions.js

@@ -6,6 +6,11 @@ export const setSearch = (payload) => ({
   payload,
 });
 
+export const setInitialSearch = (payload) => ({
+  type: SearchActionTypes.SET_INITIAL_SEARCH,
+  payload,
+});
+
 export const setSuggestions = (payload) => ({
   type: SearchActionTypes.SET_SUGGESTIONS,
   payload,

package/actions/search.types.js

@@ -1,5 +1,6 @@
 const SearchActionTypes = {
   SET_SEARCH: 'SET_SEARCH',
+  SET_INITIAL_SEARCH: 'SET_INITIAL_SEARCH',
   SET_SUGGESTIONS: 'SET_SUGGESTIONS',
   SET_CHANNEL: 'SET_CHANNEL',
   SET_SEARCH_FIELD: 'SET_SEARCH_FIELD',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/properties/sort-order-select/sort-order-select.component.jsx

@@ -18,14 +18,14 @@ const SortOrderSelect = (props) => {
 
   const { sorted } = search;
 
-  const handleChange = ({ value }) => {
-    const newSearch = { ...search };
-    newSearch.sorted = value;
+  if (reactSelect) {
+    const handleChange = ({ value }) => {
+      const newSearch = { ...search };
+      newSearch.sorted = value;
 
-    propertySearch(newSearch);
-  };
+      propertySearch(newSearch);
+    };
 
-  if (reactSelect) {
     const options = children.map((option) => {
       const { value, children } = option.props;
       return { value, label: children };
@@ -48,8 +48,15 @@ const SortOrderSelect = (props) => {
     );
   }
 
+  const handleChange = (e) => {
+    const newSearch = { ...search };
+    newSearch.sorted = e.target.value;
+
+    propertySearch(newSearch);
+  };
+
   return (
-    <select onChange={handleChange} className={className}>
+    <select value={sorted} onChange={handleChange} className={className}>
       {children}
     </select>
   );

package/reducers/search.reducer.js

@@ -10,6 +10,7 @@ const INITIAL_STATE = {
     suggestions: [],
     tags: [],
   },
+  initialSearch: {}, // original search when the page first loads
   savedSearches: [],
 };
 
@@ -22,6 +23,14 @@ const searchReducer = (state = INITIAL_STATE, action) => {
           ...action.payload,
         },
       };
+    case SearchActionTypes.SET_INITIAL_SEARCH:
+      return {
+        ...state,
+        initialSearch: {
+          ...state.initialSearch,
+          ...action.payload,
+        },
+      };
     case SearchActionTypes.SET_SUGGESTIONS:
       return {
         ...state,
@@ -60,6 +69,7 @@ const searchReducer = (state = INITIAL_STATE, action) => {
         return {
           ...state,
           currentSearch: {
+            ...state.currentSearch,
             tags: newTags,
           },
         };

package/search/index.js

@@ -10,6 +10,7 @@ import GenericSearchField from './generic-search-field/generic-search-field.comp
 import GeolocateButton from './geolocate-button/geolocate-button.component';
 import SaveSearchButton from './save-search-button/save-search-button.component';
 import SavedSearch from './saved-search/saved-search.component';
+import propertySearch from './property-search/property-search';
 
 export {
   SearchForm,
@@ -24,4 +25,5 @@ export {
   GeolocateButton,
   SaveSearchButton,
   SavedSearch,
+  propertySearch,
 }

package/search/location-input/location-input.component.jsx

@@ -14,7 +14,7 @@ class LocationInput extends Component {
     super(props);
 
     this.onLocationChange = this.onLocationChange.bind(this);
-    // wait 1 second after typing stops before fetching results
+    // wait half a second after typing stops before fetching results
     this.debouncedLoadSuggestions = debounce(this.loadSuggestions, 500);
   }
 

package/search/property-search/property-search.js

@@ -1,6 +1,7 @@
 import { camelToSnakeCase } from '../../utils';
 import base64 from '../../utils/base64';
 import { FRAGMENT_BOOKENDS } from './constants';
+import store from '../../store';
 
 const fragmentize = (key, value) => {
   const pattern = FRAGMENT_BOOKENDS[key];
@@ -9,19 +10,8 @@ const fragmentize = (key, value) => {
 
   if (key === 'tags') return `${pattern[0]}${value.join(',')}`;
 
-  // let polyTest = "}`juHnrWzKaOpNrHdI|[?~j@{Krt@{M|pCoJlq@{KkSwCa]U}sB";
-
   if (key === 'poly') return pattern[0] + base64.encode(value);
 
-  // let poly = "}`juHnrWzKaOpNrHdI|[?~j@{Krt@{M|pCoJlq@{KkSwCa]U}sB"
-  // undefined
-  // base64.encode(poly)
-  // "fWBqdUhucld6S2FPcE5ySGRJfFs_fmpAe0tydEB7TXxwQ29KbHFAe0trU3dDYV1VfXNC"
-  // btoa(poly)
-  // "fWBqdUhucld6S2FPcE5ySGRJfFs/fmpAe0tydEB7TXxwQ29KbHFAe0trU3dDYV1VfXNC"
-  // btoa(unescape(encodeURIComponent(poly)));
-  // "fWBqdUhucld6S2FPcE5ySGRJfFs/fmpAe0tydEB7TXxwQ29KbHFAe0trU3dDYV1VfXNC"
-
   if (typeof pattern === 'string') return pattern;
   return `${pattern[0] ? pattern[0] : ''}${value}${pattern[1] ? pattern[1] : ''}`;
 };
@@ -52,6 +42,13 @@ export const buildQueryString = (search) => {
 };
 
 export default (search) => {
-  const query = buildQueryString(search);
+  let searchToRun = search;
+
+  // if no search is passed, use current search from Redux store
+  if (!searchToRun) {
+    searchToRun = store.getState().search.currentSearch;
+  }
+
+  const query = buildQueryString(searchToRun);
   window.location.assign(`/search?${query}`);
 };

package/search/radius-select/radius-select.component.jsx

@@ -5,6 +5,7 @@ import Select from 'react-dropdown';
 
 import 'react-dropdown/style.css';
 
+import propertySearch from '../property-search/property-search';
 import { setSearchField } from '../../actions/search.actions';
 
 const defaultOptions = [
@@ -25,15 +26,30 @@ const ReactSelect = (props) => {
   const {
     type,
     setSearchField,
+    searchOnSelection,
     options = defaultOptions,
     placeholder,
     className,
     styles,
     value,
+    search,
   } = props;
 
   if (value) options.unshift({ value: '', label: 'Distance' });
 
+  const handleChange = ({ value }) => {
+    setSearchField({ within: value || null });
+
+    if (searchOnSelection) {
+      const newSearch = {
+        ...search,
+        within: value,
+      };
+
+      propertySearch(newSearch);
+    }
+  }
+
   return (
     <Select
       classNamePrefix="react-select"
@@ -45,11 +61,7 @@ const ReactSelect = (props) => {
       setValue={() => value}
       isSearchable={false}
       data-testid="select"
-      onChange={({ value }) => {
-        setSearchField({
-          within: value || null,
-        });
-      }}
+      onChange={handleChange}
     />
   );
 };
@@ -57,23 +69,40 @@ const ReactSelect = (props) => {
 const NormalSelect = ({
   within,
   setSearchField,
+  searchOnSelection,
   options = defaultOptions,
   placeholder,
+  search,
   ...otherProps
-}) => (
-  <select
-    value={within}
-    name="within"
-    onChange={(e) => setSearchField({ [e.target.name]: e.target.value })}
-    {...otherProps}
-    data-testid="select"
-  >
-    <option value="">{placeholder}</option>
-    {options.map((option) => (
-      <option value={option.value} key={option.value}>{option.label}</option>
-    ))}
-  </select>
-);
+}) => {
+  const handleChange = (e) => {
+    setSearchField({ within: e.target.value || null });
+
+    if (searchOnSelection) {
+      const newSearch = {
+        ...search,
+        within: e.target.value,
+      };
+
+      propertySearch(newSearch);
+    }
+  };
+
+  return (
+    <select
+      value={search.within}
+      name="within"
+      onChange={handleChange}
+      {...otherProps}
+      data-testid="select"
+    >
+      <option value="">{placeholder}</option>
+      {options.map((option) => (
+        <option value={option.value} key={option.value}>{option.label}</option>
+      ))}
+    </select>
+  );
+};
 
 const RadiusSelect = (props) => {
   const { reactSelect } = props;
@@ -86,17 +115,18 @@ const RadiusSelect = (props) => {
 };
 
 RadiusSelect.propTypes = {
-  within: PropTypes.string,
   setSearchField: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  searchOnSelection: PropTypes.bool,
 };
 
 RadiusSelect.defaultProps = {
   placeholder: 'Distance',
+  searchOnSelection: false,
 };
 
 const mapStateToProps = state => ({
-  within: state.search.currentSearch.within,
+  search: state.search.currentSearch,
 });
 
 const mapDispatchToProps = {

package/search/search-form/search-form.component.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { setSearch, setSearchField, setPlace } from '../../actions/search.actions';
+import { setSearch, setInitialSearch, setSearchField, setPlace } from '../../actions/search.actions';
 import propertySearch from '../property-search/property-search';
 import parseFragment from '../property-search/parse-fragment';
 import { isEmpty } from '../../utils';
@@ -16,16 +16,24 @@ class SearchForm extends Component {
       defaultChannel,
       search,
       setSearch,
+      setInitialSearch,
       setSearchField,
       setPlace,
     } = this.props;
 
     const searchFromFragment = parseFragment(window.location.pathname);
 
-    if (!isEmpty(searchFromFragment)) setSearch(searchFromFragment);
+    if (!isEmpty(searchFromFragment)) {
+      setInitialSearch(searchFromFragment);
+      setSearch(searchFromFragment);
+    }
 
-    if (Homeflow.get('place')) {
-      setPlace(Homeflow.get('place'));
+    const place = Homeflow.get('place');
+    if (place) {
+      setPlace(place);
+      setInitialSearch({
+        q: place.name + (place.county_name ? `, ${place.county_name}` : ''),
+      });
     }
 
     if (defaultSort && !search.order) setSearchField({ order: defaultSort });
@@ -55,6 +63,7 @@ class SearchForm extends Component {
       setSearchField,
       setPlace,
       children,
+      setInitialSearch,
       ...otherProps
     } = this.props;
 
@@ -88,6 +97,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   setSearch,
   setSearchField,
+  setInitialSearch,
   setPlace,
 };