Merge pull request #1089 from hackforla/1017-FRONT-nc-info

Added location info to map

client/components/Map/LocationDetail.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import Box from '@material-ui/core/Box';
+
+const useStyles = makeStyles(theme => ({
+  locationInfo: {
+    borderRadius: 10,
+    width: 325,
+    backgroundColor: theme.palette.primary.main,
+    padding: 15,
+    marginTop: theme.gaps.xs,
+  },
+  header: {
+    color: theme.palette.text.cyan,
+    letterSpacing: '2px',
+  },
+  subheader: {
+    ...theme.typography.body2,
+    color: '#A8A8A8',
+  },
+  link: {
+    ...theme.typography.h2,
+    color: '#ececec',
+  },
+}));
+
+const LocationDetail = ({
+  address,
+  nc,
+  // ccs,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.locationInfo}>
+      <Typography
+        className={classes.header}
+        variant="h1"
+        component="h2"
+      >
+        INFORMATION
+      </Typography>
+      {address && (
+        <Box mt={1}>
+          <Typography component="div" className={classes.subheader}>Address:</Typography>
+          <Typography component="span">{address}</Typography>
+        </Box>
+      )}
+      {nc && (
+        <Box mt={1}>
+          <Typography component="div" className={classes.subheader}>Neighborhood Council District:</Typography>
+          <Link
+            className={classes.link}
+            href={nc.website}
+            target="_blank"
+            rel="noopener"
+            underline="always"
+          >
+            {nc.councilName}
+          </Link>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export default LocationDetail;
+
+LocationDetail.propTypes = {
+  address: PropTypes.string,
+  nc: PropTypes.shape({
+    website: PropTypes.string,
+    councilName: PropTypes.string,
+  }),
+};
+
+LocationDetail.defaultProps = {
+  address: undefined,
+  nc: null,
+};

client/components/Map/Map.jsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import mapboxgl from 'mapbox-gl';
 import FilterMenu from '@components/main/Desktop/FilterMenu';
+import LocationDetail from './LocationDetail';
 
 import { REQUEST_TYPES } from '@components/common/CONSTANTS';
 import { getNcByLngLat, setSelectedNcId } from '@reducers/data';
@@ -87,13 +88,6 @@ const styles = theme => ({
     left: 35,
     top: 75,
   },
-  locationInfo: {
-    marginTop: 5,
-    borderRadius: 10,
-    width: 325,
-    backgroundColor: theme.palette.primary.main,
-    padding: 10,
-  },
 })
 
 class Map extends React.Component {
@@ -114,6 +108,7 @@ class Map extends React.Component {
       mapStyle: 'streets',
       canReset: true,
       selectedRequestId: null,
+      selectedNc: null,
       requests: props.requests,
     };
 
@@ -215,6 +210,12 @@ class Map extends React.Component {
         }
       });
     }
+
+    if (this.props.selectedNcId !== prevProps.selectedNcId) {
+      const { councils, selectedNcId } = this.props;
+      const nc = councils.find(({ councilId }) => councilId === selectedNcId);
+      this.setState({ selectedNc: nc });
+    }
   }
 
   initLayers = addListeners => {
@@ -494,6 +495,7 @@ class Map extends React.Component {
       // hoveredRegionName,
       canReset,
       selectedRequestId,
+      selectedNc,
       selectedTypes,
       address,
     } = this.state;
@@ -547,12 +549,7 @@ class Map extends React.Component {
                 canReset={!!filterGeo && canReset}
               />
               <FilterMenu />
-              <div className={classes.locationInfo}>
-                <div>Placeholder</div>
-                TODO: Add NC/CC, links
-                {address && <p>Address: {address}</p>}
-                {selectedNcId && <p>ncId: {selectedNcId}</p>}
-              </div>
+              <LocationDetail address={address} nc={selectedNc} />
             </div>
             {/* <MapLayers
               selectedTypes={selectedTypes}

client/components/main/Desktop/FilterMenu.js

@@ -35,9 +35,9 @@ const useStyles = makeStyles(theme => ({
   },
   headerTitle: {
     ...theme.typography.h1,
-    marginLeft: theme.gaps.xs,
     fontWeight: 600,
     letterSpacing: '2px',
+    marginLeft: theme.gaps.xs,
   },
   headerContent: {
     display: 'flex',

client/theme/typography.js

@@ -18,7 +18,6 @@ export default {
   h2: {
     fontSize: 18,
     fontWeight: robotoMedium,
-
   },
   h3: {
     fontFamily: oswald,