From 7d34fbe3601e5d34e490aa5593f67f80cca39aea Mon Sep 17 00:00:00 2001 From: Joshua Date: Sun, 9 Feb 2020 15:57:23 -0800 Subject: [PATCH 01/13] Cleaned up menu for readability. Added Content section --- src/components/main/menu/Menu.jsx | 58 +++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 18 deletions(-) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 78bdabdd9..7d7d1e7e0 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -1,6 +1,8 @@ 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,11 +26,10 @@ const Menu = () => { return (
{ styles={{ bmMenu: { background: 'white', - boxShadow: '0 4px 5px grey', + boxShadow: '0px 4px 5px rgba(108, 108, 108, 0.3)', }, }} > -
From d1175c55b9ede905958a671e2d5ae62f031816ad Mon Sep 17 00:00:00 2001 From: Joshua Date: Sun, 9 Feb 2020 15:57:46 -0800 Subject: [PATCH 02/13] Created NC Selector Layout and search --- src/components/main/menu/NCSelector.jsx | 102 ++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 src/components/main/menu/NCSelector.jsx diff --git a/src/components/main/menu/NCSelector.jsx b/src/components/main/menu/NCSelector.jsx new file mode 100644 index 000000000..1bb2aea94 --- /dev/null +++ b/src/components/main/menu/NCSelector.jsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import { COUNCILS } from '../../common/CONSTANTS'; + +const NCSelector = () => { + const [searchValue, setSearchValue] = useState(''); + const [filteredCouncilList, setFilteredCouncilList] = useState(COUNCILS); + + 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); + }; + + return ( +
+
+

+ + Neighborhood Council (NC) Selection + +

+
+ +
+
+
+
+ + + + +
+
+
+ +
+
+
+
+

+ SELECT ALL +

+
+
+
+
+ +
+
+
+ + {filteredCouncilList.map((council) => ( +
+
+
+

+ {council} +

+
+
+
+
+ +
+
+
+ ))} +
+
+
+ ); +}; + +export default NCSelector; From ed536c55e43e4b63795d1231bb32cd1ca0a4f0ae Mon Sep 17 00:00:00 2001 From: Joshua Date: Tue, 11 Feb 2020 20:25:46 -0800 Subject: [PATCH 03/13] Add proptypes for checked prop --- src/components/common/Checkbox.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx index 97cfadbe8..25677879b 100644 --- a/src/components/common/Checkbox.jsx +++ b/src/components/common/Checkbox.jsx @@ -72,6 +72,7 @@ Checkbox.propTypes = { hasNoBorder: PropTypes.bool, hasBackgroundColor: PropTypes.bool, disabled: PropTypes.bool, + checked: PropTypes.bool, }; Checkbox.defaultProps = { @@ -88,4 +89,5 @@ Checkbox.defaultProps = { hasNoBorder: false, hasBackgroundColor: false, disabled: false, + checked: false, }; From 57bd94c8b033fd72f1964bb5d088fd8c3165400b Mon Sep 17 00:00:00 2001 From: Joshua Date: Wed, 12 Feb 2020 11:45:09 -0800 Subject: [PATCH 04/13] Updated babel --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 5aa952d56..badd20857 100644 --- a/package.json +++ b/package.json @@ -39,10 +39,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", From a1a204c1d64dbae044386c2d4746a92892980e34 Mon Sep 17 00:00:00 2001 From: Joshua Date: Wed, 12 Feb 2020 11:45:25 -0800 Subject: [PATCH 05/13] testing checkbox functionality --- src/redux/reducers/data.js | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js index 5d3838f27..94e3c6616 100644 --- a/src/redux/reducers/data.js +++ b/src/redux/reducers/data.js @@ -1,11 +1,13 @@ // import axios from 'axios'; +import { COUNCILS } from '../../components/common/CONSTANTS'; + const types = { UPDATE_YEAR: 'UPDATE_YEAR', UPDATE_START_MONTH: 'UPDATE_START_MONTH', UPDATE_END_MONTH: 'UPDATE_END_MONTH', UPDATE_REQUEST_TYPE: 'UPDATE_REQUEST_TYPE', - UPDATE_NEIGHBORHOOD_COUNCIL: 'UPDATE_NEIGHBORHOOD_COUNCIL', + TOGGLE_NEIGHBORHOOD_COUNCIL: 'TOGGLE_NEIGHBORHOOD_COUNCIL', }; export const updateYear = (year) => ({ @@ -28,17 +30,22 @@ export const updateRequestType = (requestType) => ({ payload: requestType, }); -export const updateNeighborhoodCouncil = (council) => ({ - type: types.UPDATE_NEIGHBORHOOD_COUNCIL, +export const toggleNeighborhoodCouncil = (council) => ({ + type: types.TOGGLE_NEIGHBORHOOD_COUNCIL, payload: council, }); +const makeCouncilState = () => COUNCILS.reduce((acc, council) => { + acc[council] = false; + return acc; +}, { all: false }); + const initialState = { year: '2015', startMonth: '1', endMonth: '12', requestType: 'Bulky Items', - council: null, + councils: makeCouncilState(), }; export default (state = initialState, action) => { @@ -63,11 +70,18 @@ export default (state = initialState, action) => { ...state, requestType: action.payload, }; - case types.UPDATE_NEIGHBORHOOD_COUNCIL: + case types.TOGGLE_NEIGHBORHOOD_COUNCIL: { + const { payload } = action; + + const newCouncilsState = { ...state.councils }; + + newCouncilsState[payload] = !newCouncilsState[payload]; + return { ...state, - council: action.payload, + councils: newCouncilsState, }; + } default: return state; } From 2081e00419389b23d51e7e92d9fb65f111cc75ac Mon Sep 17 00:00:00 2001 From: Joshua Date: Wed, 12 Feb 2020 11:45:36 -0800 Subject: [PATCH 06/13] Checkboxes point to redux --- src/components/main/menu/NCSelector.jsx | 38 +++++++++++++++++++------ 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/main/menu/NCSelector.jsx b/src/components/main/menu/NCSelector.jsx index 1bb2aea94..98cda8613 100644 --- a/src/components/main/menu/NCSelector.jsx +++ b/src/components/main/menu/NCSelector.jsx @@ -1,7 +1,15 @@ import React, { useState } from 'react'; +import { connect } from 'react-redux'; + +import { toggleNeighborhoodCouncil } from '../../../redux/reducers/data'; + import { COUNCILS } from '../../common/CONSTANTS'; +import Checkbox from '../../common/Checkbox'; -const NCSelector = () => { +const NCSelector = ({ + councils, + toggleCouncil, +}) => { const [searchValue, setSearchValue] = useState(''); const [filteredCouncilList, setFilteredCouncilList] = useState(COUNCILS); @@ -61,16 +69,18 @@ const NCSelector = () => {
-

+

SELECT ALL

- + toggleCouncil('all')} + checked={councils?.all ?? false} + />
@@ -86,9 +96,11 @@ const NCSelector = () => {
- + toggleCouncil(council)} + checked={councils?.[council] ?? false} + />
@@ -99,4 +111,12 @@ const NCSelector = () => { ); }; -export default NCSelector; +const mapStateToProps = (state) => ({ + councils: state.data.councils, +}); + +const mapDispatchToProps = (dispatch) => ({ + toggleCouncil: (council) => dispatch(toggleNeighborhoodCouncil(council)), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(NCSelector); From 7ba271bbdda716b8ba3723aa869f2b511e088a85 Mon Sep 17 00:00:00 2001 From: Joshua Date: Wed, 12 Feb 2020 11:46:10 -0800 Subject: [PATCH 07/13] tabs use anchor tags --- src/components/main/menu/Menu.jsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index e49c3842f..7d7d1e7e0 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -61,12 +61,9 @@ const Menu = () => { className={handleActiveTab(tab)} style={{ width: '254px' }} > - + ))} From 7551cb78e9fdb6bd2b85a7c7e3e351aed294cf23 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Sat, 15 Feb 2020 16:28:44 -0800 Subject: [PATCH 08/13] Component handles select logic instead of redux --- src/components/main/menu/NCSelector.jsx | 84 +++++++++++++++++++------ 1 file changed, 66 insertions(+), 18 deletions(-) diff --git a/src/components/main/menu/NCSelector.jsx b/src/components/main/menu/NCSelector.jsx index 98cda8613..4fa7844e6 100644 --- a/src/components/main/menu/NCSelector.jsx +++ b/src/components/main/menu/NCSelector.jsx @@ -1,17 +1,31 @@ import React, { useState } from 'react'; import { connect } from 'react-redux'; +import propTypes from 'proptypes'; -import { toggleNeighborhoodCouncil } from '../../../redux/reducers/data'; +import { updateNC } from '../../../redux/reducers/data'; import { COUNCILS } from '../../common/CONSTANTS'; import Checkbox from '../../common/Checkbox'; const NCSelector = ({ - councils, - toggleCouncil, + 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; @@ -21,6 +35,35 @@ const NCSelector = ({ 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 (
@@ -59,17 +102,18 @@ const NCSelector = ({ className="nc-list" style={{ height: '231px', - overflow: 'scroll', + overflowX: 'hidden', + msOverflowY: 'scroll', padding: '10px 23px 10px 10px', border: '1px solid #999999', borderRadius: '3px', boxSizing: 'border-box', }} > -
+
-

+

SELECT ALL

@@ -78,18 +122,18 @@ const NCSelector = ({
toggleCouncil('all')} - checked={councils?.all ?? false} + handleClick={() => handleSelectCouncil('all')} + checked={selectedCouncilList?.all ?? false} />
{filteredCouncilList.map((council) => ( -
+
-

+

{council}

@@ -98,8 +142,8 @@ const NCSelector = ({
toggleCouncil(council)} - checked={councils?.[council] ?? false} + handleClick={() => handleSelectCouncil(council)} + checked={selectedCouncilList?.[council] ?? false} />
@@ -111,12 +155,16 @@ const NCSelector = ({ ); }; -const mapStateToProps = (state) => ({ - councils: state.data.councils, -}); - const mapDispatchToProps = (dispatch) => ({ - toggleCouncil: (council) => dispatch(toggleNeighborhoodCouncil(council)), + updateNCList: (council) => dispatch(updateNC(council)), }); -export default connect(mapStateToProps, mapDispatchToProps)(NCSelector); +NCSelector.propTypes = { + updateNCList: propTypes.func, +}; + +NCSelector.defaultProps = { + updateNCList: () => null, +}; + +export default connect(null, mapDispatchToProps)(NCSelector); From 0cfbf6a16874c929587d06a1d4affe9041e78de5 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Sat, 15 Feb 2020 16:29:16 -0800 Subject: [PATCH 09/13] Removed select logic for NC. Component now handles --- src/redux/reducers/data.js | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js index 94e3c6616..d22cf28b4 100644 --- a/src/redux/reducers/data.js +++ b/src/redux/reducers/data.js @@ -1,13 +1,11 @@ // import axios from 'axios'; -import { COUNCILS } from '../../components/common/CONSTANTS'; - const types = { UPDATE_YEAR: 'UPDATE_YEAR', UPDATE_START_MONTH: 'UPDATE_START_MONTH', UPDATE_END_MONTH: 'UPDATE_END_MONTH', UPDATE_REQUEST_TYPE: 'UPDATE_REQUEST_TYPE', - TOGGLE_NEIGHBORHOOD_COUNCIL: 'TOGGLE_NEIGHBORHOOD_COUNCIL', + UPDATE_NEIGHBORHOOD_COUNCIL: 'UPDATE_NEIGHBORHOOD_COUNCIL', }; export const updateYear = (year) => ({ @@ -30,22 +28,17 @@ export const updateRequestType = (requestType) => ({ payload: requestType, }); -export const toggleNeighborhoodCouncil = (council) => ({ - type: types.TOGGLE_NEIGHBORHOOD_COUNCIL, +export const updateNC = (council) => ({ + type: types.UPDATE_NEIGHBORHOOD_COUNCIL, payload: council, }); -const makeCouncilState = () => COUNCILS.reduce((acc, council) => { - acc[council] = false; - return acc; -}, { all: false }); - const initialState = { year: '2015', startMonth: '1', endMonth: '12', requestType: 'Bulky Items', - councils: makeCouncilState(), + councils: [], }; export default (state = initialState, action) => { @@ -70,18 +63,11 @@ export default (state = initialState, action) => { ...state, requestType: action.payload, }; - case types.TOGGLE_NEIGHBORHOOD_COUNCIL: { - const { payload } = action; - - const newCouncilsState = { ...state.councils }; - - newCouncilsState[payload] = !newCouncilsState[payload]; - + case types.UPDATE_NEIGHBORHOOD_COUNCIL: return { ...state, - councils: newCouncilsState, + councils: action.payload, }; - } default: return state; } From a956ffd96ac875bf5272fd1664c445a4ba472cff Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Sat, 15 Feb 2020 16:40:10 -0800 Subject: [PATCH 10/13] Added button icon --- src/components/common/Button.jsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx index 995c6a4ee..70adfe440 100644 --- a/src/components/common/Button.jsx +++ b/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 && ( + + + + )} + + {label} + ); }; @@ -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, }; From ecd194eb00cabbc9928c5a718907d28766989aef Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Sat, 15 Feb 2020 16:40:18 -0800 Subject: [PATCH 11/13] Updated with button icon --- src/components/main/menu/Menu.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 7d7d1e7e0..523d961ff 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -72,7 +72,8 @@ const Menu = () => { {/* Open/Close Button */}
From 3c2d2518dbbefec3eb6515bec3b7ca75035efc87 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 10:27:11 -0800 Subject: [PATCH 13/13] Disabled jsx-a11y for now --- src/components/main/menu/Menu.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 523d961ff..196a5c8c0 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -1,3 +1,6 @@ +/* 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';