997 - RequestsLayer fix

client/components/Map/Map.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import React from 'react';
-// import PropTypes from 'proptypes';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import mapboxgl from 'mapbox-gl';
@@ -36,7 +36,7 @@ import MapSearch from './controls/MapSearch';
 // import MapRegion from './controls/MapRegion';
 // import MapMeta from './controls/MapMeta';
 
-// import RequestDetail from './RequestDetail';
+import RequestDetail from './RequestDetail';
 
 const styles = theme => ({
   root: {
@@ -52,7 +52,6 @@ const styles = theme => ({
   },
 })
 
-// TODO: major refactor, hooks
 class Map extends React.Component {
   constructor(props) {
     super(props);
@@ -124,6 +123,13 @@ class Map extends React.Component {
       }
     }
 
+    // requestsLayer requires requestTypes for circle-color
+    if (this.props.requestTypes != prevProps.requestTypes) {
+      this.requestsLayer.init({
+        map: this.map,
+      });
+    }
+
     if (
       this.state.filterGeo !== prevState.filterGeo ||
       this.state.selectedTypes !== prevState.selectedTypes
@@ -140,7 +146,7 @@ class Map extends React.Component {
           this.setState({
             locationInfo: {
               nc: {
-                name: ncNameFromId(geo.properties.nc_id),
+                name: geo.properties.council_name,
                 // url removed from /geojson payload
                 // need to map from /councils response
                 // url: geo.properties.waddress || geo.properties.dwebsite,
@@ -163,10 +169,6 @@ class Map extends React.Component {
   }
 
   initLayers = addListeners => {
-    this.requestsLayer.init({
-      map: this.map,
-    });
-
     this.addressLayer.init({
       map: this.map,
       addListeners,
@@ -421,6 +423,7 @@ class Map extends React.Component {
       pinsInfo,
       getPinInfo,
       lastUpdated,
+      requestTypes,
     } = this.props;
 
     const {
@@ -448,6 +451,7 @@ class Map extends React.Component {
           activeLayer={activeRequestsLayer}
           selectedTypes={selectedTypes}
           colorScheme={colorScheme}
+          requestTypes={requestTypes}
         />
         <AddressLayer
           ref={el => this.addressLayer = el}
@@ -464,9 +468,9 @@ class Map extends React.Component {
           visible={geoFilterType === GEO_FILTER_TYPES.cc}
           boundaryStyle={mapStyle === 'dark' ? 'light' : 'dark'}
         />
-        {/* <div ref={el => this.requestDetail = el}>
+        <div ref={el => this.requestDetail = el}>
           <RequestDetail srnumber={selectedRequestId} />
-        </div> */}
+        </div>
         { this.state.mapReady && (
           <>
             {/* <MapOverview
@@ -502,12 +506,17 @@ class Map extends React.Component {
   }
 }
 
-Map.propTypes = {};
+Map.propTypes = {
+  requests: PropTypes.shape({}),
+  position: PropTypes.shape({}),
+  selectedTypes: PropTypes.arrayOf(PropTypes.number),
+};
 
 Map.defaultProps = {};
 
 const mapStateToProps = state => ({
   ncBoundaries: state.metadata.ncGeojson,
+  requestTypes: state.metadata.requestTypes,
 });
 
 export default connect(mapStateToProps, null)(withStyles(styles)(Map));

client/components/Map/index.js

@@ -41,9 +41,6 @@ class MapContainer extends React.Component {
     if (prevProps.activeMode !== this.props.activeMode ||
         prevProps.pins !== this.props.pins)
       this.setData();
-
-    if (prevProps.requestTypes !== this.props.requestTypes)
-      this.setState({ selectedTypes: this.getSelectedTypes() });
   }
 
   getOpenRequests = async () => {
@@ -91,11 +88,13 @@ class MapContainer extends React.Component {
     }))
   });
 
+  // TODO: fix this
   getSelectedTypes = () => {
     const { requestTypes } = this.props;
-    return Object.keys(requestTypes).filter(type => {
-      return type !== 'All' && requestTypes[type]
-    });
+    // return Object.keys(requestTypes).filter(type => {
+    //   return type !== 'All' && requestTypes[type]
+    // });
+    return requestTypes;
   };
 
   render() {
@@ -123,7 +122,7 @@ const mapStateToProps = state => ({
   position: state.ui.map,
   lastUpdated: state.metadata.lastPulledLocal,
   activeMode: state.ui.map.activeMode,
-  requestTypes: state.mapFilters.requestTypes,
+  requestTypes: state.filters.requestTypes,
 });
 
 const mapDispatchToProps = dispatch => ({

client/components/Map/layers/RequestsLayer.js

@@ -9,17 +9,13 @@ import { getColors } from '../mapColors';
 // so you don't cover up important labels
 const BEFORE_ID = 'poi-label';
 
-function circleColors(colorScheme) {
-  const colors = getColors(colorScheme);
-
-  const colorsArray = Object.keys(REQUEST_TYPES).reduce((p, c) => {
-    return [...p, c, colors[c]];
-  }, []);
-
+function circleColors(requestTypes) {
+  const colors = [];
+  requestTypes.forEach(type => colors.push(type.typeId, type.color))
   return [
     'match',
     ['get', 'type'],
-    ...colorsArray,
+    ...colors,
     '#FFFFFF',
   ];
 }
@@ -46,6 +42,7 @@ class RequestsLayer extends React.Component {
       selectedTypes,
       requests,
       colorScheme,
+      requestTypes
     } = this.props;
 
     if (activeLayer !== prev.activeLayer)
@@ -65,7 +62,7 @@ class RequestsLayer extends React.Component {
     const { requests } = this.props;
     this.map.addSource('requests', {
       type: 'geojson',
-      data: requests
+      data: requests,
     });
   };
 
@@ -74,6 +71,7 @@ class RequestsLayer extends React.Component {
       activeLayer,
       selectedTypes,
       colorScheme,
+      requestTypes,
     } = this.props;
 
     this.map.addLayer({
@@ -91,36 +89,36 @@ class RequestsLayer extends React.Component {
             [15, 10]
           ],
         },
-        'circle-color': circleColors(colorScheme),
+        'circle-color': circleColors(requestTypes),
         'circle-opacity': 0.8,
       },
-      filter: typeFilter(selectedTypes),
+      // filter: typeFilter(selectedTypes),
     }, BEFORE_ID);
 
-    this.map.addLayer({
-      id: 'request-heatmap',
-      type: 'heatmap',
-      source: 'requests',
-      layout: {
-        visibility: activeLayer === 'heatmap' ? 'visible' : 'none',
-      },
-      paint: {
-        'heatmap-radius': 5,
-      },
-      filter: typeFilter(selectedTypes),
-    }, BEFORE_ID);
+    // this.map.addLayer({
+    //   id: 'request-heatmap',
+    //   type: 'heatmap',
+    //   source: 'requests',
+    //   layout: {
+    //     visibility: activeLayer === 'heatmap' ? 'visible' : 'none',
+    //   },
+    //   paint: {
+    //     'heatmap-radius': 5,
+    //   },
+    //   filter: typeFilter(selectedTypes),
+    // }, BEFORE_ID);
   };
 
   setActiveLayer = activeLayer => {
     switch(activeLayer) {
       case 'points':
         this.map.setLayoutProperty('request-circles', 'visibility', 'visible');
-        this.map.setLayoutProperty('request-heatmap', 'visibility', 'none');
+        // this.map.setLayoutProperty('request-heatmap', 'visibility', 'none');
         break;
 
       case 'heatmap':
         this.map.setLayoutProperty('request-circles', 'visibility', 'none');
-        this.map.setLayoutProperty('request-heatmap', 'visibility', 'visible');
+        // this.map.setLayoutProperty('request-heatmap', 'visibility', 'visible');
         break;
 
       default:
@@ -154,7 +152,7 @@ export default RequestsLayer;
 
 RequestsLayer.propTypes = {
   activeLayer: PropTypes.oneOf(['points', 'heatmap']),
-  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+  selectedTypes: PropTypes.arrayOf(PropTypes.number),
   requests: PropTypes.shape({}),
   colorScheme: PropTypes.string,
 };