diff --git a/client/components/Map/index.js b/client/components/Map/index.js index 416ae33cd..845b8f142 100644 --- a/client/components/Map/index.js +++ b/client/components/Map/index.js @@ -5,7 +5,7 @@ import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import axios from 'axios'; -import { getDataRequestSuccess, updateDateRanges } from '@reducers/data'; +import { getDataRequest, getDataRequestSuccess, updateDateRanges } from '@reducers/data'; import { updateMapPosition } from '@reducers/ui'; import { trackMapExport } from '@reducers/analytics'; import { INTERNAL_DATE_SPEC } from '../common/CONSTANTS'; @@ -13,6 +13,7 @@ import CookieNotice from '../main/CookieNotice'; // import "mapbox-gl/dist/mapbox-gl.css"; import Map from './Map'; import moment from 'moment'; +import { CircularProgress } from '@material-ui/core'; // We make API requests on a per-day basis. On average, there are about 4k // requests per day, so 10k is a large safety margin. @@ -228,12 +229,13 @@ class MapContainer extends React.Component { }; setData = async () => { - const { startDate, endDate } = this.props; + const { startDate, endDate, getDataRedux } = this.props; const missingDateRanges = this.getMissingDateRanges(startDate, endDate); if (missingDateRanges.length === 0){ return; } + getDataRedux(); this.rawRequests = []; var allRequestPromises = []; for (const missingDateRange of missingDateRanges){ @@ -283,7 +285,8 @@ class MapContainer extends React.Component { }; render() { - const { position, lastUpdated, updatePosition, exportMap, classes, requests } = this.props; + const { position, lastUpdated, updatePosition, exportMap, classes, requests, + isMapLoading } = this.props; const { ncCounts, ccCounts, selectedTypes } = this.state; return (
@@ -298,6 +301,7 @@ class MapContainer extends React.Component { selectedTypes={selectedTypes} /> + {isMapLoading && }
); } @@ -313,11 +317,13 @@ const mapStateToProps = state => ({ endDate: state.filters.endDate, requests: state.data.requests, dateRangesWithRequests: state.data.dateRangesWithRequests, + isMapLoading: state.data.isMapLoading, }); const mapDispatchToProps = dispatch => ({ updatePosition: position => dispatch(updateMapPosition(position)), exportMap: () => dispatch(trackMapExport()), + getDataRedux: () => dispatch(getDataRequest()), getDataSuccess: data => dispatch(getDataRequestSuccess(data)), updateDateRangesWithRequests: dateRanges => dispatch(updateDateRanges(dateRanges)), }); diff --git a/client/redux/reducers/data.js b/client/redux/reducers/data.js index 09543f39c..0f2b70c0d 100644 --- a/client/redux/reducers/data.js +++ b/client/redux/reducers/data.js @@ -119,7 +119,6 @@ export const gitResponseFailure = error => ({ const initialState = { isMapLoading: false, - isVisLoading: false, error: null, pins: [], pinsInfo: {}, @@ -135,7 +134,6 @@ export default (state = initialState, action) => { return { ...state, isMapLoading: true, - isVisLoading: true, }; case types.GET_DATA_REQUEST_SUCCESS: { const newRequests = { @@ -145,6 +143,7 @@ export default (state = initialState, action) => { return { ...state, requests: newRequests, + isMapLoading: false, }; } case types.UPDATE_DATE_RANGES: diff --git a/client/redux/sagas/data.js b/client/redux/sagas/data.js index bcf45ef33..e911ebdc7 100644 --- a/client/redux/sagas/data.js +++ b/client/redux/sagas/data.js @@ -12,7 +12,6 @@ import { COUNCILS, REQUEST_TYPES } from '@components/common/CONSTANTS'; import { types, - getDataRequest, getPinsSuccess, getPinsFailure, getPinInfoSuccess, @@ -147,7 +146,6 @@ function* getNcByLngLat(action) { } export default function* rootSaga() { - yield takeLatest(types.GET_DATA_REQUEST, getMapData); yield takeLatest(mapFiltersTypes.UPDATE_MAP_DATE_RANGE, getMapData); yield takeLatest(types.GET_NC_BY_LNG_LAT, getNcByLngLat) yield takeEvery(types.GET_PIN_INFO_REQUEST, getPinData);