From 96dd719d3a455d62eb9186bc321696247b9fded9 Mon Sep 17 00:00:00 2001 From: Steven Roussey Date: Fri, 10 Jul 2020 12:50:36 -0700 Subject: [PATCH] Use hooks instead of connect --- src/App.js | 8 ++++---- src/components/BottomBar.js | 23 +++++++++++------------ src/components/Map.js | 18 ++++++++++++------ src/components/Sidebar.js | 26 +++++++++++++------------- src/util/filter.js | 13 +++---------- 5 files changed, 43 insertions(+), 45 deletions(-) diff --git a/src/App.js b/src/App.js index 9f84fe1..bc0bf70 100644 --- a/src/App.js +++ b/src/App.js @@ -4,9 +4,10 @@ import './App.css'; import BottomBar from './components/BottomBar'; import Sidebar from './components/Sidebar'; import Map from './components/Map'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; -const App = ({ activeLayer }) => { +const App = () => { + const activeLayer = useSelector(({activeLayer})=>activeLayer); useEffect(() => { console.log( 'Thanks for taking a look under the hood. Questions? dylan.babbs@gmail.com' @@ -21,5 +22,4 @@ const App = ({ activeLayer }) => { ); }; -const mapStateToProps = (state) => state; -export default connect(mapStateToProps)(App); +export default App; diff --git a/src/components/BottomBar.js b/src/components/BottomBar.js index 3d8144b..63da50b 100644 --- a/src/components/BottomBar.js +++ b/src/components/BottomBar.js @@ -3,7 +3,8 @@ import './BottomBar.css'; import * as d3 from 'd3'; import { Range } from 'rc-slider'; import './Slider.css'; -import { connect } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; +import filter from '../util/filter'; function addDays(date, days) { const result = new Date(date); @@ -65,14 +66,14 @@ const Histogram = ({ data, min, max }) => { ); }; -const BottomBar = ({ - data, - minDate: min, - maxDate: max, - initialMin, - initialMax, - dispatch, -}) => { +const BottomBar = () => { + const dispatch = useDispatch(); + const {initialMin,initialMax} = useSelector(({initialMin, initialMax})=>({initialMin, initialMax})); + const providers = useSelector(({providers})=>providers); + const min = useSelector(({minDate})=>minDate); + const max = useSelector(({maxDate})=>maxDate); + const allData = useSelector(({data})=>data); + const data = filter(allData, { providers, minDate: min, maxDate: max }) return (
@@ -116,6 +117,4 @@ const BottomBar = ({ ); }; -const mapStateToProps = (state) => state; -const mapDispatchToProps = (dispatch) => ({ dispatch }); -export default connect(mapStateToProps, mapDispatchToProps)(BottomBar); +export default BottomBar; diff --git a/src/components/Map.js b/src/components/Map.js index 56e8b1b..657f4ea 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -11,11 +11,19 @@ import hexLayer from './layers/hex'; import arcLayer from './layers/arcs'; import pathLayer from './layers/paths'; import tripLayer from './layers/trips'; -import filterState from '../util/filter'; -import { connect } from 'react-redux'; +import filter from '../util/filter'; +import { useSelector } from 'react-redux'; import interpolate from '../util/interpolate'; -const Map = ({ activeView, activeLayer, data, zoom, providers }) => { +const Map = () => { + const activeView = useSelector(({activeView})=>activeView); + const activeLayer = useSelector(({activeLayer})=>activeLayer); + const zoom = useSelector(({zoom})=>zoom); + const providers = useSelector(({providers})=>providers); + const minDate = useSelector(({minDate})=>minDate); + const maxDate = useSelector(({maxDate})=>maxDate); + const allData = useSelector(({data})=>data); + const data = filter(allData, { providers, minDate, maxDate }) const [time, setTime] = useState(0); const [viewStates, setViewStates] = useState(initialViewStates); useEffect(() => { @@ -100,6 +108,4 @@ const Map = ({ activeView, activeLayer, data, zoom, providers }) => { ); }; -const mapStateToProps = (state) => filterState(state); -const mapDispatchToProps = (dispatch) => ({ dispatch }); -export default connect(mapStateToProps, mapDispatchToProps)(Map); +export default Map; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 8edcefa..77f7aa0 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -2,8 +2,8 @@ import React from 'react'; import './Sidebar.css'; import Selector from './Selector'; import ProviderList from './ProviderList'; -import { connect } from 'react-redux'; -import filterState from '../util/filter'; +import { useSelector, useDispatch } from 'react-redux'; +import filter from '../util/filter'; const Section = ({ children }) => { return ( @@ -18,14 +18,16 @@ const Section = ({ children }) => { ); }; -const Sidebar = ({ - data, - dispatch, - activeMetric, - providers, - activeLayer, - activeView, -}) => { +const Sidebar = () => { + const dispatch = useDispatch(); + const activeView = useSelector(({activeView})=>activeView); + const activeMetric = useSelector(({activeMetric})=>activeMetric); + const activeLayer = useSelector(({activeLayer})=>activeLayer); + const providers = useSelector(({providers})=>providers); + const minDate = useSelector(({minDate})=>minDate); + const maxDate = useSelector(({maxDate})=>maxDate); + const allData = useSelector(({data})=>data); + const data = filter(allData, { providers, minDate, maxDate }) return (

Dylan's Mobility Service Map

@@ -104,6 +106,4 @@ const Sidebar = ({ ); }; -const mapStateToProps = (state) => filterState(state); -const mapDispatchToProps = (dispatch) => ({ dispatch }); -export default connect(mapStateToProps, mapDispatchToProps)(Sidebar); +export default Sidebar; diff --git a/src/util/filter.js b/src/util/filter.js index 3288bb7..f66c0ab 100644 --- a/src/util/filter.js +++ b/src/util/filter.js @@ -1,4 +1,5 @@ -function filter(data, { providers, minDate, maxDate }) { +function filterData(data, opts) { + const { providers, minDate, maxDate } = opts; const output = []; for (let i = 0; i < providers.length; i++) { if (providers[i].active) { @@ -12,12 +13,4 @@ function filter(data, { providers, minDate, maxDate }) { .filter((x) => new Date(x.properties.startDate) <= maxDate); } -function filterState(state) { - const { providers, minDate, maxDate, data } = state; - return { - ...state, - data: filter(data, { providers, minDate, maxDate }), - }; -} - -export default filterState; +export default filterData;