started context and fixed bug in buttons not reflectin state

Author: rydang

src/app/actions/actions.js

@@ -1,18 +1,8 @@
 import * as types from '../constants/actionTypes';
 
-export const togglePause = () => ({
+export const toggleMode = mode => ({
   type: types.TOGGLE_MODE,
-  payload: 'setPause',
-});
-
-export const toggleLock = () => ({
-  type: types.TOGGLE_MODE,
-  payload: 'setLock',
-});
-
-export const togglePersist = () => ({
-  type: types.TOGGLE_MODE,
-  payload: 'setPersist',
+  payload: mode,
 });
 
 export const addNewSnapshots = snapshots => ({

src/app/containers/ButtonsContainer.jsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  importSnapshots, toggleLock, togglePause, togglePersist,
+  importSnapshots, toggleMode,
 } from '../actions/actions';
+import StoreContext from '../store';
 
 function exportHandler(snapshots) {
   // create invisible download anchor link
@@ -35,20 +36,18 @@ function importHandler(dispatch) {
   fileUpload.click();
 }
 
-const ButtonsContainer = ({
-  mode: { paused, locked, persist },
-  dispatch,
-  snapshots,
-}) =>
-  (
+function ButtonsContainer(props) {
+  const { snapshots, mode: { paused, locked, persist }, dispatch } = props;
+  // const [{ snapshots, mode: { paused, locked, persist } }, dispatch] = useContext(StoreContext);
+  return (
     <div className="buttons-container">
-      <button className="pause-button" type="button" onClick={() => dispatch(togglePause())}>
+      <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>
         {paused ? 'Resume' : 'Pause'}
       </button>
-      <button className="lock-button" type="button" onClick={() => dispatch(toggleLock())}>
+      <button className="lock-button" type="button" onClick={() => dispatch(toggleMode('locked'))}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
-      <button className="persist-button" type="button" onClick={() => dispatch(togglePersist())}>
+      <button className="persist-button" type="button" onClick={() => dispatch(toggleMode('persist'))}>
         {persist ? 'Unpersist' : 'Persist'}
       </button>
       <button className="export-button" type="button" onClick={() => exportHandler(snapshots)}>
@@ -59,6 +58,7 @@ const ButtonsContainer = ({
       </button>
     </div>
   );
+}
 
 ButtonsContainer.propTypes = {
   dispatch: PropTypes.func.isRequired,

src/app/containers/MainContainer.jsx

@@ -7,6 +7,7 @@ import ButtonsContainer from './ButtonsContainer';
 
 import mainReducer from '../reducers/mainReducer';
 import { addNewSnapshots, initialConnect, setPort } from '../actions/actions';
+import StoreContext from '../store';
 
 const initialState = {
   port: null,
@@ -59,7 +60,6 @@ function MainContainer() {
   });
 
   const {
-    port,
     snapshots,
     sliderIndex,
     viewIndex,
@@ -69,33 +69,33 @@ function MainContainer() {
 
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = (viewIndex === -1) ? snapshots[sliderIndex] : snapshots[viewIndex];
-
   return (
-    (port) ? (
-      <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>
+    // <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>no existing react-time-travel page</div>);
+    </div>
+    // </StoreContext.Provider>
+  );
 }
 
 export default MainContainer;

src/app/reducers/mainReducer.js

@@ -72,7 +72,20 @@ export default function mainReducer(state, action) {
     case types.TOGGLE_MODE: {
       mode[action.payload] = !mode[action.payload];
       const newMode = mode[action.payload];
-      port.postMessage({ action: action.payload, payload: newMode });
+      let actionText;
+      switch (action.payload) {
+        case 'paused':
+          actionText = 'setPause';
+          break;
+        case 'locked':
+          actionText = 'setLock';
+          break;
+        case 'persist':
+          actionText = 'setPersist';
+          break;
+        default:
+      }
+      port.postMessage({ action: actionText, payload: newMode });
       return { ...state, mode };
     }
     case types.PAUSE: {

src/app/store.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext();