bookmark poc (#1482)

* bookmarking

Author: bryantran04

client/Routes.jsx

@@ -17,17 +17,21 @@ import About from '@components/main/About';
 import Research from '@components/main/Research';
 import Contact from '@components/contact/Contact';
 import ContentBottom from '@components/common/ContentBottom';
+import queryString from 'query-string';
 
 export default function Routes() {
-  const { pathname } = useLocation();
+  const { pathname, search } = useLocation();
+  const values = queryString.parse(search);
 
   return (
     <>
       {/* Dark Theme - Map. */}
       <ThemeProvider theme={darkTheme}>
         <Paper elevation={0}>
           <Box visibility={pathname !== '/map' ? 'hidden' : 'visible'}>
-            <Desktop />
+            <Desktop
+              initialState={values}
+            />
           </Box>
         </Paper>
       </ThemeProvider>
@@ -43,7 +47,7 @@ export default function Routes() {
             <Route path="/about" component={About} />
             <Route path="/contact" component={Contact} />
             <Route path="/">
-              <Redirect to="map" />
+              <Redirect to={`map${search}`} />
             </Route>
           </Switch>
           <ContentBottom />

client/components/Map/Map.jsx

@@ -125,6 +125,9 @@ class Map extends React.Component {
     this.requestDetail = null;
     this.popup = null;
     this.isSubscribed = null;
+    this.initialState = props.initialState
+    this.hasSetInitialNCView = false
+
   }
 
   componentDidMount() {
@@ -153,6 +156,7 @@ class Map extends React.Component {
       }
     });
     this.map = map;
+
   }
 
   componentWillUnmount() {
@@ -229,6 +233,27 @@ class Map extends React.Component {
       this.setState({ selectedNc: nc });
       return this.ncLayer.selectRegion(ncId);
     }
+
+
+    const { dispatchUpdateNcId,dispatchUpdateSelectedCouncils,dispatchUpdateUnselectedCouncils, councils, ncBoundaries } = this.props;
+
+    if(this.initialState.councilId && councils?.length > 0 && !(this.hasSetInitialNCView) && ncBoundaries){
+      try{
+        const selectedCouncilId = Number(this.initialState.councilId);
+        const newSelectedCouncil = councils.find(({ councilId }) => councilId === selectedCouncilId);
+        if (!newSelectedCouncil){
+          throw new Error('Council Does not exist from search query')
+        }
+        const newSelected = [newSelectedCouncil];
+        dispatchUpdateSelectedCouncils(newSelected);
+        dispatchUpdateUnselectedCouncils(councils);
+        dispatchUpdateNcId(selectedCouncilId);
+        this.hasSetInitialNCView = true
+      } catch (err) {
+        console.log("could not set ncid")
+        this.hasSetInitialNCView = false
+      }
+    }
   }
 
   initLayers = addListeners => {

client/components/Map/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import axios from 'axios';
 import { getDataRequest, getDataRequestSuccess, updateDateRanges } from '@reducers/data';
+import { updateStartDate, updateEndDate, updateNcId, updateRequestTypes} from '@reducers/filters'
 import { updateMapPosition } from '@reducers/ui';
 import { trackMapExport } from '@reducers/analytics';
 import { INTERNAL_DATE_SPEC } from '../common/CONSTANTS';
@@ -41,9 +42,12 @@ class MapContainer extends React.Component {
     // converted and stored in the Redux store.
     this.rawRequests = [];
     this.isSubscribed = null;
+
+    this.initialState = props.initialState
   }
 
-  componentDidMount() {
+  componentDidMount(props) {
+    this.processSearchParams()
     this.isSubscribed = true;
     this.setData();
   }
@@ -65,6 +69,31 @@ class MapContainer extends React.Component {
     this.isSubscribed = false;
   }
 
+
+  processSearchParams = () => {
+    // Dispatch to edit Redux store with url search params
+    const { dispatchUpdateStartDate, dispatchUpdateEndDate, dispatchUpdateTypesFilter } = this.props;
+
+    // Filter requests on time
+    const dateFormat = 'YYYY-MM-DD';
+    // TODO: Check if endDate > startDate
+    if (moment(this.initialState.startDate, 'YYYY-MM-DD', true).isValid() && moment(this.initialState.endDate, 'YYYY-MM-DD',true).isValid()){
+      const formattedStart = moment(this.initialState.startDate).format(dateFormat);
+      const formattedEnd = moment(this.initialState.endDate).format(dateFormat);
+      if (formattedStart <= formattedEnd){
+        dispatchUpdateStartDate(formattedStart);
+        dispatchUpdateEndDate(formattedEnd);
+      }
+    }
+
+    for(let request_id = 1; request_id < 13; request_id++){
+      if (this.initialState[`rtId${request_id}`] == 'false'){
+        dispatchUpdateTypesFilter(request_id);
+      }
+    }
+
+  }
+
   /**
    * Returns the non-overlapping date ranges of A before and after B.
    * @param {string} startA The start date of range A in INTERNAL_DATE_SPEC format.
@@ -301,6 +330,7 @@ class MapContainer extends React.Component {
           updatePosition={updatePosition}
           exportMap={exportMap}
           selectedTypes={selectedTypes}
+          initialState={this.initialState}
         />
         <CookieNotice />
         {isMapLoading && <img style={{ width:window.innerWidth, height: 16, position:'absolute' }} src={gif}/>}
@@ -328,6 +358,10 @@ const mapDispatchToProps = dispatch => ({
   getDataRedux: () => dispatch(getDataRequest()),
   getDataSuccess: data => dispatch(getDataRequestSuccess(data)),
   updateDateRangesWithRequests: dateRanges => dispatch(updateDateRanges(dateRanges)),
+  dispatchUpdateStartDate: startDate => dispatch(updateStartDate(startDate)),
+  dispatchUpdateEndDate: endDate => dispatch(updateEndDate(endDate)),
+  dispatchUpdateNcId: id => dispatch(updateNcId(id)),
+  dispatchUpdateTypesFilter: type => dispatch(updateRequestTypes(type))
 });
 
 MapContainer.propTypes = {};

client/components/Map/layers/RequestsLayer.js

@@ -228,10 +228,12 @@ class RequestsLayer extends React.Component {
   };
 
   setFilters = (selectedTypes, requestStatus, startDate, endDate) => {
-    this.map.setFilter('request-circles',
+    if (this.map){
+      this.map.setFilter('request-circles',
       this.getFilterSpec(selectedTypes, requestStatus, startDate, endDate));
     // Currently, we do not support heatmap. If we did, we'd want to update
     // its filter here as well.
+    }
   };
 
   setRequests = requests => {

client/components/main/Desktop/FilterMenu.js

@@ -15,6 +15,8 @@ import DateSelector from '@components/DateSelector/DateSelector';
 import TypeSelector from '@components/main/Desktop/TypeSelector';
 import StatusSelector from '@components/main/Desktop/StatusSelector';
 import CouncilSelector from '@components/main/Desktop/CouncilSelector';
+import ShareableLinkCreator from '@components/main/Desktop/ShareableLinkCreator';
+
 // import GearButton from '@components/common/GearButton';
 // import clsx from 'clsx';
 
@@ -114,6 +116,9 @@ const FilterMenu = ({ resetMap }) => {
           <div className={classes.selectorWrapper}>
             <StatusSelector />
           </div>
+          <div className={classes.selectorWrapper}>
+            <ShareableLinkCreator />
+          </div>
         </CardContent>
       </Collapse>
     </Card>

client/components/main/Desktop/ShareableLinkCreator.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Button from '@material-ui/core/Button';
+import PropTypes from 'prop-types';
+
+const ShareableLinkCreator = ({
+  requestStatus,
+}) => (
+  <>
+    <Button
+      variant="contained"
+      onClick={() => {
+        // const url = new URL(`${process.env.API_URL}/map`);
+        const url = new URL(`${window.location.href.split('?')[0]}`);
+        if (requestStatus.councilId) {
+          url.searchParams.append('councilId', requestStatus.councilId);
+        }
+        for (let requestTypeIndex = 1; requestTypeIndex < 13; requestTypeIndex += 1) {
+          if (requestStatus.requestTypes[requestTypeIndex] === false) {
+            url.searchParams.append(`rtId${requestTypeIndex}`, requestStatus.requestTypes[requestTypeIndex]);
+          }
+        }
+        url.searchParams.append('requestStatusOpen', requestStatus.requestStatus.open);
+        url.searchParams.append('requestStatusClosed', requestStatus.requestStatus.closed);
+        url.searchParams.append('startDate', requestStatus.startDate);
+        url.searchParams.append('endDate', requestStatus.endDate);
+        navigator.clipboard.writeText(url);
+      }}
+    >
+      Get Shareable Link
+    </Button>
+  </>
+);
+
+const mapStateToProps = state => ({
+  requestStatus: state.filters,
+});
+
+export default connect(
+  mapStateToProps,
+)(ShareableLinkCreator);
+
+ShareableLinkCreator.propTypes = {
+  requestStatus: PropTypes.shape({
+    requestStatus: PropTypes.shape({
+      open: PropTypes.bool.isRequired,
+      closed: PropTypes.bool.isRequired,
+    }).isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+    councilId: PropTypes.number,
+    requestTypes: PropTypes.shape({
+      1: PropTypes.bool,
+      2: PropTypes.bool,
+      3: PropTypes.bool,
+      4: PropTypes.bool,
+      5: PropTypes.bool,
+      6: PropTypes.bool,
+      7: PropTypes.bool,
+      8: PropTypes.bool,
+      9: PropTypes.bool,
+      10: PropTypes.bool,
+      11: PropTypes.bool,
+      12: PropTypes.bool,
+    }),
+  }).isRequired,
+};

client/components/main/Desktop/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
 import MapContainer from '@components/Map';
+import PropTypes from 'prop-types';
 import PersistentDrawerLeft from '../shared/PersistentDrawerLeft';
 
 const useStyles = makeStyles(theme => ({
@@ -14,15 +15,38 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const Desktop = () => {
+const Desktop = ({ initialState }) => {
   const classes = useStyles();
-
   return (
     <div className={classes.root}>
       <PersistentDrawerLeft />
-      <MapContainer />
+      <MapContainer
+        initialState={initialState}
+      />
     </div>
   );
 };
 
 export default Desktop;
+
+Desktop.propTypes = {
+  initialState: PropTypes.shape({
+    councilId: PropTypes.string,
+    rtId1: PropTypes.string,
+    rtId2: PropTypes.string,
+    rtId3: PropTypes.string,
+    rtId4: PropTypes.string,
+    rtId5: PropTypes.string,
+    rtId6: PropTypes.string,
+    rtId7: PropTypes.string,
+    rtId8: PropTypes.string,
+    rtId9: PropTypes.string,
+    rtId10: PropTypes.string,
+    rtId11: PropTypes.string,
+    rtId12: PropTypes.string,
+    requestStatusOpen: PropTypes.string,
+    requestStatusClosed: PropTypes.string,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+  }).isRequired,
+};

client/redux/reducers/filters.js

@@ -77,20 +77,36 @@ const initialState = {
 };
 
 export default (state = initialState, action) => {
+  const url = new URL(window.location.href);
+  const newSearchParams = url.searchParams;
+
   switch (action.type) {
     case types.UPDATE_START_DATE: {
+      newSearchParams.set('startDate', action.payload);
+      url.search = newSearchParams.toString();
+      window.history.replaceState(null, 'Change URL', url);
       return {
         ...state,
         startDate: action.payload,
       };
     }
     case types.UPDATE_END_DATE: {
+      newSearchParams.set('endDate', action.payload);
+      url.search = newSearchParams.toString();
+      window.history.replaceState(null, 'Change URL', url);
       return {
         ...state,
         endDate: action.payload,
       };
     }
     case types.UPDATE_REQUEST_TYPES:
+      if (!state.requestTypes[action.payload]) {
+        newSearchParams.delete(`rtId${action.payload}`);
+      } else {
+        newSearchParams.set(`rtId${action.payload}`, 'false');
+      }
+      url.search = newSearchParams.toString();
+      window.history.replaceState(null, 'Change URL', url);
       return {
         ...state,
         requestTypes: {
@@ -99,6 +115,13 @@ export default (state = initialState, action) => {
         },
       };
     case types.UPDATE_NEIGHBORHOOD_COUNCIL:
+      if (action.payload === state.councilId) {
+        newSearchParams.delete('councilId');
+      } else {
+        newSearchParams.set('councilId', action.payload);
+      }
+      url.search = newSearchParams.toString();
+      window.history.replaceState(null, 'Change URL', url);
       return {
         ...state,
         councilId: action.payload,
@@ -116,6 +139,10 @@ export default (state = initialState, action) => {
     case types.UPDATE_REQUEST_STATUS:
       switch (action.payload) {
         case 'all':
+          newSearchParams.set('requestStatusOpen', true);
+          newSearchParams.set('requestStatusClosed', true);
+          url.search = newSearchParams.toString();
+          window.history.replaceState(null, 'Change URL', url);
           return {
             ...state,
             requestStatus: {
@@ -125,6 +152,10 @@ export default (state = initialState, action) => {
             },
           };
         case 'open':
+          newSearchParams.set('requestStatusOpen', true);
+          newSearchParams.set('requestStatusClosed', false);
+          url.search = newSearchParams.toString();
+          window.history.replaceState(null, 'Change URL', url);
           return {
             ...state,
             requestStatus: {
@@ -134,6 +165,10 @@ export default (state = initialState, action) => {
             },
           };
         case 'closed':
+          newSearchParams.set('requestStatusOpen', false);
+          newSearchParams.set('requestStatusClosed', true);
+          url.search = newSearchParams.toString();
+          window.history.replaceState(null, 'Change URL', url);
           return {
             ...state,
             requestStatus: {