Merge pull request #1049 from hackforla/1012-FRONT-add-agencies

Added agency, source to request detail popup
hackforla · Mar 25, 2021 · 28e8374 · 28e8374
2 parents 862b501 + 8ba88a2
commit 28e8374
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 11 deletions.
diff --git a/client/components/Footer.jsx b/client/components/Footer.jsx
@@ -10,6 +10,8 @@ import moment from 'moment';
 
 const useStyles = makeStyles(theme => ({
   footer: {
+    position: 'fixed',
+    bottom: 0,
     height: theme.footer.height,
     width: '100%',
     backgroundColor: theme.palette.primary.dark,

diff --git a/client/components/Map/Map.jsx b/client/components/Map/Map.jsx
@@ -53,6 +53,7 @@ const styles = theme => ({
       display: 'none',
     },
     '& .mapboxgl-popup-content': {
+      minWidth: 250,
       backgroundColor: theme.palette.primary.main,
       borderRadius: 5,
       padding: 10,

diff --git a/client/components/Map/RequestDetail.jsx b/client/components/Map/RequestDetail.jsx
@@ -8,6 +8,7 @@ import { getPinInfoRequest } from '@reducers/data';
 import toTitleCase from '@utils/toTitleCase';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
+import Link from '@material-ui/core/Link';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -22,7 +23,7 @@ const styles = theme => ({
   popupContent: {
     backgroundColor: theme.palette.primary.main,
     padding: '0 8',
-    minWidth: 215,
+    width: '100%',
   },
   requestType: {
     ...theme.typography.h4,
@@ -55,7 +56,7 @@ class RequestDetail extends React.Component {
 
   render() {
     const {
-      classes, requestId, pinsInfo, requestTypes,
+      classes, requestId, pinsInfo, requestTypes, agencies,
     } = this.props;
 
     if (!requestId) return null;
@@ -78,11 +79,17 @@ class RequestDetail extends React.Component {
       councilName,
       typeName,
       typeId: requestTypeId,
+      agencyId: aId,
+      agencyName,
+      sourceName,
       createdDate,
       closedDate,
       address,
     } = pinsInfo[requestId];
 
+    const { color } = requestTypes.find(({ typeId }) => typeId === requestTypeId);
+    const { website } = agencies.find(({ agencyId }) => agencyId === aId);
+
     return (
       <div className={classes.popupContent}>
         <Grid
@@ -98,7 +105,7 @@ class RequestDetail extends React.Component {
             <FiberManualRecordIcon
               className={classes.icon}
               style={{
-                color: requestTypes.find(({ typeId }) => typeId === requestTypeId).color,
+                color,
                 fontSize: 16,
               }}
             />
@@ -114,14 +121,8 @@ class RequestDetail extends React.Component {
           justify="space-between"
           alignItems="flex-start"
         >
-          <Grid item xs={6}>
-            Service request:
-          </Grid>
-          <Grid
-            item
-            xs={6}
-            style={{ textAlign: 'right' }}
-          >
+          <Grid item xs={6}>Service request:</Grid>
+          <Grid item xs={6} style={{ textAlign: 'right' }}>
             {srnumber}
           </Grid>
           <Grid item xs={6}>
@@ -163,6 +164,23 @@ class RequestDetail extends React.Component {
               </>
             )
           }
+          <Grid item xs={6}>Source:</Grid>
+          <Grid item xs={6} style={{ textAlign: 'right' }}>
+            {sourceName}
+          </Grid>
+          <Grid item xs={3}>Agency:</Grid>
+          <Grid item xs={9} style={{ textAlign: 'right' }}>
+            <Link
+              href={website}
+              aria-label={`${agencyName} website`}
+              target="_blank"
+              rel="noopener"
+              color="inherit"
+              underline="always"
+            >
+              {agencyName}
+            </Link>
+          </Grid>
         </Grid>
       </div>
     );
@@ -172,6 +190,7 @@ class RequestDetail extends React.Component {
 const mapStateToProps = state => ({
   pinsInfo: state.data.pinsInfo,
   requestTypes: state.metadata.requestTypes,
+  agencies: state.metadata.agencies,
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -184,10 +203,12 @@ RequestDetail.propTypes = {
   requestId: PropTypes.number,
   pinsInfo: PropTypes.shape({}),
   requestTypes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  agencies: PropTypes.arrayOf(PropTypes.shape({})),
   getPinInfo: PropTypes.func.isRequired,
 };
 
 RequestDetail.defaultProps = {
   requestId: null,
   pinsInfo: {},
+  agencies: [],
 };
diff --git a/client/redux/reducers/metadata.js b/client/redux/reducers/metadata.js
@@ -5,6 +5,7 @@ export const types = {
   GET_REQUEST_TYPES_SUCCESS: 'GET_REQUEST_TYPES_SUCCESS',
   GET_COUNCILS_SUCCESS: 'GET_COUNCILS_SUCCESS',
   GET_REGIONS_SUCCESS: 'GET_REGIONS_SUCCESS',
+  GET_AGENCIES_SUCCESS: 'GET_AGENCIES_SUCCESS',
   GET_NC_GEOJSON_SUCCESS: 'GET_NC_GEOJSON_SUCCESS',
 };
 
@@ -37,6 +38,11 @@ export const getRegionsSuccess = response => ({
   payload: response,
 });
 
+export const getAgenciesSuccess = response => ({
+  type: types.GET_AGENCIES_SUCCESS,
+  payload: response,
+});
+
 export const getNcGeojsonSuccess = response => ({
   type: types.GET_NC_GEOJSON_SUCCESS,
   payload: response,
@@ -52,6 +58,7 @@ const initialState = {
   requestTypes: [],
   councils: null,
   regions: null,
+  agencies: null,
   ncGeojson: null,
 };
 
@@ -77,6 +84,11 @@ export default (state = initialState, action) => {
         ...state,
         regions: action.payload,
       };
+    case types.GET_AGENCIES_SUCCESS:
+      return {
+        ...state,
+        agencies: action.payload,
+      };
     case types.GET_NC_GEOJSON_SUCCESS:
       return {
         ...state,

diff --git a/client/redux/sagas/metadata.js b/client/redux/sagas/metadata.js
@@ -13,6 +13,7 @@ import {
   getCouncilsSuccess,
   getRegionsSuccess,
   getNcGeojsonSuccess,
+  getAgenciesSuccess,
   getMetadataFailure,
 } from '../reducers/metadata';
 
@@ -24,25 +25,29 @@ function* getMetadata() {
       requestTypes,
       councils,
       regions,
+      agencies,
       ncGeojson,
     ] = yield all([
       call(axios.get, `${baseUrl}/status/api`),
       call(axios.get, `${baseUrl}/types`),
       call(axios.get, `${baseUrl}/councils`),
       call(axios.get, `${baseUrl}/regions`),
+      call(axios.get, `${baseUrl}/agencies`),
       call(axios.get, `${baseUrl}/geojson`),
     ]);
     const { data: statusMetadata } = metadata;
     const { data: typesMetadata } = requestTypes;
     const { data: councilsMetadata } = councils;
     const { data: regionsMetadata } = regions;
+    const { data: agenciesMetadata } = agencies;
     const { data: ncGeojsonMetadata } = ncGeojson;
 
     yield all([
       put(getMetadataSuccess(statusMetadata)),
       put(getRequestTypesSuccess(typesMetadata)),
       put(getCouncilsSuccess(councilsMetadata)),
       put(getRegionsSuccess(regionsMetadata)),
+      put(getAgenciesSuccess(agenciesMetadata)),
       put(getNcGeojsonSuccess(ncGeojsonMetadata)),
     ]);
   } catch (e) {