homeflowjs 0.12.19 → 0.12.21

package/actions/properties.actions.js

@@ -151,6 +151,28 @@ export const loadNext = () => (dispatch, getState) => {
     });
 };
 
+export const loadPage = (payload) => (dispatch, getState) => {
+  dispatch(setLoading({ properties: true }));
+  // set page on search to page + 1
+  let newProperties = [...getState().properties.properties];
+  const newSearch = { ...getState().search.currentSearch };
+  newSearch.page = payload;
+  // conduct search ljson
+  return fetch(`/search.ljson?${buildQueryString(newSearch)}`)
+    .then((response) => response.json())
+    .then((json) => {
+      if (json.properties) {
+        // add the page number to each new property for dividing properties into per-page divs
+        const addedProperties = json.properties.map((property) => (
+          { ...property, resultPage: newSearch.page }
+        ));
+        newProperties = [...addedProperties, ...newProperties];
+        dispatch(setProperties(newProperties));
+        dispatch(setLoading({ properties: false }));
+      }
+    });
+};
+
 export const toggleSavedProperty = (payload) => ({
   type: PropertiesActionTypes.TOGGLE_SAVED_PROPERTY,
   payload,

package/package.json

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

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

@@ -93,9 +93,20 @@ class LocationInput extends Component {
     return suggestion.label;
   }
 
+  onClearButtonClick() {
+    const { setSuggestions, setSearchField } = this.props;
+    setSuggestions([]);
+    setSearchField({ q: '' });
+  }
+
   render() {
     const {
-      suggestions, search: { q = '' }, className, placeholder,
+      suggestions,
+      search: { q = '' },
+      className,
+      placeholder,
+      clearButton,
+      clearButtonClassName,
     } = this.props;
 
     const inputProps = {
@@ -105,23 +116,34 @@ class LocationInput extends Component {
     };
 
     return (
-      <Autosuggest
-        value={q}
-        suggestions={suggestions}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested.bind(this)}
-        getSuggestionValue={this.getSuggestionValue.bind(this)}
-        renderSuggestion={this.renderSuggestion.bind(this)}
-        inputProps={{
-          ...inputProps,
-          className,
-          'data-testid': 'location-input',
-          id: 'search-location-input',
-          name: 'Location search',
-        }}
-        containerProps={{ 'data-testid': 'suggestions' }}
-        theme={autosuggestTheme}
-      />
+      <div>
+        <Autosuggest
+          value={q}
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested.bind(this)}
+          getSuggestionValue={this.getSuggestionValue.bind(this)}
+          renderSuggestion={this.renderSuggestion.bind(this)}
+          inputProps={{
+            ...inputProps,
+            className,
+            'data-testid': 'location-input',
+            id: 'search-location-input',
+            name: 'Location search',
+          }}
+          containerProps={{ 'data-testid': 'suggestions' }}
+          theme={autosuggestTheme}
+        />
+        {(clearButton && q) && (
+          <button 
+            className={clearButtonClassName}
+            type="reset"
+            onClick={this.onClearButtonClick.bind(this)}
+          >
+            &times;
+          </button>
+        )}
+      </div>
     );
   }
 }
@@ -134,6 +156,8 @@ LocationInput.propTypes = {
   className: PropTypes.string,
   search: PropTypes.object.isRequired,
   searchOnSelection: PropTypes.bool,
+  clearButton: PropTypes.bool,
+  clearButtonClassName: PropTypes.string,
 };
 
 LocationInput.defaultProps = {
@@ -141,6 +165,8 @@ LocationInput.defaultProps = {
   className: '',
   suggestions: [],
   searchOnSelection: false,
+  clearButton: false,
+  clearButtonClassName: '',
 };
 
 const mapStateToProps = (state) => ({