Map menu

client/components/DateSelector/DateSelector.jsx

@@ -1,18 +1,37 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import SelectorBox from '@components/common/SelectorBox';
 import DatePicker from '@components/common/DatePicker';
+import {
+  updateStartDate as reduxUpdateStartDate,
+  updateEndDate as reduxUpdateEndDate,
+} from '@reducers/filters';
+import moment from 'moment';
 import options from './options';
 import useStyles from './useStyles';
 import DateRanges from './DateRanges';
 
-function DateSelector({ onRangeSelect, range, initialDates }) {
+const dateFormat = 'YYYY-MM-DD';
+
+function DateSelector({
+  onRangeSelect,
+  range,
+  initialDates,
+  updateStartDate,
+  updateEndDate,
+}) {
   const [dates, setDates] = useState(initialDates);
   const [expanded, setExpanded] = useState(false);
   const classes = useStyles();
 
   const handleOptionSelect = optionDates => {
+    const formattedStart = moment(optionDates[0]).format(dateFormat);
+    const formattedEnd = moment(optionDates[1]).format(dateFormat);
     setDates(() => optionDates);
+    updateStartDate(formattedStart);
+    updateEndDate(formattedEnd);
+    setExpanded(false);
   };
 
   const handleDateSelect = selectedDays => {
@@ -54,16 +73,23 @@ function DateSelector({ onRangeSelect, range, initialDates }) {
   );
 }
 
+const mapDispatchToProps = dispatch => ({
+  updateStartDate: date => dispatch(reduxUpdateStartDate(date)),
+  updateEndDate: date => dispatch(reduxUpdateEndDate(date)),
+});
+
+export default connect(null, mapDispatchToProps)(DateSelector);
+
 DateSelector.propTypes = {
   range: PropTypes.bool,
   onRangeSelect: PropTypes.func,
   initialDates: PropTypes.arrayOf(Date),
+  updateStartDate: PropTypes.func.isRequired,
+  updateEndDate: PropTypes.func.isRequired,
 };
 
 DateSelector.defaultProps = {
   range: false,
   onRangeSelect: null,
   initialDates: [],
 };
-
-export default DateSelector;

client/components/DateSelector/useStyles.js

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   label: {
-    marginBottom: 10,
+    marginBottom: 5,
     display: 'inline-block',
     fontFamily: 'Roboto',
   },

client/components/Map/Map.jsx

@@ -10,6 +10,7 @@ import LocationDetail from './LocationDetail';
 
 import { REQUEST_TYPES } from '@components/common/CONSTANTS';
 import { getNcByLngLat, setSelectedNcId } from '@reducers/data';
+import { updateNcId } from '@reducers/filters';
 
 import {
   INITIAL_BOUNDS,
@@ -217,6 +218,13 @@ class Map extends React.Component {
       this.setState({ selectedNc: nc });
       return this.ncLayer.selectRegion(selectedNcId);
     }
+
+    if (this.props.ncId !== prevProps.ncId) {
+      const { councils, ncId } = this.props;
+      const nc = councils.find(({ councilId }) => councilId === ncId);
+      this.setState({ selectedNc: nc });
+      return this.ncLayer.selectRegion(ncId);
+    }
   }
 
   initLayers = addListeners => {
@@ -317,7 +325,7 @@ class Map extends React.Component {
       ]
     });
 
-    const { setSelectedNc } = this.props;
+    const { updateNcId } = this.props;
 
     for (let i = 0; i < features.length; i++) {
       const feature = features[i];
@@ -326,7 +334,7 @@ class Map extends React.Component {
         switch(feature.layer.id) {
           case 'nc-fills':
             this.setState({ address: null });
-            setSelectedNc(feature.properties.council_id);
+            updateNcId(feature.properties.council_id);
             return this.ncLayer.selectRegion(feature.id);
           case 'cc-fills':
             return this.ccLayer.selectRegion(feature.id);
@@ -349,23 +357,23 @@ class Map extends React.Component {
   };
 
   onGeocoderResult = ({ result }) => {
-    const { getNc, setSelectedNc } = this.props;
+    const { getNc, updateNcId } = this.props;
     if (result.properties.type === GEO_FILTER_TYPES.nc) {
       this.setState({ address: null });
-      setSelectedNc(result.id);
+      updateNcId(result.id);
+    } else {
+      const address = result.place_name
+                        .split(',')
+                        .slice(0, -2)
+                        .join(', ');
+
+      getNc({ longitude: result.center[0], latitude: result.center[1] });
+
+      this.setState({
+        address: address,
+      });
+      return this.addressLayer.addMarker([result.center[0], result.center[1]]);
     }
-
-    const address = result.place_name
-                      .split(',')
-                      .slice(0, -2)
-                      .join(', ');
-
-    getNc({ longitude: result.center[0], latitude: result.center[1] });
-
-    this.setState({
-      address: address,
-    });
-    return this.addressLayer.addMarker([result.center[0], result.center[1]]);
   };
 
   zoomOut = () => {
@@ -522,7 +530,7 @@ class Map extends React.Component {
         <div ref={el => this.requestDetail = el}>
           <RequestDetail requestId={selectedRequestId} />
         </div>
-        { this.state.mapReady && (
+        { this.state.mapReady && requestTypes && (
           <>
             {/* <MapOverview
               date={lastUpdated}
@@ -541,7 +549,10 @@ class Map extends React.Component {
                 canReset={!!filterGeo && canReset}
               />
               <FilterMenu />
-              <LocationDetail address={address} nc={selectedNc} />
+              {
+                (selectedNc || address) && <LocationDetail address={address} nc={selectedNc} />
+              }
+
             </div>
             {/* <MapLayers
               selectedTypes={selectedTypes}
@@ -565,8 +576,9 @@ class Map extends React.Component {
 Map.propTypes = {
   requests: PropTypes.shape({}),
   position: PropTypes.shape({}),
-  selectedTypes: PropTypes.arrayOf(PropTypes.number),
+  selectedTypes: PropTypes.shape({}),
   getNc: PropTypes.func.isRequired,
+  updateNcId: PropTypes.func.isRequired,
 };
 
 Map.defaultProps = {};
@@ -575,12 +587,13 @@ const mapStateToProps = state => ({
   ncBoundaries: state.metadata.ncGeojson,
   requestTypes: state.metadata.requestTypes,
   councils: state.metadata.councils,
-  selectedNcId: state.data.selectedNcId,
+  selectedNcId: state.filters.councilId,
+  ncId: state.data.selectedNcId,
 });
 
 const mapDispatchToProps = dispatch => ({
   getNc: coords => dispatch(getNcByLngLat(coords)),
-  setSelectedNc: id => dispatch(setSelectedNcId(id)),
+  updateNcId: id => dispatch(updateNcId(id)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Map));

client/components/Map/layers/RequestsLayer.js

@@ -154,14 +154,14 @@ export default RequestsLayer;
 
 RequestsLayer.propTypes = {
   activeLayer: PropTypes.oneOf(['points', 'heatmap']),
-  selectedTypes: PropTypes.arrayOf(PropTypes.number),
+  selectedTypes: PropTypes.shape({}),
   requests: PropTypes.shape({}),
   colorScheme: PropTypes.string,
 };
 
 RequestsLayer.defaultProps = {
   activeLayer: 'points',
-  selectedTypes: [],
+  selectedTypes: {},
   requests: {},
   colorScheme: '',
 };

client/components/main/Desktop/CouncilSelector/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { updateNC } from '@reducers/filters';
+import { updateNcId } from '@reducers/filters';
 import { makeStyles } from '@material-ui/core/styles';
 import not from '@utils/not';
 import SelectorBox from '@components/common/SelectorBox';
@@ -83,7 +83,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  updateCouncilsFilter: councilId => dispatch(updateNC(councilId)),
+  updateCouncilsFilter: councilId => dispatch(updateNcId(councilId)),
 });
 
 export default connect(

client/components/main/Desktop/FilterMenu.js

@@ -14,7 +14,8 @@ import Typography from '@material-ui/core/Typography';
 
 import GearButton from '@components/common/GearButton';
 import DateSelector from '@components/DateSelector/DateSelector';
-import RequestTypeSelector from '@components/main/Desktop/RequestTypeSelector';
+import TypeSelector from '@components/main/Desktop/TypeSelector';
+import StatusSelector from '@components/main/Desktop/StatusSelector';
 
 const useStyles = makeStyles(theme => ({
   card: {
@@ -57,13 +58,15 @@ const useStyles = makeStyles(theme => ({
   selectorWrapper: {
     marginBottom: theme.gaps.md,
   },
+  content: {
+    padding: '6px 14px',
+  },
 }));
 
 const FilterMenu = ({ toggleMenu }) => {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(true);
   const classes = useStyles();
 
-  // TODO: add basic/advanced toggle switch
   return (
     <Card className={classes.card}>
       <CardHeader
@@ -94,12 +97,15 @@ const FilterMenu = ({ toggleMenu }) => {
         )}
       />
       <Collapse in={expanded}>
-        <CardContent>
+        <CardContent className={classes.content}>
           <div className={classes.selectorWrapper}>
-            <RequestTypeSelector />
+            <DateSelector range />
           </div>
           <div className={classes.selectorWrapper}>
-            <DateSelector range />
+            <TypeSelector />
+          </div>
+          <div className={classes.selectorWrapper}>
+            <StatusSelector />
           </div>
         </CardContent>
       </Collapse>

client/components/main/Desktop/StatusSelector.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { updateRequestStatus } from '@reducers/filters';
+import { makeStyles } from '@material-ui/core/styles';
+
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+
+const useStyles = makeStyles(() => ({
+  header: {
+    marginBottom: 5,
+    fontFamily: 'Roboto',
+  },
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  button: {
+    width: '50%',
+  },
+}));
+
+const StatusSelector = ({
+  updateStatusFilter,
+  requestStatus,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <div className={classes.header}>Request Status</div>
+      <ToggleButtonGroup className={classes.root}>
+        <ToggleButton
+          className={classes.button}
+          selected={requestStatus.open}
+          onClick={() => updateStatusFilter('open')}
+          value="open"
+          disableRipple
+        >
+          Open
+        </ToggleButton>
+        <ToggleButton
+          className={classes.button}
+          selected={requestStatus.closed}
+          onClick={() => updateStatusFilter('closed')}
+          value="closed"
+          disableRipple
+        >
+          Closed
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </>
+  );
+};
+
+const mapStateToProps = state => ({
+  requestStatus: state.filters.requestStatus,
+});
+
+const mapDispatchToProps = dispatch => ({
+  updateStatusFilter: status => dispatch(updateRequestStatus(status)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(StatusSelector);
+
+StatusSelector.propTypes = {
+  updateStatusFilter: PropTypes.func.isRequired,
+  requestStatus: PropTypes.shape({
+    open: PropTypes.bool.isRequired,
+    closed: PropTypes.bool.isRequired,
+  }).isRequired,
+};