homeflowjs 0.13.25 → 0.13.27

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.25",
+  "version": "0.13.27",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

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>;
+}

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

@@ -107,9 +107,11 @@ class LocationInput extends Component {
       placeholder,
       clearButton,
       clearButtonClassName,
+      pattern,
     } = this.props;
 
     const inputProps = {
+      pattern,
       placeholder,
       value: q,
       onChange: this.onLocationChange,
@@ -153,6 +155,7 @@ LocationInput.propTypes = {
   setSuggestions: PropTypes.func.isRequired,
   setSearchField: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  pattern: PropTypes.string,
   className: PropTypes.string,
   search: PropTypes.object.isRequired,
   searchOnSelection: PropTypes.bool,
@@ -162,6 +165,7 @@ LocationInput.propTypes = {
 
 LocationInput.defaultProps = {
   placeholder: 'Enter a location...',
+  pattern: '',
   className: '',
   suggestions: [],
   searchOnSelection: false,