removed prop drilling and used context

Author: rydang

src/app/components/App.jsx

@@ -1,6 +1,28 @@
-import React from 'react';
+import React, { useReducer } from 'react';
 import MainContainer from '../containers/MainContainer';
+import { StoreContext } from '../store';
+import mainReducer from '../reducers/mainReducer';
 
-const App = () => <MainContainer />;
+const initialState = {
+  port: null,
+  sliderIndex: 0,
+  viewIndex: -1,
+  intervalId: null,
+  playing: false,
+  snapshots: [],
+  mode: {
+    locked: false,
+    paused: false,
+    persist: false,
+  },
+};
+
+function App() {
+  return (
+    <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
+      <MainContainer />
+    </StoreContext.Provider>
+  );
+}
 
 export default App;

src/app/containers/ActionContainer.jsx

@@ -1,16 +1,14 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
-import PropTypes from 'prop-types';
 import Action from '../components/Action';
 
 import { emptySnapshots } from '../actions/actions';
+import { useStoreContext } from '../store';
 
-const ActionContainer = ({
-  snapshots,
-  sliderIndex,
-  viewIndex,
-  dispatch,
-}) => {
+function ActionContainer() {
+  const [{ snapshots, sliderIndex, viewIndex }, dispatch] = useStoreContext();
   let actionsArr = [];
+  // build actions array
   if (snapshots.length > 0) {
     actionsArr = snapshots.map((snapshot, index) => {
       const selected = index === viewIndex;
@@ -35,13 +33,6 @@ const ActionContainer = ({
       <div>{actionsArr}</div>
     </div>
   );
-};
-
-ActionContainer.propTypes = {
-  snapshots: PropTypes.arrayOf(PropTypes.object).isRequired,
-  dispatch: PropTypes.func.isRequired,
-  sliderIndex: PropTypes.number.isRequired,
-  viewIndex: PropTypes.number.isRequired,
-};
+}
 
 export default ActionContainer;

src/app/containers/ButtonsContainer.jsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 
 import {
   importSnapshots, toggleMode,
 } from '../actions/actions';
-import StoreContext from '../store';
+import { useStoreContext } from '../store';
 
 function exportHandler(snapshots) {
   // create invisible download anchor link
@@ -36,7 +36,7 @@ function importHandler(dispatch) {
 }
 
 function ButtonsContainer() {
-  const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useContext(StoreContext);
+  const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useStoreContext();
   return (
     <div className="buttons-container">
       <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>

src/app/containers/MainContainer.jsx

@@ -1,30 +1,16 @@
-import React, { useReducer, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 
-import mainReducer from '../reducers/mainReducer';
 import { addNewSnapshots, initialConnect, setPort } from '../actions/actions';
-import StoreContext from '../store';
+import { useStoreContext } from '../store';
 
-const initialState = {
-  port: null,
-  sliderIndex: 0,
-  viewIndex: -1,
-  intervalId: null,
-  playing: false,
-  snapshots: [],
-  mode: {
-    locked: false,
-    paused: false,
-    persist: false,
-  },
-};
 
 function MainContainer() {
-  const [mainState, dispatch] = useReducer(mainReducer, initialState);
+  const [mainState, dispatch] = useStoreContext();
 
   useEffect(() => {
     if (mainState.port) return;
@@ -63,38 +49,20 @@ function MainContainer() {
     snapshots,
     sliderIndex,
     viewIndex,
-    playing,
-    mode,
   } = mainState;
 
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = (viewIndex === -1) ? snapshots[sliderIndex] : snapshots[viewIndex];
   return (
-    <StoreContext.Provider value={[mainState, dispatch]}>
-      <div className="main-container">
-        <HeadContainer />
-        <div className="body-container">
-          <ActionContainer
-            snapshots={snapshots}
-            sliderIndex={sliderIndex}
-            viewIndex={viewIndex}
-            dispatch={dispatch}
-          />
-          {(snapshots.length) ? <StateContainer snapshot={snapshotView} /> : null}
-          <TravelContainer
-            snapshotsLength={snapshots.length}
-            sliderIndex={sliderIndex}
-            playing={playing}
-            dispatch={dispatch}
-          />
-          <ButtonsContainer
-            mode={mode}
-            dispatch={dispatch}
-            snapshots={mainState.snapshots}
-          />
-        </div>
+    <div className="main-container">
+      <HeadContainer />
+      <div className="body-container">
+        <ActionContainer />
+        {(snapshots.length) ? <StateContainer snapshot={snapshotView} /> : null}
+        <TravelContainer snapshotsLength={snapshots.length} />
+        <ButtonsContainer />
       </div>
-    </StoreContext.Provider>
+    </div>
   );
 }
 

src/app/containers/TravelContainer.jsx

@@ -2,17 +2,18 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MainSlider from '../components/MainSlider';
 import Dropdown from '../components/Dropdown';
-
 import {
   playForward, pause, startPlaying, moveForward, moveBackward,
 } from '../actions/actions';
+import { useStoreContext } from '../store';
 
 const speeds = [
   { value: 2000, label: '0.5x' },
   { value: 1000, label: '1.0x' },
   { value: 500, label: '2.0x' },
 ];
 
+// start slider movement
 function play(speed, playing, dispatch, snapshotsLength, sliderIndex) {
   if (playing) {
     dispatch(pause());
@@ -30,15 +31,9 @@ function play(speed, playing, dispatch, snapshotsLength, sliderIndex) {
   }
 }
 
-function TravelContainer(props) {
+function TravelContainer({ snapshotsLength }) {
   const [selectedSpeed, setSpeed] = useState(speeds[1]);
-
-  const {
-    snapshotsLength,
-    sliderIndex,
-    playing,
-    dispatch,
-  } = props;
+  const [{ sliderIndex, playing }, dispatch] = useStoreContext();
 
   return (
     <div className="travel-container">
@@ -63,13 +58,10 @@ function TravelContainer(props) {
       />
     </div>
   );
-};
+}
 
 
 TravelContainer.propTypes = {
-  dispatch: PropTypes.func.isRequired,
   snapshotsLength: PropTypes.number.isRequired,
-  sliderIndex: PropTypes.number.isRequired,
-  playing: PropTypes.bool.isRequired,
 };
 export default TravelContainer;

src/app/store.js

@@ -1,3 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
-export default React.createContext();
+export const StoreContext = React.createContext();
+
+export const useStoreContext = () => useContext(StoreContext);