converted buttons container to context

Author: rydang

src/app/containers/ButtonsContainer.jsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import {
   importSnapshots, toggleMode,
@@ -36,9 +35,8 @@ function importHandler(dispatch) {
   fileUpload.click();
 }
 
-function ButtonsContainer(props) {
-  const { snapshots, mode: { paused, locked, persist }, dispatch } = props;
-  // const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useContext(StoreContext);
+function ButtonsContainer() {
+  const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useContext(StoreContext);
   return (
     <div className="buttons-container">
       <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>
@@ -60,16 +58,4 @@ function ButtonsContainer(props) {
   );
 }
 
-ButtonsContainer.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  snapshots: PropTypes.arrayOf(
-    PropTypes.object,
-  ).isRequired,
-  mode: PropTypes.shape({
-    paused: PropTypes.bool,
-    locked: PropTypes.bool,
-    persist: PropTypes.bool,
-  }).isRequired,
-};
-
 export default ButtonsContainer;

src/app/containers/MainContainer.jsx

@@ -70,31 +70,31 @@ function MainContainer() {
   // 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}
-        />
+    <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>
-    </div>
-    // </StoreContext.Provider>
+    </StoreContext.Provider>
   );
 }