Move map-specific props to LeafletMap cmpt

jaryncolbert · Aug 7, 2019 · 07c756e · 07c756e
1 parent d2e8302
commit 07c756e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 25 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -5,17 +5,8 @@ import Search from "./search/Search";
 import { getRcLocations, getLocationData } from "../api";
 
 export default class App extends React.Component {
-    // Centered on Yaounde, Cameroon
-    DEFAULT_VIEWPORT = {
-        center: [3.846042, 11.502213],
-        zoom: 2.5
-    };
-
-    DEFAULT_PADDING = { padding: [50, 50] };
-
     state = {
         locations: [],
-        viewport: this.DEFAULT_VIEWPORT,
         selected: "",
         triggerClearInput: false,
         triggerFitBounds: false,
@@ -136,11 +127,9 @@ export default class App extends React.Component {
                         fitBoundsTriggered={this.state.triggerFitBounds}
                         onFitBounds={this.onFitBounds}
                         locations={this.state.locations}
-                        viewport={this.state.viewport}
                         selected={this.state.selected}
                         onClick={this.triggerClearInput}
                         isLoading={this.state.mapLoading}
-                        padding={this.DEFAULT_PADDING}
                     />
                 </div>
             </div>

diff --git a/src/components/map/LeafletMap.js b/src/components/map/LeafletMap.js
@@ -8,21 +8,27 @@ import "react-leaflet-markercluster/dist/styles.min.css";
 import "../../css/map.css";
 
 export default class LeafletMap extends React.Component {
+    // Centered on Yaounde, Cameroon
+    DEFAULT_VIEWPORT = {
+        center: [3.846042, 11.502213],
+        zoom: 2.5
+    };
+
+    DEFAULT_PADDING = { padding: [50, 50] };
+
     state = {
         fitBoundsTriggered: false
     };
 
     fitBounds = bounds => {
-        const { onFitBounds, padding } = this.props;
-
         const mapElem = this.refs.mapRef.leafletElement;
 
-        mapElem.fitBounds(bounds, padding);
+        mapElem.fitBounds(bounds, this.DEFAULT_PADDING);
         this.setState({
             fitBoundsTriggered: false
         });
 
-        onFitBounds();
+        this.props.onFitBounds();
     };
 
     triggerFitBounds = () => {
@@ -44,21 +50,14 @@ export default class LeafletMap extends React.Component {
     }
 
     render() {
-        const {
-            locations,
-            selected,
-            viewport,
-            isLoading,
-            padding,
-            ...otherProps
-        } = this.props;
+        const { locations, selected, isLoading, ...otherProps } = this.props;
         return isLoading ? (
             <Spinner isLoading={isLoading} id="map-spinner" />
         ) : (
             <Map
                 {...otherProps}
                 ref="mapRef"
-                viewport={viewport}
+                viewport={this.DEFAULT_VIEWPORT}
                 zoomSnap="0.2"
                 maxZoom={11}>
                 <TileLayer
@@ -71,7 +70,7 @@ export default class LeafletMap extends React.Component {
                     maxClusterRadius="45"
                     locations={locations}
                     selected={selected}
-                    padding={padding}
+                    padding={this.DEFAULT_PADDING}
                 />
             </Map>
         );