Use hooks instead of connect

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? [email protected]'
@@ -21,5 +22,4 @@ const App = ({ activeLayer }) => {
    );
 };
 
-const mapStateToProps = (state) => state;
-export default connect(mapStateToProps)(App);
+export default App;

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 (
       <div className="bottom-bar">
          <div className="date-row">
@@ -116,6 +117,4 @@ const BottomBar = ({
    );
 };
 
-const mapStateToProps = (state) => state;
-const mapDispatchToProps = (dispatch) => ({ dispatch });
-export default connect(mapStateToProps, mapDispatchToProps)(BottomBar);
+export default BottomBar;

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;

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 (
       <div className="sidebar">
          <h1>Dylan's Mobility Service Map</h1>
@@ -104,6 +106,4 @@ const Sidebar = ({
    );
 };
 
-const mapStateToProps = (state) => filterState(state);
-const mapDispatchToProps = (dispatch) => ({ dispatch });
-export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);
+export default Sidebar;

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;