Merge pull request #61 from oslabs-beta/rydang/hooks

hooks and context

Author: mylee1995

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll"
+    "test": "jest --verbose --coverage --watchAll",
+    "lint": "eslint --ext .js --ext .jsx src"
   },
   "keywords": [
     "react",

src/app/actions/actions.js

@@ -0,0 +1,72 @@
+import * as types from '../constants/actionTypes';
+
+export const toggleMode = mode => ({
+  type: types.TOGGLE_MODE,
+  payload: mode,
+});
+
+export const addNewSnapshots = snapshots => ({
+  type: types.NEW_SNAPSHOTS,
+  payload: {
+    snapshots,
+    sliderIndex: snapshots.length - 1,
+  },
+});
+
+export const initialConnect = (snapshots, mode) => ({
+  type: types.INITIAL_CONNECT,
+  payload: {
+    snapshots,
+    mode,
+    sliderIndex: 0,
+    viewIndex: -1,
+  },
+});
+
+export const setPort = port => ({
+  type: types.SET_PORT,
+  payload: port,
+});
+
+export const emptySnapshots = () => ({
+  type: types.EMPTY,
+});
+
+export const changeView = index => ({
+  type: types.CHANGE_VIEW,
+  payload: index,
+});
+
+export const changeSlider = index => ({
+  type: types.CHANGE_SLIDER,
+  payload: index,
+});
+
+export const moveBackward = () => ({
+  type: types.MOVE_BACKWARD,
+  payload: false,
+});
+
+export const moveForward = () => ({
+  type: types.MOVE_FORWARD,
+  payload: false,
+});
+
+export const playForward = () => ({
+  type: types.MOVE_FORWARD,
+  payload: true,
+});
+
+export const pause = () => ({
+  type: types.PAUSE,
+});
+
+export const startPlaying = intervalId => ({
+  type: types.PLAY,
+  payload: intervalId,
+});
+
+export const importSnapshots = newSnaps => ({
+  type: types.IMPORT,
+  payload: newSnaps,
+});

src/app/components/Action.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { changeView, changeSlider } from '../actions/actions';
+
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleJumpSnapshot, index, sliderIndex,
+    selected, index, sliderIndex, dispatch,
   } = props;
 
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => handleChangeSnapshot(index)}
+      onClick={() => dispatch(changeView(index))}
       role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
@@ -18,7 +20,7 @@ const Action = (props) => {
         className="jump-button"
         onClick={(e) => {
           e.stopPropagation();
-          handleJumpSnapshot(index);
+          dispatch(changeSlider(index));
         }}
         tabIndex={index}
         type="button"
@@ -30,10 +32,10 @@ const Action = (props) => {
 };
 
 Action.propTypes = {
+  sliderIndex: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
-  handleChangeSnapshot: PropTypes.func.isRequired,
-  handleJumpSnapshot: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
 };
 
 export default Action;

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;