Fixed Map memory leak

client/components/Map/Map.jsx

@@ -108,12 +108,14 @@ class Map extends React.Component {
     this.ccLayer = null;
     this.requestDetail = null;
     this.popup = null;
+    this.isSubscribed = null;
   }
 
   componentDidMount() {
+    this.isSubscribed = true;
     mapboxgl.accessToken = process.env.MAPBOX_TOKEN;
 
-    this.map = new mapboxgl.Map({
+    const map = new mapboxgl.Map({
       container: this.mapContainer,
       style: MAP_STYLES[this.state.mapStyle],
       bounds: INITIAL_BOUNDS,
@@ -123,36 +125,39 @@ class Map extends React.Component {
       touchZoomRotate: false
     });
 
-    this.map.on('load', () => {
-      this.initLayers(true);
+    map.on('load', () => {
+      if (this.isSubscribed) {
+        this.initLayers(true);
 
-      this.map.on('click', this.onClick);
+        map.on('click', this.onClick);
 
-      // this.map.on('moveend', this.updatePosition);
-
-      this.map.once('idle', e => {
-        // this.updatePosition();
-        this.setState({ mapReady: true });
-      });
+        map.once('idle', e => {
+          this.setState({ mapReady: true });
+        });
+      }
     });
+    this.map = map;
+  }
 
-    this.setFilteredRequestCounts();
+  componentWillUnmount() {
+    this.isSubscribed = false;
+    this.map.remove();
   }
 
   componentDidUpdate(prevProps, prevState) {
     if (this.props.requests != prevProps.requests) {
       if (this.state.mapReady) {
         this.setState({ requests: this.props.requests });
-        this.map.once('idle', this.setFilteredRequestCounts);
+        // this.map.once('idle', this.setFilteredRequestCounts);
       } else {
         this.map.once('idle', () => {
           this.setState({ requests: this.props.requests });
-          this.map.once('idle', this.setFilteredRequestCounts);
+          // this.map.once('idle', this.setFilteredRequestCounts);
         });
       }
     }
 
-    if (this.props.requestTypes != prevProps.requestTypes) {
+    if (this.props.requestTypes != prevProps.requestTypes || !this.map.getSource('requests')) {
       this.requestsLayer.init({
         map: this.map,
       });

client/components/Map/index.js

@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles';
 import axios from 'axios';
 import { updateMapPosition } from '@reducers/ui';
 import { trackMapExport } from '@reducers/analytics';
-import { MAP_MODES } from '../common/CONSTANTS';
+// import { MAP_MODES } from '../common/CONSTANTS';
 import Map from './Map';
 
 const styles = theme => ({
@@ -30,10 +30,12 @@ class MapContainer extends React.Component {
     }
 
     this.openRequests = null;
+    this.isSubscribed = null;
   }
 
   componentDidMount() {
     // TODO: redux-saga, add to store instead of local state
+    this.isSubscribed = true;
     this.setData();
   }
 
@@ -43,30 +45,27 @@ class MapContainer extends React.Component {
       this.setData();
   }
 
+  componentWillUnmount() {
+    this.isSubscribed = false;
+  }
+
   getOpenRequests = async () => {
     const url = `${process.env.API_URL}/requests/pins/open`;
     const { data } = await axios.get(url);
     this.openRequests = data;
   };
 
   setData = async () => {
-    const { activeMode, pins } = this.props;
-    switch(activeMode) {
-      case MAP_MODES.OPEN:
-        if (!this.openRequests)
-          await this.getOpenRequests()
-
-        return this.setState({
-          requests: this.convertRequests(this.openRequests),
-          // ncCounts: this.openRequests.counts.nc,
-          // ccCounts: this.openRequests.counts.cc,
-        });
-      case MAP_MODES.CLOSED:
-        return this.setState({
-          requests: this.convertRequests(pins),
-          // ncCounts: null,
-          // ccCounts: null,
-        });
+    const { pins } = this.props;
+
+    if (!this.openRequests) {
+      await this.getOpenRequests();
+    }
+
+    if (this.isSubscribed) {
+      return this.setState({
+        requests: this.convertRequests(this.openRequests),
+      });
     }
   };
 

client/components/Map/layers/RequestsLayer.js

@@ -42,7 +42,6 @@ class RequestsLayer extends React.Component {
       selectedTypes,
       requests,
       colorScheme,
-      requestTypes
     } = this.props;
 
     if (activeLayer !== prev.activeLayer)