From ce741ca4d01b35a09b133f9f8bb876c291f26070 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:34:02 -0800 Subject: [PATCH 01/56] Added redux saga --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 1e6326f8f..122427422 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "redux": "^4.0.4", "redux-devtools-extension": "^2.13.8", "redux-logger": "^3.0.6", + "redux-saga": "^1.1.3", + "regenerator-runtime": "^0.13.3", "webpack-merge": "^4.2.2" }, "scripts": { From d57a0ef4f6d29fa0b04f37f3857e211708f82c5d Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:34:08 -0800 Subject: [PATCH 02/56] Added redux saga --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 18041d949..3c1899e78 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ /* eslint-disable react/jsx-filename-extension */ +import 'regenerator-runtime/runtime'; import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; From 9e37d68cc54f4be8006e0e64126dcee16998d0c6 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:34:17 -0800 Subject: [PATCH 03/56] Added time stamp of last updated data --- src/components/main/footer/Footer.jsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx index 6726e0e14..460a9135f 100644 --- a/src/components/main/footer/Footer.jsx +++ b/src/components/main/footer/Footer.jsx @@ -1,4 +1,8 @@ import React from 'react'; +import { connect } from 'react-redux'; +import propTypes from 'proptypes'; +import moment from 'moment'; + import COLORS from '../../../styles/COLORS'; const footerTextStyle = { @@ -7,7 +11,9 @@ const footerTextStyle = { width: '100vw', }; -const Footer = () => ( +const Footer = ({ + lastUpdated, +}) => (
(

Data Updated Through: +   + {lastUpdated && moment(lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}

); -export default Footer; +const mapStateToProps = (state) => ({ + lastUpdated: state.data.lastUpdated, +}); + +Footer.propTypes = { + lastUpdated: propTypes.shape({}), +}; + +Footer.defaultProps = { + lastUpdated: undefined, +}; + +export default connect(mapStateToProps, null)(Footer); From 8b708fc35c25fef7f8cd788d3dad675db9e50317 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:34:40 -0800 Subject: [PATCH 04/56] Added redux saga. Added axios request for get data --- src/redux/reducers/data.js | 52 +++++++++++++++++++++++++++++++++----- src/redux/rootSaga.js | 47 ++++++++++++++++++++++++++++++++++ src/redux/store.js | 7 ++++- 3 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 src/redux/rootSaga.js diff --git a/src/redux/reducers/data.js b/src/redux/reducers/data.js index 693d2975e..f6f4419c7 100644 --- a/src/redux/reducers/data.js +++ b/src/redux/reducers/data.js @@ -1,10 +1,11 @@ -// import axios from 'axios'; - -const types = { +export const types = { UPDATE_START_DATE: 'UPDATE_START_DATE', UPDATE_END_DATE: 'UPDATE_END_DATE', UPDATE_REQUEST_TYPE: 'UPDATE_REQUEST_TYPE', UPDATE_NEIGHBORHOOD_COUNCIL: 'UPDATE_NEIGHBORHOOD_COUNCIL', + GET_DATA_REQUEST: 'GET_DATA_REQUEST', + GET_DATA_SUCCESS: 'GET_DATA_SUCCESS', + GET_DATA_FAILURE: 'GET_DATA_FAILURE', }; export const updateStartDate = (newStartDate) => ({ @@ -17,9 +18,9 @@ export const updateEndDate = (newEndDate) => ({ payload: newEndDate, }); -export const updateRequestType = (requestType) => ({ +export const updateRequestType = (requestTypes) => ({ type: types.UPDATE_REQUEST_TYPE, - payload: requestType, + payload: requestTypes, }); export const updateNC = (council) => ({ @@ -27,11 +28,29 @@ export const updateNC = (council) => ({ payload: council, }); +export const getDataRequest = () => ({ + type: types.GET_DATA_REQUEST, +}); + +export const getDataSuccess = (response) => ({ + type: types.GET_DATA_SUCCESS, + payload: response, +}); + +export const getDataFailure = (error) => ({ + type: types.GET_DATA_FAILURE, + payload: error, +}); + const initialState = { startDate: null, endDate: null, - requestType: 'Bulky Items', + requestTypes: {}, councils: [], + data: {}, + isLoading: false, + error: null, + lastUpdated: null, }; export default (state = initialState, action) => { @@ -51,13 +70,32 @@ export default (state = initialState, action) => { case types.UPDATE_REQUEST_TYPE: return { ...state, - requestType: action.payload, + requestTypes: action.payload, }; case types.UPDATE_NEIGHBORHOOD_COUNCIL: return { ...state, councils: action.payload, }; + case types.GET_DATA_REQUEST: + return { + ...state, + isLoading: true, + }; + case types.GET_DATA_SUCCESS: + return { + ...state, + data: action.payload, + error: null, + isLoading: false, + lastUpdated: new Date(), + }; + case types.GET_DATA_FAILURE: + return { + ...state, + error: action.payload, + isLoading: false, + }; default: return state; } diff --git a/src/redux/rootSaga.js b/src/redux/rootSaga.js new file mode 100644 index 000000000..6304d80fc --- /dev/null +++ b/src/redux/rootSaga.js @@ -0,0 +1,47 @@ +import axios from 'axios'; +import { + takeLatest, + call, + put, + select, +} from 'redux-saga/effects'; +import { + types, + getDataSuccess, + getDataFailure, +} from './reducers/data'; + +const getState = (state, slice) => state[slice]; + +// For socrata only +const dataResources = { + 2019: 'pvft-t768', + 2018: 'h65r-yf5i', + 2017: 'd4vt-q4t5', + 2016: 'ndkd-k878', + 2015: 'ms7h-a45h', +}; + +function* getData() { + const { + startDate, + endDate, + councils, + requestTypes, + } = yield select(getState, 'data'); + + console.log(startDate, endDate, councils, requestTypes); + + const dataReq = `https://data.lacity.org/resource/${dataResources['2018']}.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+${1}+and+${12}+and+requesttype='${'Bulky Items'}'`; + + try { + const response = yield call(axios, dataReq); + yield put(getDataSuccess(response)); + } catch (e) { + yield put(getDataFailure(e)); + } +} + +export default function* rootSaga() { + yield takeLatest(types.GET_DATA_REQUEST, getData); +} diff --git a/src/redux/store.js b/src/redux/store.js index 5383b535a..3a1dfa623 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -1,9 +1,12 @@ import { applyMiddleware, createStore } from 'redux'; +import createSagaMiddleware from 'redux-saga'; import logger from 'redux-logger'; import rootReducer from './rootReducer'; +import rootSaga from './rootSaga'; -const middlewares = []; +const sagaMiddleware = createSagaMiddleware(); +const middlewares = [sagaMiddleware]; if (process.env.NODE_ENV === 'development') { middlewares.push(logger); @@ -14,4 +17,6 @@ const store = createStore( applyMiddleware(...middlewares), ); +sagaMiddleware.run(rootSaga); + export default store; From d10fe1805dbec5ad62076ecfac2b2d3d84915679 Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:36:52 -0800 Subject: [PATCH 05/56] Added get data submit button --- src/components/main/menu/Menu.jsx | 47 +++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index 196a5c8c0..ae77cf093 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -3,15 +3,19 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React, { useState } from 'react'; import { slide as Sidebar } from 'react-burger-menu'; +import { connect } from 'react-redux'; +import propTypes from 'proptypes'; import Button from '../../common/Button'; import NCSelector from './NCSelector'; +import DateSelector from './DateSelector/DateSelector'; -// 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}'`; -// }; +import { getDataRequest } from '../../../redux/reducers/data'; -const Menu = () => { +const Menu = ({ + data, + getData, +}) => { const [isOpen, setIsOpen] = useState(true); const [activeTab, setActiveTab] = useState('Map'); const sidebarWidth = '509px'; @@ -26,6 +30,10 @@ const Menu = () => { setActiveTab(tab); }; + const handleSubmitButton = () => { + getData(); + }; + return (
{

+ +
+
@@ -106,6 +123,24 @@ const Menu = () => { ); }; -// const mapStateToProps = state => ({}); +const mapStateToProps = (state) => ({ + data: state.data, +}); + +const mapDispatchToProps = (dispatch) => ({ + getData: () => dispatch(getDataRequest()), +}); + +Menu.propTypes = { + getData: propTypes.func, + data: propTypes.shape({ + isLoading: propTypes.bool, + }), +}; + +Menu.defaultProps = { + getData: () => null, + data: undefined, +}; -export default Menu; +export default connect(mapStateToProps, mapDispatchToProps)(Menu); From cb966f5917d09a2d30a89aeebd68e8c299662f5c Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:52:30 -0800 Subject: [PATCH 06/56] added icon style. disabled jsx a11y --- src/components/common/Icon.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/common/Icon.jsx b/src/components/common/Icon.jsx index 4633d1bfd..f41ff4056 100644 --- a/src/components/common/Icon.jsx +++ b/src/components/common/Icon.jsx @@ -1,3 +1,5 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import PropTypes from 'proptypes'; import classNames from 'classnames'; @@ -12,6 +14,7 @@ const Icon = ({ */ size, iconSize, + iconStyle, className, fixedWidth, spin, @@ -44,7 +47,7 @@ const Icon = ({ className={containerClassName} style={style} > - + {label} ); @@ -86,6 +89,7 @@ Icon.propTypes = { pulse: PropTypes.bool, bordered: PropTypes.bool, style: PropTypes.shape({}), + iconStyle: PropTypes.shape({}), }; Icon.defaultProps = { @@ -101,4 +105,5 @@ Icon.defaultProps = { pulse: false, bordered: false, style: undefined, + iconStyle: undefined, }; From 05831ad4b0facd643888a3f9e6812d69a82b941b Mon Sep 17 00:00:00 2001 From: Joshua Marx Date: Mon, 17 Feb 2020 15:52:52 -0800 Subject: [PATCH 07/56] Updated chevron to caret for menu button --- src/components/main/menu/Menu.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx index ae77cf093..7cd4be255 100644 --- a/src/components/main/menu/Menu.jsx +++ b/src/components/main/menu/Menu.jsx @@ -83,7 +83,7 @@ const Menu = ({ {/* Open/Close Button */}