Merge pull request #881 from sharetribe/fix-production-rendering-vol2

Fix: render only when mountNode is present

CHANGELOG.md

@@ -11,6 +11,10 @@ way to update this template, but currently, we follow a pattern:
 * Patch (v0.0.**X**): Bug fixes and small changes to components.
 
 ---
+## v1.3.1
+* [fix] Hotfix: reverting the usage of ReusableMapContainer due to
+  production build error.
+  [#881](https://github.com/sharetribe/flex-template-web/pull/881)
 
 ## v1.3.0
 * [change] Reusable SearchMap.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/components/SearchMap/SearchMap.js

@@ -12,7 +12,6 @@ import { googleBoundsToSDKBounds } from '../../util/googleMaps';
 import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
 import config from '../../config';
 
-import ReusableMapContainer from './ReusableMapContainer';
 import css from './SearchMap.css';
 
 const LABEL_HANDLE = 'SearchMapLabel';
@@ -241,7 +240,6 @@ export class SearchMapComponent extends Component {
     const {
       className,
       rootClassName,
-      reuseableContainerClassName,
       center,
       isOpenOnModal,
       listings: originalListings,
@@ -265,30 +263,28 @@ export class SearchMapComponent extends Component {
     // container element listens clicks so that opened SearchMapInfoCard can be closed
     /* eslint-disable jsx-a11y/no-static-element-interactions */
     return isMapsLibLoaded ? (
-      <ReusableMapContainer className={reuseableContainerClassName}>
+      <MapWithGoogleMap
-        <MapWithGoogleMap
+        containerElement={<div className={classes} onClick={this.onMapClicked} />}
-          containerElement={<div className={classes} onClick={this.onMapClicked} />}
+        mapElement={<div className={mapClasses} />}
-          mapElement={<div className={mapClasses} />}
+        center={center}
-          center={center}
+        isOpenOnModal={isOpenOnModal}
-          isOpenOnModal={isOpenOnModal}
+        listings={listings}
-          listings={listings}
+        activeListingId={activeListingId}
-          activeListingId={activeListingId}
+        infoCardOpen={this.state.infoCardOpen}
-          infoCardOpen={this.state.infoCardOpen}
+        onListingClicked={this.onListingClicked}
-          onListingClicked={this.onListingClicked}
+        onMapLoad={this.onMapLoadHandler}
-          onMapLoad={this.onMapLoadHandler}
+        onIdle={() => {
-          onIdle={() => {
+          if (this.googleMap) {
-            if (this.googleMap) {
+            onIdle(this.googleMap);
-              onIdle(this.googleMap);
+          }
-            }
+        }}
-          }}
+        onCloseAsModal={() => {
-          onCloseAsModal={() => {
+          if (onCloseAsModal) {
-            if (onCloseAsModal) {
+            onCloseAsModal();
-              onCloseAsModal();
+          }
-            }
+        }}
-          }}
+        zoom={zoom}
-          zoom={zoom}
+      />
-        />
-      </ReusableMapContainer>
     ) : (
       <div className={classes} />
     );
@@ -300,7 +296,6 @@ SearchMapComponent.defaultProps = {
   className: null,
   rootClassName: null,
   mapRootClassName: null,
-  reuseableContainerClassName: null,
   bounds: null,
   center: new sdkTypes.LatLng(0, 0),
   activeListingId: null,
@@ -316,7 +311,6 @@ SearchMapComponent.propTypes = {
   className: string,
   rootClassName: string,
   mapRootClassName: string,
-  reuseableContainerClassName: string,
   bounds: propTypes.latlngBounds,
   center: propTypes.latlng,
   activeListingId: propTypes.uuid,

src/containers/SearchPage/SearchPage.js

@@ -251,10 +251,9 @@ export class SearchPageComponent extends Component {
             showAsModalMaxWidth={MODAL_BREAKPOINT}
             onManageDisableScrolling={onManageDisableScrolling}
           >
-            <div className={css.mapWrapper}>
+            <div className={css.map}>
               {shouldShowSearchMap ? (
                 <SearchMap
-                  reuseableContainerClassName={css.map}
                   activeListingId={activeListingId}
                   bounds={bounds}
                   center={origin}

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -116,7 +116,6 @@ exports[`SearchPageComponent matches snapshot 1`] = `
           mapRootClassName={null}
           onCloseAsModal={[Function]}
           onIdle={[Function]}
-          reuseableContainerClassName={null}
           rootClassName={null}
           useLocationSearchBounds={true}
           zoom={11}