105 updates project_types filters array for project filtering

frontend/package.json

@@ -16,7 +16,7 @@
     "@types/googlemaps": "^3.39.11",
     "@types/markerclustererplus": "^2.1.33",
     "autoprefixer": "^9.8.6",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.1",
     "core-js": "^3.6.5",
     "css-loader": "^4.2.0",

frontend/src/actions/filters.js

@@ -6,8 +6,8 @@ export const setRangeFilter = (range = 25) => ({
 
 // ADD_TYPE_FILTER
 // REMOVE_TYPE_FILTER
-export const setTypeFilter = (project_type = null) => ({
-    type: project_type ? 'ADD_TYPE_FILTER' : 'REMOVE_TYPE_FILTER',
+export const setTypeFilter = ({ type, project_type }) => ({
+    type: type ? 'ADD_TYPE_FILTER' : 'REMOVE_TYPE_FILTER',
     project_type: project_type
 });
 

frontend/src/actions/project_details.js

@@ -10,6 +10,6 @@ export const selectProject = (selected_project) => ({
     details: selected_project.details,
     name: selected_project.project_name,
     type: selected_project.project_type,
-    emissions_data: selected_project.emissions_data
+    emissions_data: selected_project.emissions_data,
   }
 });

frontend/src/components/panels/map_panel/MapPanelContainer.js

@@ -3,7 +3,7 @@ import { withScriptjs, withGoogleMap, GoogleMap, Circle } from "react-google-map
 import { connect } from 'react-redux';
 import { MeepService } from '../../../services/meep_service';
 import { selectProject } from '../../../actions/project_details';
-import { withRouter} from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { selectProjectLocations } from '../../../selectors/locations';
 import { GoogleMapsAPIKey } from '../../../../private/google_maps';
 import {v4 as uuid} from 'uuid';
@@ -21,10 +21,11 @@ const mapState = {
 }
 
 const mapStateToProps = (state, ownProps) => {
-    return { 
+    return {
         ...ownProps,
         locations: state.locations[0] ? selectProjectLocations(state.locations[0], state.filters) : [],
-        map_state: state.map_state
+        map_state: state.map_state,
+        state,
     }
 };
 
@@ -36,20 +37,20 @@ const MyMapComponent = connect(mapStateToProps)(withScriptjs(withGoogleMap((prop
             props.history.push("/details");
         });
     }
-
+    
     return (
         <GoogleMap
             key={uuid()}
             defaultZoom={props.map_state.zoom}
             defaultCenter={props.map_state.center}>
-            {props.locations.map(location => {
+            {selectProjectLocations(props.state.locations[0], props.state.filters).map(location => {
                 return <Circle
                             key={location.key}
                             onClick={()=>dispatchProjectSummary(location)}
                             strokeWeight={mapState.marker.strokeWeight}
                             options={{
-                                fillColor: mapState.marker.fillColor, 
-                                fillOpacity: mapState.marker.fillOpacity, 
+                                fillColor: mapState.marker.fillColor,
+                                fillOpacity: mapState.marker.fillOpacity,
                                 strokeColor: mapState.marker.strokeColor
                             }}
                             center={location.center}

frontend/src/components/panels/project_filters_panel/ProjectFiltersPanel.js

@@ -32,9 +32,9 @@ const ProjectFiltersPanel = () => (
                 <div className="col">
                     <SubHeader Text="Project Type"/>
                     <div className="project-types-container">
-                        <CheckBox Label="Building" ProjectType="building"/>
-                        <CheckBox Label="Vehicle Transportation" ProjectType="vehicle"/>
-                        <CheckBox Label="Infrastructure Transportation" ProjectType="infrastructure"/>
+                        <CheckBox Label="Building" ProjectType="Building"/>
+                        <CheckBox Label="Vehicle Transportation" ProjectType="Vehicle Transportation"/>
+                        <CheckBox Label="Infrastructure Transportation" ProjectType="Infrastructure Transportation"/>
                     </div>
                 </div>
             </div>

frontend/src/components/panels/project_filters_panel/filter_map_components/CheckBox.js

@@ -1,25 +1,33 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { setTypeFilter } from '../../../../actions/filters';
 import CheckBoxRow from '../filter_map_components/CheckBoxRow';
 
 class CheckBox extends React.Component {
     constructor(props) {
         super(props);
         this.toggleView = this.toggleView.bind(this);
-        this.state = { checked: false };
+        this.state = { checked: true };
     }
 
     toggleView = event => {
-        this.setState({ checked: event.target.checked });
+        this.setState({ checked: event.target.checked },
+            () => this.props.dispatch(setTypeFilter(
+                {
+                    type: this.state.checked,
+                    project_type: this.props.ProjectType
+                }
+            )));
     }
 
     render() {
         return (
             <div>
                 <label>
-                    <CheckBoxRow 
-                        Label={this.props.Label} 
-                        ProjectType={this.props.ProjectType} 
-                        checked={this.state.checked} 
+                    <CheckBoxRow
+                        Label={this.props.Label}
+                        ProjectType={this.props.ProjectType}
+                        checked={this.state.checked}
                         toggleView={this.toggleView}
                     />
                 </label>
@@ -28,4 +36,4 @@ class CheckBox extends React.Component {
     }
 }
 
-export default CheckBox;
+export default connect()(CheckBox);

frontend/src/components/panels/project_filters_panel/filter_map_components/DateRangeSlider.js

@@ -66,7 +66,7 @@ class DateRangeSlider extends React.Component {
 		    		max={this.state.maxValue}
 		    		marks={this.marks(this.state.minValue, this.state.maxValue)}
 		    		dots={true}
-		    		dotStyle={dotStyle} 
+		    		dotStyle={dotStyle}
 		    		defaultValue={this.state.defaultValue}
 					handle={handleDateRangeChange}
 					onChange={this.handleDateRange}

frontend/src/reducers/filters.js

@@ -1,8 +1,8 @@
 const filtersReducerDefaultState = {
   range: 20,
   zipcode: 64106,
-  types: [],
-  startDate: 2015,
+  project_types: ["Building", "Vehicle Transportation", "Infrastructure Transportation"],
+  startDate: 2013,
   endDate: 2018
 };
 
@@ -33,7 +33,7 @@ export default (state = filtersReducerDefaultState, action) => {
         ...state,
         endDate: action.end_date
       };
-    case 'SET_ZIPCODE': 
+    case 'SET_ZIPCODE':
       return {
         ...state,
         zipcode: action.zipcode

frontend/src/selectors/locations.js

@@ -1,16 +1,16 @@
 import withinProximity from "./promixity_selector";
-const proximity_center = {latitude: 39.057, longitude: -94.594};
+const proximity_center = { latitude: 39.057, longitude: -94.594 };
+
+export const selectProjectLocations = (locations, { project_types, startDate, endDate, range }) => {
 
-export const selectProjectLocations = (locations, { types, startDate, endDate, range }) => {
     return locations.filter((location) => {
 
       //DateRangeSlider value
       const startDateMatch = typeof startDate !== 'number' || location.startDate >= startDate;
       const endDateMatch = typeof endDate !== 'number' || location.endDate <= endDate;
 
       //Project type value
-      const locationTypeMatch = !types.length || types.includes(location.project_types[0]);
-
+      const locationTypeMatch = !project_types.length || project_types.includes(location.type);
       //Proximity value
       const withinProximityMatch = typeof range !== 'number' || withinProximity(proximity_center, location.center, range);
 

frontend/src/services/meep_service.js

@@ -28,7 +28,8 @@ export class MeepService {
     }
 
     async getProjects() {
-        const data = await getAPI(`${config.MEEP_API}/projects`)
+        const data = await getAPI(`${config.MEEP_API}/projects`);
+        console.log(data.projects);
         return data.projects
     }
 

frontend/src/styles/helpers/_marker.scss

@@ -1,11 +1,11 @@
 .location-marker, .project-type-marker {
-    .default, .infrastructure {
+    .default, .Infrastructure {
         fill: #1b2661;
     }
-    .building {
+    .Building {
         fill: #fdce06;
     }
-    .vehicle {
+    .Vehicle {
         fill: #318bd6;
     }
 }