Feature/select dropdown map filters

.eslintrc.js

@@ -34,13 +34,6 @@ module.exports = {
     'import/no-unresolved': 2,
     'import/no-webpack-loader-syntax': 0,
     'import/prefer-default-export': 0,
-    indent: [
-      2,
-      2,
-      {
-        SwitchCase: 1,
-      },
-    ],
     'jsx-a11y/aria-props': 2,
     'jsx-a11y/heading-has-content': 0,
     'jsx-a11y/label-has-associated-control': [

app/components/FoodSiteDetail/index.js

@@ -5,14 +5,12 @@
  */
 
 import React, { memo } from 'react';
-// import _ from 'lodash';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import Grid from '@material-ui/core/Grid';
-
-// import axios from 'axios';
+import axios from 'axios';
 
 /* eslint-disable react/prefer-stateless-function */
 class FoodSiteDetail extends React.PureComponent {
@@ -24,40 +22,11 @@ class FoodSiteDetail extends React.PureComponent {
     };
   }
 
-  //   uncomment other component mount and delete this once we have fewer null results
   componentDidMount() {
-    const res = {
-      name: 'funkytown',
-      open_from: 'March',
-      open_to: 'October',
-      open_time1: 6,
-      close_time1: 9,
-      sunday: true,
-      monday: true,
-      tuesday: true,
-      wednesday: true,
-      friday: true,
-      saturday: false,
-      snap: true,
-      wic: true,
-      fmnp: true,
-      fresh_produce: false,
-      mrfei_score: 152,
-      food_bucks: false,
-      open_to_spec_group: false,
-      address: 'yer moms house',
-      city: 'pgh',
-      state: 'pa',
-      zip_code: 12345,
-      location_description: 'sassy',
-    };
-    this.setState({ siteDetails: res });
+    axios
+      .get(`https://dev.stevesaylor.io/api/location/${this.props.siteId}/`)
+      .then(res => this.setState({ siteDetails: res.data }));
   }
-  //   componentDidMount() {
-  //     axios
-  //       .get(`https://dev.stevesaylor.io/api/location/${this.props.siteId}/`)
-  //       .then(res => this.setState({ siteDetails: res.data }));
-  //   }
 
   render() {
     return (
@@ -280,6 +249,6 @@ class FoodSiteDetail extends React.PureComponent {
 
 export default memo(FoodSiteDetail);
 
-// FoodSiteDetail.propTypes = {
-//   siteId: PropTypes.string.isRequired,
-// };
+FoodSiteDetail.propTypes = {
+  siteId: PropTypes.string.isRequired,
+};

app/components/Map/detailConstants.js

@@ -0,0 +1 @@
+export const detailArray = ['all', 'wic', 'snap'];

app/components/Map/detailSelect.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    position: 'absolute',
+    top: theme.spacing(16),
+    left: theme.spacing(4),
+    zIndex: 100,
+    background: '#FAFAFA',
+  },
+});
+
+/* eslint-disable react/prefer-stateless-function */
+class DetailSelect extends Component {
+  render() {
+    const details = this.props.detailArray;
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <FormControl>
+          <InputLabel htmlFor="detail-selector">Details</InputLabel>
+          <Select
+            value={this.props.selectedDetail}
+            onChange={this.props.handleChange}
+            input={<Input name="detailSelector" id="detail-selector" />}
+          >
+            {details.map(detail => (
+              <MenuItem key={detail} value={detail}>
+                {detail.toUpperCase()}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>Filter by important details</FormHelperText>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+DetailSelect.propTypes = {
+  detailArray: PropTypes.array.isRequired,
+  classes: PropTypes.object,
+  selectedDetail: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(DetailSelect);

app/components/Map/index.js

@@ -10,7 +10,11 @@ import _ from 'lodash';
 import ReactMapGL, { Marker, Popup } from 'react-map-gl';
 import axios from 'axios';
 import MapSelect from './mapSelect';
+import DetailSelect from './detailSelect';
+import TypeSelect from './typeSelect';
 import { townArray } from './townConstants';
+import { detailArray } from './detailConstants';
+import { typeArray } from './typeConstants';
 import CityInfo from './cityInfo';
 import CityPin from './cityPin';
 import Wrapper from './Wrapper';
@@ -28,21 +32,34 @@ class Map extends React.PureComponent {
         longitude: -79.9659,
         zoom: 12,
       },
-      selectedTown: 'Pittsburgh',
+      selectedDetail: 'wic',
+      selectedTown: {
+        place: 'Pittsburgh',
+        longitude: -79.9762579547,
+        latitude: 40.4396259337,
+      },
+      selectedTypes: [],
       popupInfo: null,
       sites: [],
+      allSites: [],
     };
   }
 
   componentDidMount() {
-    axios
-      .get('https://dev.stevesaylor.io/api/location/')
-      .then(res => this.setState({ sites: res.data }));
+    axios.get('https://dev.stevesaylor.io/api/location/').then(res =>
+      this.setState({
+        allSites: res.data,
+        sites: _.filter(res.data, site => site.wic),
+      }),
+    );
   }
 
-  handleSelection(event) {
+  handlelocationSelection(_event, value) {
+    if (!value) {
+      return;
+    }
     const oldView = _.clone(this.state.viewport);
-    const place = event.target.value;
+    const { place } = value;
     const { latitude, longitude } = _.find(townArray, { place });
     const newView = _.assign({}, oldView, {
       latitude,
@@ -55,6 +72,36 @@ class Map extends React.PureComponent {
     });
   }
 
+  handleDetailSelection(event) {
+    const totalSites = _.cloneDeep(this.state.allSites);
+    const filter = event.target.value;
+
+    if (filter === 'all') {
+      this.setState({
+        selectedDetail: filter,
+        sites: totalSites,
+      });
+    } else {
+      const filteredSites = _.filter(totalSites, site => site[filter]);
+      this.setState({
+        selectedDetail: filter,
+        sites: filteredSites,
+      });
+    }
+  }
+
+  handleTypeSelection(event) {
+    const totalSites = _.cloneDeep(this.state.allSites);
+    const types = event.target.value;
+    const filteredSites = types.length
+      ? _.filter(totalSites, site => _.includes(types, site.type))
+      : totalSites;
+    this.setState({
+      selectedTypes: types,
+      sites: filteredSites,
+    });
+  }
+
   renderCityMarker = (city, index) => {
     if (city.longitude) {
       return (
@@ -98,7 +145,17 @@ class Map extends React.PureComponent {
         <MapSelect
           townArray={townArray}
           selectedTown={this.state.selectedTown}
-          handleChange={e => this.handleSelection(e)}
+          handleChange={(_e, v) => this.handlelocationSelection(_e, v)}
+        />
+        <DetailSelect
+          detailArray={detailArray}
+          selectedDetail={this.state.selectedDetail}
+          handleChange={e => this.handleDetailSelection(e)}
+        />
+        <TypeSelect
+          typeArray={typeArray}
+          selectedTypes={this.state.selectedTypes}
+          handleChange={e => this.handleTypeSelection(e)}
         />
         <ReactMapGL
           {...this.state.viewport}

app/components/Map/mapSelect.js

@@ -1,12 +1,11 @@
+import _ from 'lodash';
 import React, { Component } from 'react';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 
 const styles = theme => ({
   root: {
@@ -27,18 +26,21 @@ class MapSelect extends Component {
     return (
       <div className={classes.root}>
         <FormControl>
-          <InputLabel htmlFor="town-selector">Town/Neighborhood</InputLabel>
-          <Select
-            value={this.props.selectedTown}
+          <Autocomplete
+            options={towns}
+            getOptionLabel={option => option.place}
             onChange={this.props.handleChange}
-            input={<Input name="townSelector" id="town-selector" />}
-          >
-            {towns.map(town => (
-              <MenuItem key={town.latitude + town.longitude} value={town.place}>
-                {town.place}
-              </MenuItem>
-            ))}
-          </Select>
+            style={{ width: 300 }}
+            defaultValue={_.find(towns, { place: 'Pittsburgh' })}
+            renderInput={params => (
+              <TextField
+                {...params}
+                label="Zoom a Neighborhood"
+                variant="outlined"
+                fullWidth
+              />
+            )}
+          />
           <FormHelperText>Choose a region for instant zoom</FormHelperText>
         </FormControl>
       </div>
@@ -49,7 +51,7 @@ class MapSelect extends Component {
 MapSelect.propTypes = {
   townArray: PropTypes.array.isRequired,
   classes: PropTypes.object,
-  selectedTown: PropTypes.string.isRequired,
+  selectedTown: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
 };
 

app/components/Map/typeConstants.js

@@ -0,0 +1 @@
+export const typeArray = ['Convenience Store', 'Farmers Market', 'Supermarket'];

app/components/Map/typeSelect.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    position: 'absolute',
+    top: theme.spacing(28),
+    left: theme.spacing(4),
+    zIndex: 100,
+    background: '#FAFAFA',
+  },
+});
+
+/* eslint-disable react/prefer-stateless-function */
+class TypeSelect extends Component {
+  render() {
+    const types = this.props.typeArray;
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <FormControl>
+          <InputLabel htmlFor="type-selector">Site Types</InputLabel>
+          <Select
+            value={this.props.selectedTypes}
+            onChange={this.props.handleChange}
+            multiple
+            input={<Input name="typeSelector" id="type-selector" />}
+          >
+            {types.map(type => (
+              <MenuItem key={type} value={type}>
+                {type}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>Filter by site type</FormHelperText>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+TypeSelect.propTypes = {
+  typeArray: PropTypes.array.isRequired,
+  classes: PropTypes.object,
+  selectedTypes: PropTypes.array.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(TypeSelect);