155 nc selector

package.json

@@ -41,10 +41,10 @@
     "deploy": "gh-pages -d dist"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
+    "@babel/core": "^7.8.4",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",

src/components/common/Button.jsx

@@ -24,6 +24,8 @@ const Button = ({
   isStatic,
   disabled,
   style,
+  icon,
+  iconStyle,
 }) => {
   // Dynamically generates button className from props to comply with Bulma styling modifiers.
   const buttonClassName = classNames('button', {
@@ -53,7 +55,14 @@ const Button = ({
       className={buttonClassName}
       style={style}
     >
-      {label}
+      {icon && (
+        <span className="icon is-small" style={iconStyle}>
+          <i className={`fas fa-${icon}`} />
+        </span>
+      )}
+      <span>
+        {label}
+      </span>
     </button>
   );
 };
@@ -78,6 +87,8 @@ Button.propTypes = {
   isStatic: PropTypes.bool,
   disabled: PropTypes.bool,
   style: PropTypes.shape({}),
+  iconStyle: PropTypes.shape({}),
+  icon: PropTypes.string,
 };
 
 Button.defaultProps = {
@@ -97,4 +108,6 @@ Button.defaultProps = {
   isStatic: false,
   disabled: false,
   style: undefined,
+  iconStyle: undefined,
+  icon: undefined,
 };

src/components/common/Checkbox.jsx

@@ -73,6 +73,7 @@ Checkbox.propTypes = {
   hasNoBorder: PropTypes.bool,
   hasBackgroundColor: PropTypes.bool,
   disabled: PropTypes.bool,
+  checked: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
@@ -90,4 +91,5 @@ Checkbox.defaultProps = {
   hasNoBorder: false,
   hasBackgroundColor: false,
   disabled: false,
+  checked: false,
 };

src/components/main/menu/Menu.jsx

@@ -1,6 +1,11 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState } from 'react';
 import { slide as Sidebar } from 'react-burger-menu';
+
 import Button from '../../common/Button';
+import NCSelector from './NCSelector';
 
 // 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}'`;
@@ -24,40 +29,32 @@ const Menu = () => {
   return (
     <div>
       <Sidebar
-        htmlClassName="sidebar-html"
-        bodyClassName="sidebar-body"
+        noOverlay
+        disableAutoFocus
         pageWrapId="sidebar-wrapper"
         outerContainerId="body-container"
-        noOverlay
         isOpen={isOpen}
         width={sidebarWidth}
         customBurgerIcon={false}
         customCrossIcon={false}
         styles={{
           bmMenu: {
             background: 'white',
-            boxShadow: '0 4px 5px grey',
+            boxShadow: '0px 4px 5px rgba(108, 108, 108, 0.3)',
           },
         }}
       >
-        <div id="sidebar-wrapper">
-          <Button
-            id="menu-toggle-button"
-            label="<"
-            style={{
-              position: 'fixed',
-              left: sidebarWidth,
-              height: '60px',
-              width: '26px',
-              boxShadow: '0 1px 2px grey',
-            }}
-            handleClick={() => setIsOpen(!isOpen)}
-            color="light"
-          />
+        <div
+          id="sidebar-wrapper"
+          className="sidebar-content"
+        >
+
+          {/* Tabs */}
           <div
             className="tabs is-fullwidth is-toggle"
             style={{
               height: '40px',
+              margin: '0',
             }}
           >
             <ul>
@@ -67,16 +64,42 @@ const Menu = () => {
                   className={handleActiveTab(tab)}
                   style={{ width: '254px' }}
                 >
-                  <button
-                    type="button"
-                    onClick={() => { handleTabClick(tab); }}
-                  >
+                  <a onClick={() => { handleTabClick(tab); }}>
                     {tab}
-                  </button>
+                  </a>
                 </li>
               ))}
             </ul>
           </div>
+
+          {/* Open/Close Button */}
+          <Button
+            id="menu-toggle-button"
+            icon={!isOpen ? 'chevron-right' : 'chevron-left'}
+            iconStyle={{ margin: '0px' }}
+            style={{
+              position: 'fixed',
+              left: sidebarWidth,
+              height: '60px',
+              width: '26px',
+              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
+              borderRadius: '0',
+            }}
+            handleClick={() => setIsOpen(!isOpen)}
+            color="light"
+          />
+
+          {/* Content */}
+          <div className="sidebar-content" style={{ padding: '16px' }}>
+            <div className="sidebar-title">
+              <p className="subtitle">
+                <strong>
+                  Filters
+                </strong>
+              </p>
+            </div>
+            <NCSelector />
+          </div>
         </div>
       </Sidebar>
     </div>

src/components/main/menu/NCSelector.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import propTypes from 'proptypes';
+
+import { updateNC } from '../../../redux/reducers/data';
+
+import { COUNCILS } from '../../common/CONSTANTS';
+import Checkbox from '../../common/Checkbox';
+
+const NCSelector = ({
+  updateNCList,
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+  const [filteredCouncilList, setFilteredCouncilList] = useState(COUNCILS);
+  const [selectedCouncilList, setSelectedCouncilList] = useState(
+    COUNCILS.reduce((acc, council) => {
+      acc[council] = false;
+      return acc;
+    }, { all: false }),
+  );
+
+  const selectRowStyle = {
+    margin: '0 0 7px 0',
+  };
+
+  const selectRowTextStyle = {
+    width: '280px',
+  };
+
+  const handleSearch = (e) => {
+    const term = e.target.value;
+    const searchFilter = new RegExp(term, 'i');
+    const searchList = COUNCILS.filter((council) => searchFilter.test(council));
+    setFilteredCouncilList(searchList);
+    setSearchValue(e.target.value);
+  };
+
+  const handleSelectCouncil = (council) => {
+    const newSelectedCouncilList = { ...selectedCouncilList };
+
+    switch (council) {
+      case 'all': {
+        let value = true;
+
+        if (newSelectedCouncilList.all) {
+          newSelectedCouncilList.all = false;
+          value = false;
+        }
+
+        Object.keys(newSelectedCouncilList).forEach((c) => {
+          newSelectedCouncilList[c] = value;
+        });
+        break;
+      }
+      default:
+        newSelectedCouncilList.all = false;
+        newSelectedCouncilList[council] = !newSelectedCouncilList[council];
+        break;
+    }
+
+    const newNCList = Object.keys(newSelectedCouncilList).filter((c) => newSelectedCouncilList[c] && c !== 'all');
+
+    setSelectedCouncilList(newSelectedCouncilList);
+    updateNCList(newNCList);
+  };
+
+  return (
+    <div className="nc-selector" style={{ width: '349px' }}>
+      <div className="nc-title">
+        <p className="is-size-6" style={{ padding: '15px 0' }}>
+          <strong>
+            Neighborhood Council (NC) Selection
+          </strong>
+        </p>
+      </div>
+
+      <div className="nc-seach-list-wrapper">
+        <div className="nc-search">
+          <div className="field">
+            <div className="control has-icons-right">
+              <input
+                className="input"
+                type="text"
+                placeholder="Search"
+                style={{
+                  border: '1px solid #999999',
+                  borderRadius: '3px',
+                  boxSizing: 'border-box',
+
+                }}
+                value={searchValue}
+                onChange={handleSearch}
+              />
+              <span className="icon is-small is-right">
+                <i className="fas fa-search" />
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="nc-list"
+          style={{
+            height: '231px',
+            overflowX: 'hidden',
+            msOverflowY: 'scroll',
+            padding: '10px 23px 10px 10px',
+            border: '1px solid #999999',
+            borderRadius: '3px',
+            boxSizing: 'border-box',
+          }}
+        >
+          <div className="level" style={selectRowStyle}>
+            <div className="level-left">
+              <div className="level-item">
+                <p className="is-size-7" style={selectRowTextStyle}>
+                  SELECT ALL
+                </p>
+              </div>
+            </div>
+            <div className="level-right">
+              <div className="level-item">
+                <Checkbox
+                  id="nc-select-all"
+                  handleClick={() => handleSelectCouncil('all')}
+                  checked={selectedCouncilList?.all ?? false}
+                />
+              </div>
+            </div>
+          </div>
+
+          {filteredCouncilList.map((council) => (
+            <div key={council} className="level" style={selectRowStyle}>
+              <div className="level-left">
+                <div className="level-item">
+                  <p className="is-size-7" style={selectRowTextStyle}>
+                    {council}
+                  </p>
+                </div>
+              </div>
+              <div className="level-right">
+                <div className="level-item">
+                  <Checkbox
+                    id={`nc-select-${council}`}
+                    handleClick={() => handleSelectCouncil(council)}
+                    checked={selectedCouncilList?.[council] ?? false}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  updateNCList: (council) => dispatch(updateNC(council)),
+});
+
+NCSelector.propTypes = {
+  updateNCList: propTypes.func,
+};
+
+NCSelector.defaultProps = {
+  updateNCList: () => null,
+};
+
+export default connect(null, mapDispatchToProps)(NCSelector);

src/redux/reducers/data.js

@@ -22,7 +22,7 @@ export const updateRequestType = (requestType) => ({
   payload: requestType,
 });
 
-export const updateNeighborhoodCouncil = (council) => ({
+export const updateNC = (council) => ({
   type: types.UPDATE_NEIGHBORHOOD_COUNCIL,
   payload: council,
 });
@@ -31,7 +31,7 @@ const initialState = {
   startDate: null,
   endDate: null,
   requestType: 'Bulky Items',
-  council: null,
+  councils: [],
 };
 
 export default (state = initialState, action) => {
@@ -56,7 +56,7 @@ export default (state = initialState, action) => {
     case types.UPDATE_NEIGHBORHOOD_COUNCIL:
       return {
         ...state,
-        council: action.payload,
+        councils: action.payload,
       };
     default:
       return state;