hackforla · adamkendis · Mar 25, 2020 · Mar 25, 2020 · Mar 25, 2020 · Mar 25, 2020
diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
@@ -137,12 +137,11 @@ class PinMap extends Component {
             address,
             ncname,
           } = pinsInfo[srnumber] || {};
-          const { color, abbrev } = REQUEST_TYPES.find(req => req.type === requesttype
-            || req.fullType === requesttype);
+          const { displayName, color, abbrev } = REQUEST_TYPES[requesttype];
 
           const popup = (
             <PinPopup
-              requestType={requesttype}
+              displayName={displayName}
               color={color}
               abbrev={abbrev}
               address={address}

diff --git a/src/components/PinMap/PinPopup.jsx b/src/components/PinMap/PinPopup.jsx
@@ -5,7 +5,7 @@ import moment from 'moment';
 import { Popup } from 'react-leaflet';
 
 const PinPopup = ({
-  requestType,
+  displayName,
   color,
   abbrev,
   address,
@@ -28,7 +28,7 @@ const PinPopup = ({
       { createdDate ? (
         <>
           <p className="pin-popup-type has-text-weight-bold">
-            {requestType}
+            {displayName}
             &nbsp;
             [
             <span className="pin-popup-type-abbrev" style={{ color }}>
@@ -77,7 +77,7 @@ const PinPopup = ({
 export default PinPopup;
 
 PinPopup.propTypes = {
-  requestType: PropTypes.string,
+  displayName: PropTypes.string,
   color: PropTypes.string,
   abbrev: PropTypes.string,
   address: PropTypes.string,
@@ -89,7 +89,7 @@ PinPopup.propTypes = {
 };
 
 PinPopup.defaultProps = {
-  requestType: undefined,
+  displayName: undefined,
   color: 'black',
   abbrev: undefined,
   address: undefined,

diff --git a/src/components/Visualizations/Frequency.jsx b/src/components/Visualizations/Frequency.jsx
@@ -15,7 +15,7 @@ const Frequency = ({
   const chartData = {
     labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')),
     datasets: Object.keys(counts).map(key => {
-      const requestType = REQUEST_TYPES.find(t => t.type === key);
+      const requestType = REQUEST_TYPES[key];
       return {
         data: counts[key],
         label: requestType?.abbrev,

diff --git a/src/components/Visualizations/Legend.jsx b/src/components/Visualizations/Legend.jsx
@@ -6,21 +6,25 @@ import { REQUEST_TYPES } from '@components/common/CONSTANTS';
 const Legend = ({
   requestTypes,
 }) => {
-  const selectedTypes = REQUEST_TYPES.filter(el => requestTypes[el.type]);
+  const selectedTypes = (
+    Object.keys(requestTypes)
+      .filter(type => type !== 'All' && requestTypes[type])
+      .map(type => REQUEST_TYPES[type])
+  );
 
   return (
     <div className="legend">
       <h1 className="has-text-centered">Legend</h1>
       <div className="outline">
         {
           selectedTypes.length > 0
-            ? selectedTypes.map(({ type, color, abbrev }) => (
+            ? selectedTypes.map(({ displayName, color, abbrev }) => (
               <span key={abbrev} className="legend-item">
                 <div
                   className="circle"
                   style={{ backgroundColor: color }}
                 />
-                { type }
+                { displayName }
                 {' '}
                 [
                 <span style={{ color }}>{abbrev}</span>

diff --git a/src/components/Visualizations/TimeToClose.jsx b/src/components/Visualizations/TimeToClose.jsx
@@ -10,7 +10,7 @@ const TimeToClose = ({
   // // DATA ////
 
   const boxes = Object.keys(timeToClose).map(key => {
-    const requestType = REQUEST_TYPES.find(t => t.type === key);
+    const requestType = REQUEST_TYPES[key];
     return {
       abbrev: requestType?.abbrev,
       color: requestType?.color,

diff --git a/src/components/Visualizations/TotalRequests.jsx b/src/components/Visualizations/TotalRequests.jsx
@@ -15,7 +15,7 @@ const TotalRequests = ({
   const chartData = {
     labels: bins.slice(0, -1).map(bin => moment(bin).format('MMM D')),
     datasets: Object.keys(counts).map(key => {
-      const requestType = REQUEST_TYPES.find(t => t.type === key);
+      const requestType = REQUEST_TYPES[key];
       return {
         data: counts[key],
         label: requestType?.abbrev,

diff --git a/src/components/Visualizations/TypeOfRequest.jsx b/src/components/Visualizations/TypeOfRequest.jsx
@@ -8,9 +8,9 @@ const TypeOfRequest = ({
   typeCounts,
 }) => {
   const sectors = Object.keys(typeCounts).map(key => ({
-    label: key,
+    label: REQUEST_TYPES[key]?.displayName,
     value: typeCounts[key],
-    color: REQUEST_TYPES.find(t => t.type === key)?.color,
+    color: REQUEST_TYPES[key]?.color,
   }));
 
   return (

diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js
@@ -1,91 +1,62 @@
 export default {};
 
-export const YEARS = [
-  '2015',
-  '2016',
-  '2017',
-  '2018',
-  '2019',
-];
-
-export const MONTHS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-export const REQUEST_TYPES = [
-  {
-    type: 'Dead Animal',
-    fullType: 'Dead Animal Removal',
+export const REQUEST_TYPES = {
+  'Dead Animal Removal': {
+    displayName: 'Dead Animal',
     abbrev: 'DAN',
     color: '#4FEFEF',
   },
-  {
-    type: 'Homeless Encampment',
+  'Homeless Encampment': {
+    displayName: 'Homeless Encampment',
     abbrev: 'HLE',
     color: '#ECB800',
   },
-  {
-    type: 'Single Streetlight',
-    fullType: 'Single Streetlight Issue',
+  'Single Streetlight Issue': {
+    displayName: 'Single Streetlight',
     abbrev: 'SSL',
     color: '#AD7B56',
   },
-  {
-    type: 'Multiple Streetlight',
-    fullType: 'Multiple Streetlight Issue',
+  'Multiple Streetlight Issue': {
+    displayName: 'Multiple Streetlight',
     abbrev: 'MSL',
     color: '#F7ADAD',
   },
-  {
-    type: 'Feedback',
+  Feedback: {
+    displayName: 'Feedback',
     abbrev: 'FBK',
     color: '#FFE6B7',
   },
-  {
-    type: 'Bulky Items',
+  'Bulky Items': {
+    displayName: 'Bulky Items',
     abbrev: 'BLK',
     color: '#FF0000',
   },
-  {
-    type: 'E-Waste',
-    fullType: 'Electronic Waste',
+  'Electronic Waste': {
+    displayName: 'E-Waste',
     abbrev: 'EWT',
     color: '#DDEC9F',
   },
-  {
-    type: 'Metal/Household Appliances',
+  'Metal/Household Appliances': {
+    displayName: 'Metal/Household Appliances',
     abbrev: 'MHA',
     color: '#B8D0FF',
   },
-  {
-    type: 'Graffiti',
-    fullType: 'Graffiti Removal',
+  'Graffiti Removal': {
+    displayName: 'Graffiti',
     abbrev: 'GFT',
     color: '#2368D0',
   },
-  {
-    type: 'Illegal Dumping',
-    fullType: 'Illegal Dumping Pickup',
+  'Illegal Dumping Pickup': {
+    displayName: 'Illegal Dumping',
     abbrev: 'ILD',
     color: '#6A8011',
   },
-  {
-    type: 'Other',
+  Other: {
+    displayName: 'Other',
     abbrev: 'OTH',
     color: '#6D7C93',
   },
-];
+};
 
 export const REQUEST_SOURCES = [
   {
@@ -114,20 +85,6 @@ export const REQUEST_SOURCES = [
   },
 ];
 
-export const REQUESTS = [
-  'Bulky Items',
-  'Dead Animal Removal',
-  'Electronic Waste',
-  'Graffiti Removal',
-  'Homeless Encampment',
-  'Illegal Dumping Pickup',
-  'Metal/Household Appliances',
-  'Single Streetlight Issue',
-  'Multiple Streetlight Issue',
-  'Report Water Waste',
-  'Other',
-];
-
 export const COUNCILS = [
   'ARLETA NC',
   'ARROYO SECO NC',

diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx
@@ -25,18 +25,21 @@ const checkboxStyle = {
   paddingLeft: '3px',
 };
 
+const types = Object.keys(REQUEST_TYPES);
+
 const midIndex = (list => {
   if (list.length / 2 === 0) {
     return (list.length / 2);
   }
   return Math.floor(list.length / 2);
-})(REQUEST_TYPES);
+})(types);
 
-const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
-const rightColumnItems = REQUEST_TYPES.slice(midIndex);
+const leftColumnItems = types.slice(0, midIndex);
+const rightColumnItems = types.slice(midIndex);
 
 const RequestItem = ({
   type,
+  displayName,
   abbrev,
   selected,
   color,
@@ -66,7 +69,7 @@ const RequestItem = ({
       />
     </span>
     <span>
-      {`${type} [${abbrev}]`}
+      {`${displayName} [${abbrev}]`}
     </span>
   </div>
 );
@@ -82,16 +85,20 @@ const RequestTypeSelector = ({
     selectType(type);
   };
 
-  const renderRequestItems = items => items.map(item => (
-    <RequestItem
-      key={item.type}
-      type={item.type}
-      abbrev={item.abbrev}
-      handleClick={handleItemClick}
-      selected={requestTypes[item.type]}
-      color={item.color}
-    />
-  ));
+  const renderRequestItems = items => items.map(type => {
+    const item = REQUEST_TYPES[type];
+    return (
+      <RequestItem
+        key={type}
+        type={type}
+        displayName={item.displayName}
+        abbrev={item.abbrev}
+        handleClick={handleItemClick}
+        selected={requestTypes[type]}
+        color={item.color}
+      />
+    );
+  });
 
   return (
     <div id="type-selector-container" style={{ color: COLORS.FONTS }}>
@@ -166,6 +173,7 @@ export default connect(
 
 RequestItem.propTypes = {
   type: PropTypes.string,
+  displayName: PropTypes.string,
   abbrev: PropTypes.string,
   color: PropTypes.string,
   selected: PropTypes.bool,
@@ -174,6 +182,7 @@ RequestItem.propTypes = {
 
 RequestItem.defaultProps = {
   type: null,
+  displayName: null,
   abbrev: null,
   color: null,
   selected: false,