Merge pull request #1920 from efrenmarin45/1865-dev---remove-pins-from-react-redux-state

1865 remove pins from react redux state

Author: ryanfchase

.gitignore

@@ -29,6 +29,7 @@ stats.json
 docker/
 venv/
 .vscode
+.editorconfig
 .prettierignore
 
 # socrata experimental files

components/Map/Map.jsx

@@ -211,20 +211,13 @@ class Map extends React.Component {
       if (this.state.mapReady) {
         this.setState({ requests: this.props.requests });
         this.map.on('idle', entireMapLoadTime);
-        // this.map.once('idle', this.setFilteredRequestCounts);
       } else {
         this.map.once('idle', () => {
           this.setState({ requests: this.props.requests });
-          // this.map.once('idle', this.setFilteredRequestCounts);
         });
       }
     }
 
-    // if (this.props.requestTypes != prevProps.requestTypes) {
-    //   this.requestsLayer.init({
-    //     map: this.map,
-    //   });
-    // }
     this.map.on('load', () => {
       // grab the Zoom Out button of the Mapbox zoom controls
       const zoomOutControl = document.querySelector(
@@ -676,24 +669,6 @@ class Map extends React.Component {
     console.log(this.map.getCanvas().toDataURL());
   };
 
-  // setSelectedTypes = selectedTypes => {
-  //   this.setState({ selectedTypes });
-  // };
-
-  // setActiveRequestsLayer = layerName => {
-  //   this.setState({ activeRequestsLayer: layerName });
-  // };
-
-  // setMapStyle = mapStyle => {
-  //   this.setState({ mapStyle });
-  //   this.map.setStyle(MAP_STYLES[mapStyle]);
-  //   this.map.once('styledata', () => this.initLayers(false));
-  // };
-
-  // setColorScheme = scheme => {
-  //   this.setState({ colorScheme: scheme });
-  // };
-
   getDistrictCounts = (geoFilterType, filterGeo, selectedTypes) => {
     const { ncCounts, ccCounts } = this.props;
     const { counts, regionId } = (() => {
@@ -768,6 +743,29 @@ class Map extends React.Component {
     this.setState({ filteredRequestCounts: counts });
   };
 
+  ncUpdateCheck () {
+    //TODO: Holding off on this function until query parameter logic is implemented. 
+    // Check to see if councilId is present and updates the state
+    const {
+      councilId,
+      councils,
+      dispatchUpdateNcId,
+      dispatchUpdateSelectedCouncils,
+      dispatchUpdateUnselectedCouncils,
+    } = this.props;
+    if (councilId) {
+      const selectedCouncil = councils.find(
+        ({ councilId: id }) => id === councilId
+      );
+      if (selectedCouncil) {
+        this.setState({ selectedNc: selectedCouncil });
+        dispatchUpdateSelectedCouncils([selectedCouncil]);
+        dispatchUpdateUnselectedCouncils(councils);
+        dispatchUpdateNcId(councilId);
+        this.ncLayer.selectRegion(councilId);
+      }
+    }
+  }
   setRequestDetailLoading = (isLoading) => {
     if (!isLoading && this.popup) {
       this.popup.addClassName(this.props.classes.loadedModal);
@@ -778,28 +776,19 @@ class Map extends React.Component {
 
   render() {
     const {
-      pinsInfo,
-      getPinInfo,
-      lastUpdated,
       requestTypes,
-      selectedNcId,
       councils,
     } = this.props;
 
     const {
       geoFilterType,
-      locationInfo,
-      // filteredRequestCounts,
       colorScheme,
       filterGeo,
       activeRequestsLayer,
       mapStyle,
-      // hoveredRegionName,
       canReset,
       selectedRequestId,
-      // selectedNc,
       selectedTypes,
-      address,
     } = this.state;
 
     const { classes } = this.props;
@@ -841,12 +830,6 @@ class Map extends React.Component {
         </div>
         {this.state.mapReady && requestTypes && (
           <>
-            {/* <MapOverview
-              date={lastUpdated}
-              locationInfo={locationInfo}
-              selectedRequests={filteredRequestCounts}
-              colorScheme={colorScheme}
-            /> */}
             <div className={classes.menuWrapper}>
               <MapSearch
                 map={this.map}
@@ -861,22 +844,7 @@ class Map extends React.Component {
                 resetMap={this.reset}
                 resetAddressSearch={this.resetAddressSearch}
               />
-              {/* {
-                (selectedNc || address) && <LocationDetail address={address} nc={selectedNc} />
-              } */}
             </div>
-            {/* <MapLayers
-              selectedTypes={selectedTypes}
-              onChangeSelectedTypes={this.setSelectedTypes}
-              requestsLayer={activeRequestsLayer}
-              onChangeRequestsLayer={this.setActiveRequestsLayer}
-              mapStyle={mapStyle}
-              onChangeMapStyle={this.setMapStyle}
-              colorScheme={colorScheme}
-              onChangeColorScheme={this.setColorScheme}
-            /> */}
-            {/* <MapRegion regionName={hoveredRegionName} />
-            <MapMeta map={this.map} /> */}
           </>
         )}
       </div>

components/Map/index.jsx

@@ -29,10 +29,6 @@ import ddbh from '@utils/duckDbHelpers.js';
 import DbContext from '@db/DbContext';
 import AcknowledgeModal from '../Loading/AcknowledgeModal';
 
-// 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.
-const REQUEST_LIMIT = 10000;
-
 const styles = (theme) => ({
   root: {
     height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
@@ -99,7 +95,7 @@ class MapContainer extends React.Component {
   }
 
   async componentDidUpdate(prevProps) {
-    const { activeMode, pins, startDate, endDate } = this.props;
+    const { activeMode, startDate, endDate, councilId } = this.props;
     // create conditions to check if year or startDate or endDate changed
     const yearChanged = moment(prevProps.startDate).year() !== moment(startDate).year();
     const startDateChanged = prevProps.startDate !== startDate;
@@ -109,11 +105,7 @@ class MapContainer extends React.Component {
     // when both the startDate and endDate are selected.
     const didDateRangeChange = (yearChanged || startDateChanged || endDateChanged) && endDate !== null;
 
-    if (
-      prevProps.activeMode !== activeMode ||
-      prevProps.pins !== pins ||
-      didDateRangeChange
-    ) {
+    if (prevProps.activeMode !== activeMode || prevProps.councilId !== councilId || didDateRangeChange) {
       await this.createRequestsTable();
       await this.setData();
     }
@@ -406,11 +398,9 @@ class MapContainer extends React.Component {
     });
 
   // TODO: fix this
+  //? Fix what? Need to leave more detailed comments.
   getSelectedTypes = () => {
     const { requestTypes } = this.props;
-    // return Object.keys(requestTypes).filter(type => {
-    //   return type !== 'All' && requestTypes[type]
-    // });
     return requestTypes;
   };
 
@@ -473,6 +463,7 @@ const mapStateToProps = (state) => ({
   dateRangesWithRequests: state.data.dateRangesWithRequests,
   isMapLoading: state.data.isMapLoading,
   isDbLoading: state.data.isDbLoading,
+	councilId: state.filters.councilId,
 });
 
 const mapDispatchToProps = (dispatch) => ({

redux/reducers/data.js

@@ -50,16 +50,6 @@ export const updateDateRanges = dateRanges => ({
   payload: dateRanges,
 });
 
-export const getPinsSuccess = response => ({
-  type: types.GET_PINS_SUCCESS,
-  payload: response,
-});
-
-export const getPinsFailure = error => ({
-  type: types.GET_PINS_FAILURE,
-  payload: error,
-});
-
 export const updatePinInfo = pinData => ({
   type: types.UPDATE_PIN_INFO,
   payload: pinData,

redux/sagas/data.js

@@ -1,37 +1,26 @@
 import axios from 'axios';
 import {
   takeLatest,
-  // takeEvery,
   call,
   put,
   select,
 } from 'redux-saga/effects';
 import { COUNCILS } from '@components/common/CONSTANTS';
-
 import {
   types,
-  getPinsSuccess,
-  getPinsFailure,
-  // getPinInfoSuccess,
-  // getPinInfoFailure,
   getNcByLngLatSuccess,
   getNcByLngLatFailure,
   gitResponseSuccess,
   gitResponseFailure,
 } from '../reducers/data';
-
 import { updateNcId } from '../reducers/filters';
-
 import { setErrorModal, showFeedbackSuccess } from '../reducers/ui';
-
 import { types as mapFiltersTypes } from '../reducers/mapFilters';
 
-/* ////////////////// API CALLS  //////////////// */
-
+//* API Call
 const BASE_URL = import.meta.env.API_URL;
 
-/* ////  MAP //// */
-
+//* Map
 function* fetchPins(filters) {
   const pinsUrl = `${BASE_URL}/map/pins`;
 
@@ -40,14 +29,6 @@ function* fetchPins(filters) {
   return data;
 }
 
-// function* fetchPinInfo(srnumber) {
-//   const pinInfoUrl = `${BASE_URL}/requests/${srnumber}`;
-//
-//   const { data } = yield call(axios.get, pinInfoUrl);
-//
-//   return data;
-// }
-
 function* fetchNcByLngLat({ longitude, latitude }) {
   const geocodeUrl = `${BASE_URL}/geojson/geocode?latitude=${latitude}&longitude=${longitude}`;
 
@@ -56,17 +37,15 @@ function* fetchNcByLngLat({ longitude, latitude }) {
   return data;
 }
 
-/* //// OTHER //// */
-
+//* Other
 function* postFeedback(message) {
   const contactURL = `${BASE_URL}/feedback`;
 
   const response = yield call(axios.post, contactURL, message);
   return response;
 }
 
-/* ////////////////// FILTERS //////////////// */
-
+//* Filters
 const getState = (state, slice) => state[slice];
 
 function* getFilters() {
@@ -90,12 +69,10 @@ function* getFilters() {
   };
 }
 
-/* /////////////////// SAGAS ///////////////// */
 
+//* Sagas
 function* getMapData() {
   const filters = yield getFilters();
-  // const mapPosition = yield getMapPosition();
-
   if (filters.ncList.length === 0 || filters.requestTypes.length === 0) {
     yield put(getPinsSuccess([]));
     return;
@@ -110,17 +87,6 @@ function* getMapData() {
   }
 }
 
-// function* getPinData(action) {
-//   try {
-//     const srnumber = action.payload;
-//     const data = yield call(fetchPinInfo, srnumber);
-//     yield put(getPinInfoSuccess(data));
-//   } catch (e) {
-//     yield put(getPinInfoFailure(e));
-//     yield put(setErrorModal(true));
-//   }
-// }
-
 function* getNcByLngLat(action) {
   try {
     const data = yield call(fetchNcByLngLat, action.payload);
@@ -151,6 +117,5 @@ function* sendContactData(action) {
 export default function* rootSaga() {
   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);
   yield takeLatest(types.SEND_GIT_REQUEST, sendContactData);
 }