From 05e7bc8977a5d7dcb8fd97694e49826929f15d99 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 12:08:11 -0800
Subject: [PATCH 01/12] Added REQUEST_TYPES (type, abbrev, color) to CONSTANTS.

---
 src/components/common/CONSTANTS.js | 63 ++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js
index f96f3c2fc..089adb80e 100644
--- a/src/components/common/CONSTANTS.js
+++ b/src/components/common/CONSTANTS.js
@@ -23,6 +23,69 @@ export const MONTHS = [
   'December',
 ];
 
+export const REQUEST_TYPES = [
+  {
+    type: 'Bulky Items',
+    abbrev: 'BLK',
+    color: '#FF0000',
+  },
+  {
+    type: 'Dead Animal',
+    abbrev: 'DAN',
+    color: '#4FEFEF',
+  },
+  {
+    type: 'E-Waste',
+    abbrev: 'EWT',
+    color: '#DDEC9F',
+  },
+  {
+    type: 'Graffiti',
+    abbrev: 'GFT',
+    color: '#2368D0',
+  },
+  {
+    type: 'Homeless Encampment',
+    abbrev: 'HLE',
+    color: '#ECB800',
+  },
+  {
+    type: 'Illegal Dumping',
+    abbrev: 'ILD',
+    color: '#6A8011',
+  },
+  {
+    type: 'Metal/Household Appliances',
+    abbrev: 'MHA',
+    color: '#B8D0FF',
+  },
+  {
+    type: 'Single Streetlight',
+    abbrev: 'SSL',
+    color: '#AD7B56',
+  },
+  {
+    type: 'Multiple Streetlight',
+    abbrev: 'MSL',
+    color: '#F7ADAD',
+  },
+  {
+    type: 'Feedback',
+    abbrev: 'FBK',
+    color: '#FFE6B7',
+  },
+  {
+    type: 'Other',
+    abbrev: 'OTH',
+    color: '#6D7C93',
+  },
+
+  /*
+   * Is 'Report Water Waste' still a valid request type?
+   * If so, we're missing it on the front end mockups.
+   */
+];
+
 export const REQUESTS = [
   'Bulky Items',
   'Dead Animal Removal',

From 113da701c7c9472c8e4f3637f96c9b79acfa8280 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 15:09:33 -0800
Subject: [PATCH 02/12] Changed default color prop in Icon to undefined.

---
 src/components/common/Icon.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Icon.jsx b/src/components/common/Icon.jsx
index 4633d1bfd..9ee4ea8a9 100644
--- a/src/components/common/Icon.jsx
+++ b/src/components/common/Icon.jsx
@@ -91,7 +91,7 @@ Icon.propTypes = {
 Icon.defaultProps = {
   label: null,
   handleClick: () => null,
-  color: 'black',
+  color: undefined,
   size: undefined,
   icon: 'home',
   iconSize: undefined,

From 62526b909e44ee527272efef7ae2105d0efd279c Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 23:31:15 -0800
Subject: [PATCH 03/12] Re-ordered REQUEST_TYPES.

---
 src/components/common/CONSTANTS.js | 50 +++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/common/CONSTANTS.js b/src/components/common/CONSTANTS.js
index 089adb80e..16e0e631b 100644
--- a/src/components/common/CONSTANTS.js
+++ b/src/components/common/CONSTANTS.js
@@ -24,41 +24,16 @@ export const MONTHS = [
 ];
 
 export const REQUEST_TYPES = [
-  {
-    type: 'Bulky Items',
-    abbrev: 'BLK',
-    color: '#FF0000',
-  },
   {
     type: 'Dead Animal',
     abbrev: 'DAN',
     color: '#4FEFEF',
   },
-  {
-    type: 'E-Waste',
-    abbrev: 'EWT',
-    color: '#DDEC9F',
-  },
-  {
-    type: 'Graffiti',
-    abbrev: 'GFT',
-    color: '#2368D0',
-  },
   {
     type: 'Homeless Encampment',
     abbrev: 'HLE',
     color: '#ECB800',
   },
-  {
-    type: 'Illegal Dumping',
-    abbrev: 'ILD',
-    color: '#6A8011',
-  },
-  {
-    type: 'Metal/Household Appliances',
-    abbrev: 'MHA',
-    color: '#B8D0FF',
-  },
   {
     type: 'Single Streetlight',
     abbrev: 'SSL',
@@ -74,6 +49,31 @@ export const REQUEST_TYPES = [
     abbrev: 'FBK',
     color: '#FFE6B7',
   },
+  {
+    type: 'Bulky Items',
+    abbrev: 'BLK',
+    color: '#FF0000',
+  },
+  {
+    type: 'E-Waste',
+    abbrev: 'EWT',
+    color: '#DDEC9F',
+  },
+  {
+    type: 'Metal/Household Appliances',
+    abbrev: 'MHA',
+    color: '#B8D0FF',
+  },
+  {
+    type: 'Graffiti',
+    abbrev: 'GFT',
+    color: '#2368D0',
+  },
+  {
+    type: 'Illegal Dumping',
+    abbrev: 'ILD',
+    color: '#6A8011',
+  },
   {
     type: 'Other',
     abbrev: 'OTH',

From d0e456685f435c01585fa109d1cad7a79be0b10e Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 23:31:43 -0800
Subject: [PATCH 04/12] Added style prop to Checkbox.

---
 src/components/common/Checkbox.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index 92785a8f0..8a20b676f 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -10,6 +10,7 @@ const Checkbox = ({
   name,
   value,
   checked,
+  style,
   /*
    *  Props below correspond with Bulma modifiers.
    *  wikiki.github.io/form/checkradio/
@@ -48,7 +49,7 @@ const Checkbox = ({
         checked={checked}
         disabled={disabled}
       />
-      <label htmlFor={checkboxId}>
+      <label htmlFor={checkboxId} style={style}>
         {label}
       </label>
     </>
@@ -65,6 +66,7 @@ Checkbox.propTypes = {
   name: PropTypes.string,
   value: PropTypes.string,
   checked: PropTypes.bool,
+  style: PropTypes.shape({}),
   rightToLeft: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.oneOf(['small', '', 'medium', 'large']),
@@ -73,7 +75,6 @@ Checkbox.propTypes = {
   hasNoBorder: PropTypes.bool,
   hasBackgroundColor: PropTypes.bool,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
@@ -83,6 +84,7 @@ Checkbox.defaultProps = {
   name: null,
   value: undefined,
   checked: false,
+  style: undefined,
   rightToLeft: false,
   color: 'primary',
   size: '',
@@ -91,5 +93,4 @@ Checkbox.defaultProps = {
   hasNoBorder: false,
   hasBackgroundColor: false,
   disabled: false,
-  checked: false,
 };

From 37d4085267db5988a268cc1cc40c5ce41d5f6af3 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 23:32:12 -0800
Subject: [PATCH 05/12] Dropdown icon color change.

---
 src/components/common/Dropdown.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/common/Dropdown.jsx b/src/components/common/Dropdown.jsx
index 42028dfce..6ff448565 100644
--- a/src/components/common/Dropdown.jsx
+++ b/src/components/common/Dropdown.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'proptypes';
 import classNames from 'classnames';
 import DropdownItem from './DropdownItem';
 import Icon from './Icon';
+import COLORS from '../../styles/COLORS';
 
 const Dropdown = ({
   id,
@@ -114,6 +115,7 @@ const Dropdown = ({
             <Icon
               id="dropdown-icon"
               icon={isOpen ? 'angle-up' : 'angle-down'}
+              style={{ color: COLORS.FORMS.STROKE }}
             />
           </span>
         </button>

From 7152189c9c9353008636ca7d3742d631fd06ca84 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 23:32:42 -0800
Subject: [PATCH 06/12] DateSelector style changes.

---
 src/components/main/menu/DateSelector/DateSelector.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/main/menu/DateSelector/DateSelector.jsx b/src/components/main/menu/DateSelector/DateSelector.jsx
index cdce09efe..9b7524f39 100644
--- a/src/components/main/menu/DateSelector/DateSelector.jsx
+++ b/src/components/main/menu/DateSelector/DateSelector.jsx
@@ -88,12 +88,12 @@ const DateSelector = ({
       }}
     >
       <div className="date-selector-title">
-        <span className="has-text-weight-bold is-size-5">
+        <span className="has-text-weight-bold is-size-6">
           Date Range Selection
         </span>
       </div>
       <div className="date-selector-dates" style={{ padding: '15px 0 10px' }}>
-        <span className="has-text-weight-normal is-size-6">
+        <span className="has-text-weight-normal">
           {`Start ${startDate || placeHolder} To ${endDate || placeHolder}`}
         </span>
       </div>
@@ -103,6 +103,7 @@ const DateSelector = ({
           list={dateRangeOptions}
           title="Select Date Range"
           width="349px"
+          style={{ color: COLORS.FONTS }}
           onClick={(dateOption) => {
             if (dateOption !== 'CUSTOM_DATE_RANGE') {
               const { newStartDate, newEndDate } = getDates(dateOption);

From bdd39743b5e10f9eefeb3e04200df34c9d8f6519 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Mon, 17 Feb 2020 23:33:13 -0800
Subject: [PATCH 07/12] RequestTypeSelector component mocked up.

---
 .../main/menu/RequestTypeSelector.jsx         | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 src/components/main/menu/RequestTypeSelector.jsx

diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx
new file mode 100644
index 000000000..4675e05fa
--- /dev/null
+++ b/src/components/main/menu/RequestTypeSelector.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import Checkbox from '../../common/Checkbox';
+import Icon from '../../common/Icon';
+
+import { REQUEST_TYPES } from '../../common/CONSTANTS';
+import COLORS from '../../../styles/COLORS';
+
+const typeContainerStyle = {
+  padding: '2px 0 2px 0',
+  fontSize: '14px',
+};
+
+const checkboxStyle = {
+  display: 'inline-block',
+  paddingRight: '3px',
+  paddingLeft: '3px',
+};
+
+const RequestItem = ({
+  type,
+  abbrev,
+  color,
+}) => (
+  <div
+    id={`request-type-${type}`}
+    value={abbrev}
+    style={typeContainerStyle}
+  >
+    <span style={checkboxStyle}>
+      <Checkbox
+        id={`request-checkbox-${type}`}
+        value={abbrev}
+        size="small"
+        style={{ paddingLeft: '10px' }}
+      />
+      <Icon
+        id={`request-icon-${type}`}
+        icon="circle"
+        size="small"
+        style={{ color }}
+      />
+    </span>
+    <span>
+      {`${type} [${abbrev}]`}
+    </span>
+
+  </div>
+);
+
+
+const RequestTypeSelector = () => {
+  const midIndex = ((list) => {
+    if (list.length / 2 === 0) {
+      return (list.length / 2);
+    }
+    return Math.floor(list.length / 2);
+  })(REQUEST_TYPES);
+
+  const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
+  const rightColumnItems = REQUEST_TYPES.slice(midIndex);
+
+  const renderRequestItems = (items) => items.map((item) => (
+    <RequestItem
+      key={item.type}
+      type={item.type}
+      abbrev={item.abbrev}
+      color={item.color}
+    />
+  ));
+
+  return (
+    <div id="type-selector-container" style={{ color: COLORS.FONTS }}>
+      {/* ---------- Title ---------- */}
+      <div
+        className="type-selector-title"
+        style={{ paddingBottom: '15px', paddingTop: '15px' }}
+      >
+        <span
+          className="has-text-weight-bold is-size-6"
+          style={{ paddingRight: '10px' }}
+        >
+          Request Type Selection
+        </span>
+        <Icon
+          id="type-selector-info-icon"
+          icon="info-circle"
+          size="small"
+        />
+      </div>
+      <div className="columns is-0" style={{ width: '475px' }}>
+        <div className="column" style={{ paddingRight: '8px' }}>
+          {/* ---------- Select/Deselect All ---------- */}
+          <div
+            id="request-type-all"
+            value="all"
+            style={typeContainerStyle}
+          >
+            <span
+              style={checkboxStyle}
+            >
+              <Checkbox
+                id="request-checkbox-all"
+                value="all"
+                size="small"
+                style={{ paddingLeft: '10px' }}
+              />
+            </span>
+            <span className="has-text-weight-medium">
+              Select/Deselect All
+            </span>
+          </div>
+          { renderRequestItems(leftColumnItems) }
+        </div>
+        <div className="column" style={{ paddingLeft: '8px' }}>
+          { renderRequestItems(rightColumnItems) }
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RequestTypeSelector;
+
+RequestItem.propTypes = {
+  type: PropTypes.string,
+  abbrev: PropTypes.string,
+  color: PropTypes.string,
+};
+
+RequestItem.defaultProps = {
+  type: null,
+  abbrev: null,
+  color: null,
+};
+
+RequestTypeSelector.propTypes = {
+
+};
+
+RequestTypeSelector.defaultProps = {
+
+};

From 022796e1238d737b1f1601b6f75a9fd39ddd24dc Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 18 Feb 2020 00:33:45 -0800
Subject: [PATCH 08/12] Request type redux actions, reducers, select/deselect
 all states.

---
 src/redux/reducers/data.js | 55 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js
index 693d2975e..422219fde 100644
--- a/src/redux/reducers/data.js
+++ b/src/redux/reducers/data.js
@@ -5,6 +5,8 @@ const types = {
   UPDATE_END_DATE: 'UPDATE_END_DATE',
   UPDATE_REQUEST_TYPE: 'UPDATE_REQUEST_TYPE',
   UPDATE_NEIGHBORHOOD_COUNCIL: 'UPDATE_NEIGHBORHOOD_COUNCIL',
+  SELECT_ALL_REQUEST_TYPES: 'SELECT_ALL_REQUEST_TYPES',
+  DESELECT_ALL_REQUEST_TYPES: 'DESELECT_ALL_REQUEST_TYPES',
 };
 
 export const updateStartDate = (newStartDate) => ({
@@ -22,6 +24,14 @@ export const updateRequestType = (requestType) => ({
   payload: requestType,
 });
 
+export const selectAllRequestTypes = () => ({
+  type: types.SELECT_ALL_REQUEST_TYPES,
+});
+
+export const deselectAllRequestTypes = () => ({
+  type: types.DESELECT_ALL_REQUEST_TYPES,
+});
+
 export const updateNC = (council) => ({
   type: types.UPDATE_NEIGHBORHOOD_COUNCIL,
   payload: council,
@@ -32,6 +42,35 @@ const initialState = {
   endDate: null,
   requestType: 'Bulky Items',
   councils: [],
+  requestTypes: {
+    All: false,
+    'Dead Animal': false,
+    'Homeless Encampment': false,
+    'Single Streetlight': false,
+    'Multiple Streetlight': false,
+    'Bulky Items': false,
+    'E-Waste': false,
+    'Metal/Household Appliances': false,
+    'Illegal Dumping': false,
+    Graffiti: false,
+    Feedback: false,
+    Other: false,
+  },
+};
+
+const allRequestTypes = {
+  All: true,
+  'Dead Animal': true,
+  'Homeless Encampment': true,
+  'Single Streetlight': true,
+  'Multiple Streetlight': true,
+  'Bulky Items': true,
+  'E-Waste': true,
+  'Metal/Household Appliances': true,
+  'Illegal Dumping': true,
+  Graffiti: true,
+  Feedback: true,
+  Other: true,
 };
 
 export default (state = initialState, action) => {
@@ -51,7 +90,21 @@ export default (state = initialState, action) => {
     case types.UPDATE_REQUEST_TYPE:
       return {
         ...state,
-        requestType: action.payload,
+        requestTypes: {
+          ...state.requestTypes,
+          // Flips boolean value for selected request type
+          [action.payload]: !state.requestTypes[action.payload],
+        },
+      };
+    case types.SELECT_ALL_REQUEST_TYPES:
+      return {
+        ...state,
+        requestTypes: allRequestTypes,
+      };
+    case types.DESELECT_ALL_REQUEST_TYPES:
+      return {
+        ...state,
+        requestTypes: initialState.requestTypes
       };
     case types.UPDATE_NEIGHBORHOOD_COUNCIL:
       return {

From 8a871c0ead4e1a11ccfff562052c7dd43f31c92d Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 18 Feb 2020 00:36:49 -0800
Subject: [PATCH 09/12] Connected RequestTypeSelector to redux.

---
 .../main/menu/RequestTypeSelector.jsx         | 72 +++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx
index 4675e05fa..46b6cfde4 100644
--- a/src/components/main/menu/RequestTypeSelector.jsx
+++ b/src/components/main/menu/RequestTypeSelector.jsx
@@ -1,5 +1,12 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'proptypes';
+import {
+  updateRequestType,
+  selectAllRequestTypes,
+  deselectAllRequestTypes,
+} from '../../../redux/reducers/data';
+
 import Checkbox from '../../common/Checkbox';
 import Icon from '../../common/Icon';
 
@@ -20,19 +27,25 @@ const checkboxStyle = {
 const RequestItem = ({
   type,
   abbrev,
+  selected,
   color,
+  handleClick,
 }) => (
   <div
     id={`request-type-${type}`}
-    value={abbrev}
+    value={type}
     style={typeContainerStyle}
   >
-    <span style={checkboxStyle}>
+    <span
+      style={checkboxStyle}
+    >
       <Checkbox
         id={`request-checkbox-${type}`}
-        value={abbrev}
+        value={type}
         size="small"
         style={{ paddingLeft: '10px' }}
+        checked={selected}
+        handleClick={handleClick}
       />
       <Icon
         id={`request-icon-${type}`}
@@ -44,12 +57,15 @@ const RequestItem = ({
     <span>
       {`${type} [${abbrev}]`}
     </span>
-
   </div>
 );
 
-
-const RequestTypeSelector = () => {
+const RequestTypeSelector = ({
+  requestTypes,
+  selectType,
+  selectAll,
+  deselectAll,
+}) => {
   const midIndex = ((list) => {
     if (list.length / 2 === 0) {
       return (list.length / 2);
@@ -60,11 +76,18 @@ const RequestTypeSelector = () => {
   const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
   const rightColumnItems = REQUEST_TYPES.slice(midIndex);
 
+  const handleItemClick = (e) => {
+    const type = e.target.value;
+    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}
     />
   ));
@@ -96,14 +119,14 @@ const RequestTypeSelector = () => {
             value="all"
             style={typeContainerStyle}
           >
-            <span
-              style={checkboxStyle}
-            >
+            <span style={checkboxStyle}>
               <Checkbox
                 id="request-checkbox-all"
                 value="all"
                 size="small"
                 style={{ paddingLeft: '10px' }}
+                handleClick={requestTypes.All ? deselectAll : selectAll}
+                checked={requestTypes.All}
               />
             </span>
             <span className="has-text-weight-medium">
@@ -120,24 +143,49 @@ const RequestTypeSelector = () => {
   );
 };
 
-export default RequestTypeSelector;
+const mapStateToProps = (state) => ({
+  requestTypes: state.data.requestTypes,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  selectType: (type) => dispatch(updateRequestType(type)),
+  selectAll: () => dispatch(selectAllRequestTypes()),
+  deselectAll: () => dispatch(deselectAllRequestTypes()),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(RequestTypeSelector);
 
 RequestItem.propTypes = {
   type: PropTypes.string,
   abbrev: PropTypes.string,
   color: PropTypes.string,
+  selected: PropTypes.bool,
+  handleClick: PropTypes.func,
 };
 
 RequestItem.defaultProps = {
   type: null,
   abbrev: null,
   color: null,
+  selected: false,
+  handleClick: () => null,
 };
 
 RequestTypeSelector.propTypes = {
-
+  requestTypes: PropTypes.shape({
+    All: PropTypes.bool,
+  }),
+  selectType: PropTypes.func,
+  selectAll: PropTypes.func,
+  deselectAll: PropTypes.func,
 };
 
 RequestTypeSelector.defaultProps = {
-
+  requestTypes: null,
+  selectType: () => null,
+  selectAll: () => null,
+  deselectAll: () => null,
 };

From af94d3cf450f21f1114d5f327b518d914842381e Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 18 Feb 2020 00:38:19 -0800
Subject: [PATCH 10/12] Removed unused requestType field from initialState.

---
 src/redux/reducers/data.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js
index 422219fde..83a69cf4a 100644
--- a/src/redux/reducers/data.js
+++ b/src/redux/reducers/data.js
@@ -40,7 +40,6 @@ export const updateNC = (council) => ({
 const initialState = {
   startDate: null,
   endDate: null,
-  requestType: 'Bulky Items',
   councils: [],
   requestTypes: {
     All: false,

From c10a4098429cfa12a7f4d56bfc077b22c8cc3c1f Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 18 Feb 2020 00:39:08 -0800
Subject: [PATCH 11/12] Added DateSelector and RequestTypeSelector to Menu.

---
 src/components/main/menu/Menu.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx
index 196a5c8c0..49c752134 100644
--- a/src/components/main/menu/Menu.jsx
+++ b/src/components/main/menu/Menu.jsx
@@ -5,7 +5,9 @@ import React, { useState } from 'react';
 import { slide as Sidebar } from 'react-burger-menu';
 
 import Button from '../../common/Button';
+import DateSelector from './DateSelector/DateSelector';
 import NCSelector from './NCSelector';
+import RequestTypeSelector from './RequestTypeSelector';
 
 // const buildDataUrl = () => {
 //   return `https://data.lacity.org/resource/${dataResources[year]}.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+${startMonth}+and+${endMonth}+and+requesttype='${request}'`;
@@ -98,7 +100,9 @@ const Menu = () => {
                 </strong>
               </p>
             </div>
+            <DateSelector />
             <NCSelector />
+            <RequestTypeSelector />
           </div>
         </div>
       </Sidebar>

From fd42ea524da5f033db44b70ea64355d140dea748 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 18 Feb 2020 01:56:01 -0800
Subject: [PATCH 12/12] Moved column arrays outside of RequestTypeSelector
 function body.

---
 .../main/menu/RequestTypeSelector.jsx         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/main/menu/RequestTypeSelector.jsx b/src/components/main/menu/RequestTypeSelector.jsx
index 46b6cfde4..e0e221c67 100644
--- a/src/components/main/menu/RequestTypeSelector.jsx
+++ b/src/components/main/menu/RequestTypeSelector.jsx
@@ -24,6 +24,16 @@ const checkboxStyle = {
   paddingLeft: '3px',
 };
 
+const midIndex = ((list) => {
+  if (list.length / 2 === 0) {
+    return (list.length / 2);
+  }
+  return Math.floor(list.length / 2);
+})(REQUEST_TYPES);
+
+const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
+const rightColumnItems = REQUEST_TYPES.slice(midIndex);
+
 const RequestItem = ({
   type,
   abbrev,
@@ -66,16 +76,6 @@ const RequestTypeSelector = ({
   selectAll,
   deselectAll,
 }) => {
-  const midIndex = ((list) => {
-    if (list.length / 2 === 0) {
-      return (list.length / 2);
-    }
-    return Math.floor(list.length / 2);
-  })(REQUEST_TYPES);
-
-  const leftColumnItems = REQUEST_TYPES.slice(0, midIndex);
-  const rightColumnItems = REQUEST_TYPES.slice(midIndex);
-
   const handleItemClick = (e) => {
     const type = e.target.value;
     selectType(type);