homeflowjs 0.13.24 → 0.13.26

package/actions/branches.actions.js

@@ -9,3 +9,8 @@ export const setBranchesSearch = (payload) => ({
   type: BranchesActionTypes.SET_BRANCHES_SEARCH,
   payload,
 });
+
+export const setBranchesPagination = (payload) => ({
+  type: BranchesActionTypes.SET_BRANCHES_PAGINATION,
+  payload,
+});

package/actions/branches.types.js

@@ -1,6 +1,7 @@
 const BranchesActionTypes = {
   SET_BRANCHES: 'SET_BRANCHES',
   SET_BRANCHES_SEARCH: 'SET_BRANCHES_SEARCH',
+  SET_BRANCHES_PAGINATION: 'SET_BRANCHES_PAGINATION',
 };
 
 export default BranchesActionTypes;

package/app/hf-initialize.jsx

@@ -14,8 +14,11 @@ import { fetchUser } from '../actions/user.actions';
 import {
   setProperties, setPagination, setProperty, setPropertyLinksAsync,
 } from '../actions/properties.actions';
-import { setSearch, setInitialSearch, setSearchField, setPlace } from '../actions/search.actions';
+import {
+  setSearch, setInitialSearch, setSearchField, setPlace,
+} from '../actions/search.actions';
 import { setArticles } from '../actions/articles.actions';
+import { setBranches, setBranchesPagination } from '../actions/branches.actions';
 import parseFragment from '../search/property-search/parse-fragment';
 import { isEmpty } from '../utils';
 
@@ -105,6 +108,11 @@ const hfInitialize = () => {
     store.dispatch(setArticles(Homeflow.get('articles')));
   }
 
+  if (pageRoute === 'branches#index') {
+    store.dispatch(setBranches(Homeflow.get('branches')));
+    store.dispatch(setBranchesPagination(Homeflow.get('branchesPagination')));
+  }
+
   // all property results routes
   if (pageRoute === 'properties#index'
       || pageRoute === 'counties#show'

package/hooks/index.js

@@ -3,6 +3,7 @@ import useGeolocate from './use-geolocate';
 import useOutsideClick from './use-outside-click';
 import { useOnScreen } from './use-on-screen';
 import usePropertyInfiniteScroll from './use-property-inifinite-scroll';
+import useLoadBranches from './use-load-branches';
 
 export {
   useDefaultSort,
@@ -10,4 +11,5 @@ export {
   useOutsideClick,
   useOnScreen,
   usePropertyInfiniteScroll,
+  useLoadBranches,
 };

package/hooks/use-load-branches.js

@@ -0,0 +1,36 @@
+/*
+ * This hook renders a handler to load the next page of branch results
+ *
+ * The loadBranches handler takes in an optional query string to pass to the branch search
+ * which loads branches with a particular filter
+ *
+ * e.g.
+ * loadBranches('&channel=sales')
+ */
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setBranches, setBranchesPagination } from '../actions/branches.actions';
+
+const useLoadBranches = () => {
+  const [loading, setLoading] = useState(false);
+  const branches = useSelector((state) => state.branches.branches);
+  const pagination = useSelector((state) => state.branches.pagination);
+  const dispatch = useDispatch();
+
+  const loadBranches = (query = '') => {
+    if (pagination.hasNextPage) {
+      setLoading(true);
+      fetch(`/branches.ljson?page=${pagination.currentPage + 1}${query}`)
+        .then((response) => response.json())
+        .then((json) => {
+          dispatch(setBranchesPagination(json.pagination));
+          dispatch(setBranches([...branches, ...json.branches]));
+          setLoading(false);
+        });
+    }
+  };
+
+  return { loadBranches, loadingBranches: loading, hasNextPage: pagination.hasNextPage };
+};
+
+export default useLoadBranches;

package/hooks/use-load-branches.spec.js

@@ -0,0 +1,31 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import * as redux from 'react-redux';
+import useLoadBranches from './use-load-branches';
+import store from '../store';
+import { TestProvider } from '../reducers/test-provider';
+import { setBranchesPagination } from '../actions/branches.actions';
+
+const INITIAL_BRANCHES_PAGINATION = {
+  currentPage: 1,
+  hasPrevPage: false,
+  totalCount: 100,
+  hasNextPage: true,
+};
+
+beforeAll(() => {
+  act(() => {
+    store.dispatch(setBranchesPagination(INITIAL_BRANCHES_PAGINATION))
+  });
+});
+
+describe('useLoadBranches', () => {
+  const renderedHook = renderHook(useLoadBranches, { wrapper: TestProvider });
+
+  it('renders a loadBranches function, loadingBranches boolean and hasNextPage boolean', () => {
+    const { loadBranches, loadingBranches, hasNextPage } = renderedHook.result.current;
+
+    expect(typeof loadBranches).toBe('function');
+    expect(typeof loadingBranches).toBe('boolean');
+    expect(typeof hasNextPage).toBe('boolean');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.13.24",
+  "version": "0.13.26",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/properties-map/geonames-map.js

@@ -93,6 +93,13 @@ export default class GeonamesMap extends DraggableMap {
     this.map.on('dragend', () => {
       store.dispatch(setPlace(null))
       store.dispatch(setSearchField({ q: '' }));
+
+      // Remove the suggested locations links as they no longer represent the 
+      // initially searched location
+      const locationLinksElement = document.querySelector('.js-suggested-destinations');
+      if (locationLinksElement && Homeflow.get('hide_location_links_on_drag')) {
+          locationLinksElement.style.display = 'none';
+      }
     });
 
     /**

package/reducers/branches.reducer.js

@@ -3,6 +3,7 @@ import BranchesActionTypes from '../actions/branches.types';
 const INITIAL_STATE = {
   branches: [],
   branchesSearch: '',
+  pagination: {},
 };
 
 const branchesReducer = (state = INITIAL_STATE, action) => {
@@ -17,6 +18,11 @@ const branchesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         branchesSearch: action.payload,
       };
+    case BranchesActionTypes.SET_BRANCHES_PAGINATION:
+      return {
+        ...state,
+        pagination: action.payload,
+      };
     default: return state;
   }
 };

package/reducers/test-provider.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import store from '../store';
+
+export function TestProvider({ children }) {
+  return <Provider store={store}>{children}</Provider>;
+}