homeflowjs 0.10.19 → 0.10.21

package/actions/search.actions.js

@@ -1,16 +1,21 @@
 import SearchActionTypes from './search.types';
 // eslint-disable-next-line import/no-cycle
 import { buildQueryString } from '../search/property-search/property-search';
+import { addSearchToLocalStorage } from '../app/user-history';
 
 export const setSearch = (payload) => ({
   type: SearchActionTypes.SET_SEARCH,
   payload,
 });
 
-export const setInitialSearch = (payload) => ({
-  type: SearchActionTypes.SET_INITIAL_SEARCH,
-  payload,
-});
+export const setInitialSearch = (payload) => {
+  addSearchToLocalStorage(payload);
+
+  return {
+    type: SearchActionTypes.SET_INITIAL_SEARCH,
+    payload,
+  };
+};
 
 export const setSuggestions = (payload) => ({
   type: SearchActionTypes.SET_SUGGESTIONS,

package/app/hf-initialize.jsx

@@ -7,7 +7,6 @@ import initCookieConsent from '../cookie-consent/cookie-consent';
 import notify from './notify';
 import antiCSRF from './anti-csrf';
 import recaptcha from './recaptcha';
-import { addSearchToLocalStorage } from './user-history';
 
 import bookingCalendar from '../booking-calendar/booking-calendar';
 import { setThemePreferences, setThemeSettings, setAuthenticityToken } from '../actions/app.actions';
@@ -103,18 +102,6 @@ const hfInitialize = () => {
     store.dispatch(setArticles(Homeflow.get('articles')));
   }
 
-  // Add search to add to userHstory in localStorage if this is a search results page
-  if (
-    pageRoute === 'properties#index'
-    || pageRoute === 'postcodes#show'
-    || pageRoute === 'locations#show'
-    || pageRoute === 'counties#show'
-    || pageRoute === 'countries#show'
-  ) {
-    const { search: { currentSearch } } = store.getState();
-    addSearchToLocalStorage(currentSearch);
-  }
-
   return null;
 };
 

package/app/user-history.js

@@ -33,272 +33,3 @@ export const addSearchToLocalStorage = (search) => {
     localStorage.setItem('searchHistory', JSON.stringify(searchHistory.slice(0, 10)));
   }
 };
-
-// const userHistory = () => {
-//   // have to set timeout here to wait until entire search has been populated
-//   // should find a better way of doing this
-//   setTimeout(() => {
-//     const { search: { currentSearch } } = store.getState();
-
-//     debugger;
-
-//     if (currentSearch) {
-//       addSearchToLocalStorage(currentSearch);
-//     }
-//   }, 20000);
-// };
-
-// export default userHistory;
-
-// class Ctesius.Collections.UserHistory extends Backbone.Collection
-
-//   model: Ctesius.Models.Search
-
-//   localStorage: new Backbone.LocalStorage("UserHistory")
-
-//   id: 'UserHistoryCollection-17072013'
-
-//   walks: 1
-
-//   inBrowserStorageEnabled: ->
-//     true
-
-//   @boot: ->
-//     _collection = new Ctesius.Collections.UserHistory()
-//     _collection.fetch({async:true, reset: true})
-//     _collection.getMostRecentSearch().done (search) =>
-//       _collection.mostRecentSearchValue = search
-//       _collection.getOrCreatMostRecentSearchView().render()
-//       _collection.getOrCreatNextAndPreviousPropertyView().render() if  _collection.currentPageIsPropertyPage()
-//       Homeflow.kickEvent('user_history_ready', _collection)
-//     return _collection
-
-//   toJSON: (a) ->
-//     k = super(a)
-//     _.select(k, (n)->
-//         Object.keys(n).length != 0
-//       )
-
-//   mostRecentSearch:() ->
-//     @mostRecentSearchValue
-
-
-//   getMostRecentSearch:() ->
-//     if @mrsR && @mrsR.state() == 'pending'
-//       return @mrsR
-//     else
-//       @mrsR = new jQuery.Deferred()
-//     if @currentPageIsPropertyPage()
-//       search = @at(@mostRecentSearchPositionForCurrentProperty())
-//       if search
-//         @mrsR.resolve(search)
-//       else
-//         @createSearchFromProperty().done( (s) => @mrsR.resolve(s))
-//     return @mrsR
-
-//   createSearchFromProperty: ->
-//     property =  Ctesius.getProperty()
-//     if Ctesius.getConfig('search_from_property')?
-//       walkR = new jQuery.Deferred()
-//       search = Ctesius.getConfig('search_from_property').call(property)
-//       search.performAsData  =>
-//         walkR.resolve(search)
-//         @addSearch(search, Homeflow.kickEvent('search_from_property_added'))
-//       return walkR
-//     else
-//       search = property.generatedSearch()
-//     @walkAlongSearchUntilPropertyFound(search, @currentPropertyId())
-
-//    walkAlongSearchUntilPropertyFound:(search, property_id) ->
-//       walkR = new jQuery.Deferred()
-//       search.performAsData =>
-//         property = _.find search.get('performed_data').properties, (p)->
-//                 ("" + p.property_id) == property_id
-//         if property
-//           @addSearch search, =>
-//             @_most_recent = undefined
-//             @getOrCreatNextAndPreviousPropertyView().render()
-//             @getOrCreatMostRecentSearchView().render()
-//             return walkR.resolve(search)
-//         else if search.get('performed_data').pagination.has_next_page
-//           current_page = search.get('page')
-//           current_page = 1 unless current_page
-//           search.unset('performed_data')
-//           search.set('page', ( current_page + 1 ))
-//           @walks  = @walks + 1
-//           if @walks < 10
-//             return @walkAlongSearchUntilPropertyFound(search, property_id).done (s)=>
-//               walkR.resolve(s)
-//       return walkR
-
-//   mostRecentSearchPositionForCurrentProperty:() ->
-//     unless @_most_recent?
-//       if @currentPageIsPropertyPage()
-//         @_most_recent =  false
-//         property_id = @currentPropertyId()
-//         search_locations = []
-//         for search, i in @models
-//            if search
-//             data = search.get('performed_data')
-//             if data
-//               property = _.find search.get('performed_data').properties, (p)->
-//                 ("" + p.property_id) == property_id
-//               if property
-//                 search_locations.push(i)
-//         @_most_recent = _.max(search_locations)
-//     @_most_recent
-
-//   currentPageIsPropertyPage:() ->
-//     Ctesius.getPathManager().isPath('property_show')
-
-//   lastSearchContainsCurrentProperty:()->
-//     current_property_id = @currentPropertyId()
-//     last_search = @last()
-//     property = _.find last_search.get('performed_data').properties, (p)->
-//         ("" + p.property_id) == current_property_id
-//     return property
-
-
-//   currentPropertyId:() ->
-//     match = window.location.pathname.match(/.*\/properties\/(\d*)\/(sales|lettings)/)
-//     match[1] if match?
-
-//   refererWasASearchPage:() ->
-//     @urlIsASearchPage(document.referrer)
-
-
-//   urlIsASearchPage: ->
-//     Ctesius.getPathManager().isPath('property_show')
-
-//   containsSearch:(search) ->
-//     found = false
-//     _.each @models, (v,i) =>
-//       found = true if v.equalTo(search)
-//     found
-
-//   addSearch:(search, callback)->
-//     @each (a)=>
-//       @remove(a) if search.equalTo(a, true)
-//     search.set('added', new Date().getTime())
-//     search.performAsData =>
-//       @add(search)
-//           #if @length > 3
-//            # @reset(@last(3))
-//       @save(callback)
-//     if @length > 9
-//       @remove(@at(0))
-
-
-//   comparator: 'added'
-
-//   removeSearchById : (search_id)->
-//     search = null
-//     search = @get(search_id)
-//     @remove(search)
-//     @store({remove:search})
-
-//   toLiquid : () ->
-//     o = _.collect @models, (m)->
-//       if m.get('channel')?
-//         j = m.toJSON()
-//         unless j.search_id?
-//           j.search_id = m.cid
-//         j.link = m.link()
-//         j.description = m.description()
-//         j
-//       else
-//         {}
-//     _.select(o, (n)->
-//         Object.keys(n).length > 2
-//       )
-
-//   positionOfPropertyInSearch:(property_id, search) ->
-//     search = @mostRecentSearch() unless search?
-//     index = null
-//     for property, i in search.get('performed_data').properties
-//       index = i if ("" + property.property_id) == property_id
-//     index
-
-//   getNextProperty:()->
-//     return @_next_property if @_next_property
-//     property = @propertyAfter(@currentPropertyId())
-//     if property?
-//       return @_next_property = property
-//     else
-//       if (@mostRecentSearch().get('performed_data').properties.length - 1) == @positionOfPropertyInSearch(@currentPropertyId()) && @mostRecentSearch().get('performed_data').pagination.has_next_page
-//         #get next page
-//         new_search = @mostRecentSearch().clone()
-//         current_page = @mostRecentSearch().get('page')
-//         current_page = 1 unless current_page
-//         new_search.unset('performed_data')
-//         new_search.set('page', ( current_page + 1 ))
-//         new_search.performAsData =>
-//           @addSearch(new_search)
-//           @_next_property = new_search.get('performed_data').properties[0]
-//           @_most_recent = undefined
-//           @getOrCreatNextAndPreviousPropertyView().render()
-//       return null
-
-
-//   getPreviousProperty:->
-//     return @_prev_property if @_prev_property
-
-//     property = @propertyBefore(@currentPropertyId())
-//     if property?
-//       return @_prev_property = property
-//     else
-//       if @positionOfPropertyInSearch(@currentPropertyId()) == 0
-//         #get next page
-//         new_search = @mostRecentSearch().clone()
-//         current_page = @mostRecentSearch().get('page')
-//         if current_page
-//           new_search.unset('performed_data')
-//           new_search.set('page', ( current_page - 1 ))
-//           new_search.performAsData =>
-//             @addSearch(new_search)
-//             @_prev_property = new_search.get('performed_data').properties[@getPropertySizeFromPagination(new_search)]
-//             @_most_recent = undefined
-//             @getOrCreatNextAndPreviousPropertyView().render() if @_prev_property
-//         return null
-
-//   getPropertySizeFromPagination: (new_search) ->
-//       pagination_size = new_search.attributes.performed_data.pagination.to_record
-//       if pagination_size != ""
-//         return properties_size_from_pagination_size = pagination_size - 1
-//       else
-//         return property_value_from_pagination_size = 9
-
-
-//   propertyAfter: (property_id, search) ->
-//    search =  @mostRecentSearch() unless search?
-//    search.get('performed_data').properties[@positionOfPropertyInSearch(property_id, search)+1]
-
-//   propertyBefore: (property_id) ->
-//     search =  @mostRecentSearch()
-//     search.get('performed_data').properties[@positionOfPropertyInSearch(property_id, search)-1]
-
-
-//   getOrCreatMostRecentSearchView: () ->
-//     if @mostRecentSearchView?
-//       return @mostRecentSearchView
-//     else
-//       return @mostRecentSearchView = new Ctesius.Views.MostRecentSearch({model: @})
-
-//   getOrCreatNextAndPreviousPropertyView: () ->
-//     if @NextAndPreviousPropertyView?
-//       return @NextAndPreviousPropertyView
-//     else
-//       return @NextAndPreviousPropertyView = new Ctesius.Views.NextAndPreviousProperty({model: @})
-
-
-//   initialize: (inits) ->
-
-
-//   save : (callback) ->
-//     Backbone.sync("update", @,
-//       success : =>
-//         callback() if callback
-//         Homeflow.kickEvent('user_history_search_added', @)
-
-//       error: ->
-//       )

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
 import debounce from 'lodash.debounce';
 import { setBranchesSearch } from '../../actions/branches.actions';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 const BranchesSearchInput = ({
   placeholder,
@@ -53,7 +54,7 @@ const BranchesSearchInput = ({
       setSuggestions(suggestions);
     });
 
-  const debouncedGetSuggestions = useCallback(debounce(getSuggestions, 300), []);
+  const debouncedGetSuggestions = useCallback(debounce(getSuggestions, DEBOUNCE_DELAY), []);
 
   const renderSuggestion = (suggestion) => (
     <span className="react-autosuggest_span">{suggestion}</span>

package/hooks/index.js

@@ -1,7 +1,9 @@
 import useDefaultSort from './use-default-sort.hook';
 import useGeolocate from './use-geolocate';
+import useOutsideClick from './use-outside-click';
 
 export {
   useDefaultSort,
   useGeolocate,
+  useOutsideClick,
 };

package/hooks/use-outside-click.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [ref]);
+  return ref;
+};
+
+export default useOutsideClick;

package/instant-valuation/instant-valuation/instant-valuation.component.jsx

@@ -10,6 +10,7 @@ import IntroStep from '../intro-step/intro-step.component';
 import YourDetailsStep from '../your-details-step/your-details-step.component';
 import SimilarPropertiesStep from '../similar-properties-step/similar-properties-step.component';
 import ResultStep from '../result-step/result-step.component';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 import './instant-valuation.styles.scss';
 
@@ -82,7 +83,7 @@ class InstantValuation extends Component {
     this.getSimilarProperties = this.getSimilarProperties.bind(this);
     this.toggleSimilarProperty = this.toggleSimilarProperty.bind(this);
     this.getValuation = this.getValuation.bind(this);
-    this.addressLookup = debounce(this.addressLookup, 1000).bind(this);
+    this.addressLookup = debounce(this.addressLookup, DEBOUNCE_DELAY).bind(this);
     this.reset = this.reset.bind(this);
     this.setMessage = this.setMessage.bind(this);
   }

package/package.json

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

package/properties/load-more-button/load-more-button.component.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { loadNext } from '../../actions/properties.actions';
@@ -7,21 +7,18 @@ import DefaultLoader from '../../shared/loader.component';
 import { addSearchToLocalStorage } from '../../app/user-history';
 
 const LoadMoreButton = (props) => {
+  const dispatch = useDispatch();
+  const currentSearch = useSelector((state) => state.search?.currentSearch);
+  const pagination = useSelector((state) => state.properties?.pagination);
+
   const {
-    loadNext,
-    pagination,
     children,
-    Loader = DefaultLoader,
-    currentSearch,
+    Loader,
     ...otherProps
   } = props;
 
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    addSearchToLocalStorage(currentSearch);
-  }, [pagination])
-
   if (!pagination.has_next_page) return null;
 
   if (loading) return <Loader height="24px" />;
@@ -32,8 +29,11 @@ const LoadMoreButton = (props) => {
       onClick={(e) => {
         e.currentTarget.blur();
         setLoading(true);
-        loadNext()
-          .then(() => setLoading(false));
+        dispatch(loadNext())
+          .then(() => {
+            setLoading(false);
+            addSearchToLocalStorage(currentSearch);
+          });
       }}
       {...otherProps}
     >
@@ -43,21 +43,12 @@ const LoadMoreButton = (props) => {
 };
 
 LoadMoreButton.propTypes = {
-  loadNext: PropTypes.func.isRequired,
-  pagination: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
+  Loader: PropTypes.elementType,
 };
 
-const mapStateToProps = state => ({
-  pagination: state.properties.pagination,
-  currentSearch: state.search.currentSearch,
-});
-
-const mapDispatchToProps = {
-  loadNext,
+LoadMoreButton.defaultProps = {
+  Loader: DefaultLoader,
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(LoadMoreButton);
+export default LoadMoreButton;

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

@@ -6,6 +6,7 @@ import Autosuggest from 'react-autosuggest';
 
 import { setSuggestions, setSearchField } from '../../actions/search.actions';
 import propertySearch from '../property-search/property-search';
+import { DEBOUNCE_DELAY } from '../../utils';
 
 import { autosuggestTheme } from './location-input.styles';
 
@@ -15,7 +16,7 @@ class LocationInput extends Component {
 
     this.onLocationChange = this.onLocationChange.bind(this);
     // wait half a second after typing stops before fetching results
-    this.debouncedLoadSuggestions = debounce(this.loadSuggestions, 500);
+    this.debouncedLoadSuggestions = debounce(this.loadSuggestions, DEBOUNCE_DELAY);
   }
 
   onLocationChange(event, { newValue }) {

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

@@ -106,6 +106,7 @@ SearchForm.propTypes = {
     'least-square-feet-first',
     'most-recently-launched-first',
     'most-recently-updated-first',
+    '',
   ]),
   submitCallback: PropTypes.func,
 };

package/user/default-profile/user-profile/user-profile-modal.component.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { connect } from 'react-redux';
 import {
   HashRouter as Router,
   Route,
   Switch,
   NavLink,
+  useHistory
 } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
@@ -17,6 +18,7 @@ import ForgottenPassword from '../forgotten-password/forgotten-password.componen
 import SignOutButton from '../../sign-out-button/sign-out-button.component';
 import Loader from '../../../shared/loader.component';
 import { loadingStyles } from '../../../modal/modal.component';
+import useOutsideClick from '../../../hooks/use-outside-click';
 
 import './user-profile.styles.scss';
 
@@ -32,9 +34,17 @@ const UserProfileModal = ({ currentUser, loading }) => {
   }
 
   const logo = Homeflow.get('agency_logo');
+  const history = useHistory();
+  const ref = useRef();
+
+  const handleClickOutside = () => {
+    history.push('/')
+  };
+
+  useOutsideClick(ref, handleClickOutside);
 
   return (
-    <div className="user-profile hf-modal">
+    <div className="user-profile hf-modal" ref={ref}>
       <div className="user-profile__side">
         <img src={logo} alt="Logo" className="user-profile__agency-logo" />
 

package/utils/index.js

@@ -1,12 +1,12 @@
 export { default as stampDutyCalculator } from './stamp-duty-calculator/stamp-duty-calculator';
 
-export const capitalizeFirstLetter = str => (
+export const capitalizeFirstLetter = (str) => (
   str.charAt(0).toUpperCase() + str.slice(1)
-)
+);
 
-export const camelToSnakeCase = str => (
-  str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
-)
+export const camelToSnakeCase = (str) => (
+  str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
+);
 
 export const isEmpty = (obj) => {
   for (const key in obj) {
@@ -16,9 +16,7 @@ export const isEmpty = (obj) => {
   return true;
 };
 
-export const numberWithCommas = (num) => {
-  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
+export const numberWithCommas = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 
 // TODO: DRY these two functions up
 export const findSavedSearchIndex = (savedSearches, search) => {
@@ -64,9 +62,7 @@ export const formatMoney = (num) => {
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
 
-export const uniqueKey = () => {
-  return Math.random().toString(36).substring(7);
-};
+export const uniqueKey = () => Math.random().toString(36).substring(7);
 
 export const objectDiff = (oldObject, newObject) => {
   const changed = {};
@@ -78,8 +74,10 @@ export const objectDiff = (oldObject, newObject) => {
   }
 
   return changed;
-}
+};
 
-export const compact = (array) => array.filter(item => typeof item !== 'undefined' && item !== null);
+export const compact = (array) => array.filter((item) => typeof item !== 'undefined' && item !== null);
 
 export const sanitizeText = (string) => new Option(string).innerHTML;
+
+export const DEBOUNCE_DELAY = 200;