1254 status selector not working

client/components/Map/Map.jsx

@@ -486,7 +486,6 @@ class Map extends React.Component {
     } = this.props;
 
     const {
-      requests,
       geoFilterType,
       locationInfo,
       // filteredRequestCounts,
@@ -508,7 +507,6 @@ class Map extends React.Component {
       <div className={classes.root} ref={el => this.mapContainer = el} >
         <RequestsLayer
           ref={el => this.requestsLayer = el}
-          requests={requests}
           activeLayer={activeRequestsLayer}
           selectedTypes={selectedTypes}
           colorScheme={colorScheme}

client/components/Map/index.js

@@ -5,6 +5,7 @@ import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import axios from 'axios';
+import { getDataRequestSuccess } from '@reducers/data';
 import { updateMapPosition } from '@reducers/ui';
 import { trackMapExport } from '@reducers/analytics';
 import CookieNotice from '../main/CookieNotice';
@@ -23,51 +24,52 @@ class MapContainer extends React.Component {
     super(props)
 
     this.state = {
-      requests: this.convertRequests([]),
       ncCounts: null,
       ccCounts: null,
       position: props.position,
       lastUpdated: props.lastUpdated,
       selectedTypes: this.getSelectedTypes(),
     }
 
-    this.openRequests = null;
+    // We store the raw requests from the API call here, but eventually they are
+    // converted and stored in the Redux store.
+    this.rawRequests = null;
     this.isSubscribed = null;
   }
 
   componentDidMount() {
-    // TODO: redux-saga, add to store instead of local state
     this.isSubscribed = true;
     this.setData();
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.activeMode !== this.props.activeMode ||
-        prevProps.pins !== this.props.pins)
+      prevProps.pins !== this.props.pins)
       this.setData();
   }
 
   componentWillUnmount() {
     this.isSubscribed = false;
   }
 
-  getOpenRequests = async () => {
-    const url = `${process.env.API_URL}/requests/pins/open`;
+  getAllRequests = async () => {
+    // TODO: add date specification. See https://dev-api.311-data.org/docs#/default/get_all_service_requests_requests_get.
+    // By default, this will only get the 1000 most recent requests.
+    const url = `${process.env.API_URL}/requests`;
     const { data } = await axios.get(url);
-    this.openRequests = data;
+    this.rawRequests = data;
   };
 
   setData = async () => {
     const { pins } = this.props;
 
-    if (!this.openRequests) {
-      await this.getOpenRequests();
+    if (!this.rawRequests) {
+      await this.getAllRequests();
     }
 
     if (this.isSubscribed) {
-      return this.setState({
-        requests: this.convertRequests(this.openRequests),
-      });
+      const { getDataSuccess } = this.props;
+      getDataSuccess(this.convertRequests(this.rawRequests));
     }
   };
 
@@ -78,6 +80,7 @@ class MapContainer extends React.Component {
       properties: {
         requestId: request.requestId,
         typeId: request.typeId,
+        closedDate: request.closedDate,
       },
       geometry: {
         type: 'Point',
@@ -99,8 +102,8 @@ class MapContainer extends React.Component {
   };
 
   render() {
-    const { position, lastUpdated, updatePosition, exportMap, classes } = this.props;
-    const { requests, ncCounts, ccCounts, selectedTypes } = this.state;
+    const { position, lastUpdated, updatePosition, exportMap, classes, requests } = this.props;
+    const { ncCounts, ccCounts, selectedTypes } = this.state;
     return (
       <div className={classes.root}>
         <Map
@@ -125,11 +128,13 @@ const mapStateToProps = state => ({
   lastUpdated: state.metadata.lastPulledLocal,
   activeMode: state.ui.map.activeMode,
   requestTypes: state.filters.requestTypes,
+  requests: state.data.requests
 });
 
 const mapDispatchToProps = dispatch => ({
   updatePosition: position => dispatch(updateMapPosition(position)),
   exportMap: () => dispatch(trackMapExport()),
+  getDataSuccess: data => dispatch(getDataRequestSuccess(data)),
 });
 
 MapContainer.propTypes = {};

client/components/Map/layers/RequestsLayer.js

@@ -8,14 +8,25 @@ import { connect } from 'react-redux';
 // so you don't cover up important labels
 const BEFORE_ID = 'poi-label';
 
+// Key for type id in store.data.requests.
+const TYPE_ID = 'typeId';
+// Key for closed date in store.data.requests.
+const CLOSED_DATE = 'closedDate';
+
+// Constants required for Mapbox filtering.
+const LITERAL = 'literal';
+const GET = 'get';
+
+const WHITE_HEX = '#FFFFFF';
+
 function circleColors(requestTypes) {
   const colors = [];
   requestTypes.forEach(type => colors.push(type.typeId, type.color))
   return [
     'match',
-    ['get', 'typeId'],
+    [GET, TYPE_ID],
     ...colors,
-    '#FFFFFF',
+    WHITE_HEX,
   ];
 }
 
@@ -25,11 +36,27 @@ function typeFilter(selectedTypes) {
   var trueTypes = Object.keys(selectedTypes).map((type) => parseInt(type)).filter((type) => selectedTypes[type]);
   return [
     'in',
-    ['get', 'typeId'],
-    ['literal', trueTypes]
+    [GET, TYPE_ID],
+    [LITERAL, trueTypes]
   ];
 }
 
+function statusFilter(requestStatus) {
+  // requestStatus is an object with keys "open" and "closed", and boolean values.
+  if (requestStatus.open && requestStatus.closed) {
+    // Hack to allow ALL requests.
+    return ['==', [LITERAL, 'a'], [LITERAL, 'a']];
+  }
+  if (!requestStatus.open && !requestStatus.closed) {
+    // Hack to filter ALL requests.
+    return ['==', [LITERAL, 'a'], [LITERAL, 'b']];
+  }
+  if (requestStatus.open) {
+    return ['==', [GET, CLOSED_DATE], [LITERAL, null]];
+  }
+  return ['!=', [GET, CLOSED_DATE], [LITERAL, null]];
+}
+
 class RequestsLayer extends React.Component {
   constructor(props) {
     super(props);
@@ -47,21 +74,30 @@ class RequestsLayer extends React.Component {
     const {
       activeLayer,
       selectedTypes,
+      requestStatus,
       requests,
       colorScheme,
     } = this.props;
 
     if (activeLayer !== prev.activeLayer)
       this.setActiveLayer(activeLayer);
 
-    if (selectedTypes !== prev.selectedTypes) {
-      this.setSelectedTypes(selectedTypes);
+    // Check if the selected types OR the request status has changed.
+    // These filters need to be updated together, since they are
+    // actually composed into a single filter.
+    if (selectedTypes !== prev.selectedTypes ||
+      requestStatus.open !== prev.requestStatus.open ||
+      requestStatus.closed !== prev.requestStatus.closed) {
+      this.setFilters(selectedTypes, requestStatus);
     }
-    if (requests !== prev.requests && this.ready)
+    if (requests !== prev.requests && this.ready) {
+      console.log("got new requests");
+      console.log(requests);
       this.setRequests(requests);
-
-    if (colorScheme !== prev.colorScheme)
+    }
+    if (colorScheme !== prev.colorScheme) {
       this.setColorScheme(colorScheme);
+    }
   }
 
   addSources = () => {
@@ -132,8 +168,9 @@ class RequestsLayer extends React.Component {
     }
   };
 
-  setSelectedTypes = selectedTypes => {
-    this.map.setFilter('request-circles', typeFilter(selectedTypes));
+  setFilters = (selectedTypes, requestStatus) => {
+    this.map.setFilter('request-circles',
+      ['all', typeFilter(selectedTypes), statusFilter(requestStatus)]);
     // Currently, we do not support heatmap. If we did, we'd want to update
     // its filter here as well.
   };
@@ -170,10 +207,12 @@ RequestsLayer.defaultProps = {
 };
 
 const mapStateToProps = state => ({
-  selectedTypes: state.filters.requestTypes
+  selectedTypes: state.filters.requestTypes,
+  requestStatus: state.filters.requestStatus,
+  requests: state.data.requests,
 });
 
 // We need to specify forwardRef to allow refs on connected components.
 // See https://github.com/reduxjs/react-redux/issues/1291#issuecomment-494185126
 // for more info.
-export default connect(mapStateToProps, null, null, { forwardRef: true })(RequestsLayer);
+export default connect(mapStateToProps, null, null, { forwardRef: true })(RequestsLayer);

client/redux/reducers/data.js

@@ -1,5 +1,6 @@
 export const types = {
   GET_DATA_REQUEST: 'GET_DATA_REQUEST',
+  GET_DATA_REQUEST_SUCCESS: 'GET_DATA_REQUEST_SUCCESS',
   GET_PINS_SUCCESS: 'GET_PINS_SUCCESS',
   GET_PINS_FAILURE: 'GET_PINS_FAILURE',
   GET_OPEN_REQUESTS: 'GET_OPEN_REQUESTS',
@@ -25,6 +26,11 @@ export const getDataRequest = () => ({
   type: types.GET_DATA_REQUEST,
 });
 
+export const getDataRequestSuccess = response => ({
+  type: types.GET_DATA_REQUEST_SUCCESS,
+  payload: response,
+});
+
 export const getPinsSuccess = response => ({
   type: types.GET_PINS_SUCCESS,
   payload: response,
@@ -122,6 +128,11 @@ export default (state = initialState, action) => {
         isMapLoading: true,
         isVisLoading: true,
       };
+    case types.GET_DATA_REQUEST_SUCCESS:
+      return {
+        ...state,
+        requests: action.payload,
+      };
     case types.GET_PINS_SUCCESS:
       return {
         ...state,