From 7240967496693063e8a0b6764aa5c946100f67b5 Mon Sep 17 00:00:00 2001 From: Alexander Calvillo Date: Mon, 1 Feb 2021 07:47:16 -0600 Subject: [PATCH] 105 updates project_types filters array for project filtering --- frontend/package-lock.json | 23 +++++++++++++------ frontend/package.json | 2 +- frontend/src/actions/filters.js | 4 ++-- frontend/src/actions/project_details.js | 2 +- .../panels/map_panel/MapPanelContainer.js | 15 ++++++------ .../ProjectFiltersPanel.js | 6 ++--- .../filter_map_components/CheckBox.js | 22 ++++++++++++------ .../filter_map_components/DateRangeSlider.js | 2 +- frontend/src/reducers/filters.js | 6 ++--- frontend/src/selectors/locations.js | 8 +++---- frontend/src/services/meep_service.js | 3 ++- frontend/src/styles/helpers/_marker.scss | 6 ++--- 12 files changed, 59 insertions(+), 40 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 93374f1..9b31731 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1835,11 +1835,18 @@ "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" }, "axios": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", - "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", "requires": { - "follow-redirects": "1.5.10" + "follow-redirects": "^1.10.0" + }, + "dependencies": { + "follow-redirects": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz", + "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==" + } } }, "babel-loader": { @@ -3051,6 +3058,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, "requires": { "ms": "2.0.0" } @@ -4233,6 +4241,7 @@ "version": "1.5.10", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "dev": true, "requires": { "debug": "=3.1.0" } @@ -5283,9 +5292,9 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "internal-ip": { diff --git a/frontend/package.json b/frontend/package.json index e4aef5d..c3680eb 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/actions/filters.js b/frontend/src/actions/filters.js index 6b7a971..9f5e05f 100644 --- a/frontend/src/actions/filters.js +++ b/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 }); diff --git a/frontend/src/actions/project_details.js b/frontend/src/actions/project_details.js index 97316c7..82922d6 100644 --- a/frontend/src/actions/project_details.js +++ b/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, } }); diff --git a/frontend/src/components/panels/map_panel/MapPanelContainer.js b/frontend/src/components/panels/map_panel/MapPanelContainer.js index 3c64b4b..9d4d631 100644 --- a/frontend/src/components/panels/map_panel/MapPanelContainer.js +++ b/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 ( - {props.locations.map(location => { + {selectProjectLocations(props.state.locations[0], props.state.filters).map(location => { return 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} diff --git a/frontend/src/components/panels/project_filters_panel/ProjectFiltersPanel.js b/frontend/src/components/panels/project_filters_panel/ProjectFiltersPanel.js index 5a0db0f..e6818f9 100644 --- a/frontend/src/components/panels/project_filters_panel/ProjectFiltersPanel.js +++ b/frontend/src/components/panels/project_filters_panel/ProjectFiltersPanel.js @@ -32,9 +32,9 @@ const ProjectFiltersPanel = () => (
- - - + + +
diff --git a/frontend/src/components/panels/project_filters_panel/filter_map_components/CheckBox.js b/frontend/src/components/panels/project_filters_panel/filter_map_components/CheckBox.js index 6535494..e2156b2 100644 --- a/frontend/src/components/panels/project_filters_panel/filter_map_components/CheckBox.js +++ b/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 (
@@ -28,4 +36,4 @@ class CheckBox extends React.Component { } } -export default CheckBox; \ No newline at end of file +export default connect()(CheckBox); \ No newline at end of file diff --git a/frontend/src/components/panels/project_filters_panel/filter_map_components/DateRangeSlider.js b/frontend/src/components/panels/project_filters_panel/filter_map_components/DateRangeSlider.js index 57a325b..2377264 100644 --- a/frontend/src/components/panels/project_filters_panel/filter_map_components/DateRangeSlider.js +++ b/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} diff --git a/frontend/src/reducers/filters.js b/frontend/src/reducers/filters.js index 39654d9..67ee96f 100644 --- a/frontend/src/reducers/filters.js +++ b/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 diff --git a/frontend/src/selectors/locations.js b/frontend/src/selectors/locations.js index 2144c5a..2451dea 100644 --- a/frontend/src/selectors/locations.js +++ b/frontend/src/selectors/locations.js @@ -1,7 +1,8 @@ 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 @@ -9,8 +10,7 @@ export const selectProjectLocations = (locations, { types, startDate, endDate, r 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); diff --git a/frontend/src/services/meep_service.js b/frontend/src/services/meep_service.js index 2a91658..2c6538d 100644 --- a/frontend/src/services/meep_service.js +++ b/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 } diff --git a/frontend/src/styles/helpers/_marker.scss b/frontend/src/styles/helpers/_marker.scss index 360218a..fee9c8f 100644 --- a/frontend/src/styles/helpers/_marker.scss +++ b/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; } }