From 30007a085f5c191871294b5036cce2f354462dc3 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 22 Aug 2017 14:30:28 +0300 Subject: [PATCH] Using idle event instead of bounds_changed --- src/components/SearchMap/SearchMap.js | 22 +++++++++------ src/containers/SearchPage/SearchPage.js | 27 ++++++++++++++----- .../__snapshots__/SearchPage.test.js.snap | 26 ++++++++++-------- 3 files changed, 49 insertions(+), 26 deletions(-) diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js index add46d98..b62b9408 100644 --- a/src/components/SearchMap/SearchMap.js +++ b/src/components/SearchMap/SearchMap.js @@ -53,7 +53,7 @@ const MapWithGoogleMap = withGoogleMap(props => { isOpenOnModal, listings, listingOpen, - onBoundsChanged, + onIdle, onCloseAsModal, onListingClicked, onMapLoad, @@ -76,7 +76,11 @@ const MapWithGoogleMap = withGoogleMap(props => { }); const openedCard = listingOpen - ? + ? : null; return ( @@ -93,7 +97,7 @@ const MapWithGoogleMap = withGoogleMap(props => { fullscreenControl: !isOpenOnModal, }} ref={onMapLoad} - onBoundsChanged={onBoundsChanged} + onIdle={onIdle} > {priceLabels} {openedCard} @@ -127,7 +131,7 @@ export class SearchMapComponent extends Component { // Do not call fitMapToBounds if bounds are the same. // Our bounds are viewport bounds, and fitBounds will try to add margins around those bounds // that would result to zoom-loop (bound change -> fitmap -> bounds change -> ...) - if (!isEqual(nextProps.bounds, currentBounds)) { + if (!isEqual(nextProps.bounds, currentBounds) && nextProps.useLocationSearchBounds) { fitMapToBounds(this.googleMap, nextProps.bounds); } } @@ -166,7 +170,7 @@ export class SearchMapComponent extends Component { center, isOpenOnModal, listings, - onBoundsChanged, + onIdle, onCloseAsModal, zoom, } = this.props; @@ -185,8 +189,8 @@ export class SearchMapComponent extends Component { listingOpen={this.state.listingOpen} onListingClicked={this.onListingClicked} onMapLoad={this.onMapLoadHandler} - onBoundsChanged={() => { - onBoundsChanged(this.googleMap); + onIdle={() => { + onIdle(this.googleMap); }} onCloseAsModal={() => { if (onCloseAsModal) { @@ -204,6 +208,7 @@ SearchMapComponent.defaultProps = { className: '', rootClassName: null, mapRootClassName: null, + useLocationSearchBounds: true, bounds: null, center: new sdkTypes.LatLng(0, 0), isOpenOnModal: false, @@ -221,7 +226,8 @@ SearchMapComponent.propTypes = { isOpenOnModal: bool, listings: arrayOf(propTypes.listing), mapRootClassName: string, - onBoundsChanged: func.isRequired, + useLocationSearchBounds: bool, // eslint-disable-line react/no-unused-prop-types + onIdle: func.isRequired, onCloseAsModal: func, rootClassName: string, zoom: number, diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js index 24cf3abf..a61510a2 100644 --- a/src/containers/SearchPage/SearchPage.js +++ b/src/containers/SearchPage/SearchPage.js @@ -26,8 +26,8 @@ import css from './SearchPage.css'; const RESULT_PAGE_SIZE = 12; const SHARETRIBE_API_MAX_PAGE_SIZE = 100; const MAX_SEARCH_RESULT_PAGES_ON_MAP = 5; // 100 * 5 = 500 listings are shown on a map. -const DEBOUNCE_MAP_BOUNDS_CHANGE = 500; // bounds_change event is fired too often while dragging -const MODAL_BREAKPOINT = 768; /* Search is in modal on mobile layout */ +const MODAL_BREAKPOINT = 768; // Search is in modal on mobile layout +const SEARCH_WITH_MAP_DEBOUNCE = 300; // Little bit of debounce before search is initiated. const pickSearchParamsOnly = params => { const { address, origin, bounds } = params || {}; @@ -48,8 +48,9 @@ export class SearchPageComponent extends Component { // we need to by pass 2nd search created by initial 'bounds_changes' event this.useLocationSearchBounds = true; this.modalOpenedBoundsChange = false; + this.searchMapListingsInProgress = false; - this.onBoundsChanged = debounce(this.onBoundsChanged.bind(this), DEBOUNCE_MAP_BOUNDS_CHANGE); + this.onIdle = debounce(this.onIdle.bind(this), SEARCH_WITH_MAP_DEBOUNCE); this.fetchMoreListingsToMap = this.fetchMoreListingsToMap.bind(this); } @@ -72,7 +73,9 @@ export class SearchPageComponent extends Component { } } - onBoundsChanged(googleMap) { + // We are using Google Maps idle event instead of bounds_changed, since it will not be fired + // too often (in the middle of map's pan or zoom activity) + onIdle(googleMap) { const { flattenedRoutes, history, location } = this.props; const { address, country, boundsChanged } = parse(location.search, { @@ -105,6 +108,7 @@ export class SearchPageComponent extends Component { const perPage = SHARETRIBE_API_MAX_PAGE_SIZE; const page = 1; const searchParamsForMapResults = { ...searchInURL, page, perPage }; + this.searchMapListingsInProgress = true; // Search more listings for map onSearchMapListings(searchParamsForMapResults) @@ -113,6 +117,8 @@ export class SearchPageComponent extends Component { page < MAX_SEARCH_RESULT_PAGES_ON_MAP; if (hasNextPage) { onSearchMapListings({ ...searchParamsForMapResults, page: page + 1 }); + } else { + this.searchMapListingsInProgress = false; } }) .catch(error => { @@ -205,11 +211,12 @@ export class SearchPageComponent extends Component { bounds={bounds} center={origin} listings={mapListings || []} - onBoundsChanged={this.onBoundsChanged} + onIdle={this.onIdle} isOpenOnModal={this.state.isSearchMapOpenOnMobile} onCloseAsModal={() => { onManageDisableScrolling('SearchPage.map', false); }} + useLocationSearchBounds={this.useLocationSearchBounds} /> ); const showSearchMapInMobile = this.state.isSearchMapOpenOnMobile ? searchMap : null; @@ -247,7 +254,11 @@ export class SearchPageComponent extends Component { {listingsAreLoaded && totalItems === 0 ? noResults : null} {searchInProgress ? loadingResults : null} -
+
-
+
+ search={Object {}}> + +
-