Tech - Fixed most

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 src/dist/public
-src/server/logs
+src/server/logs
+logs

config/library.js

@@ -2,5 +2,5 @@ require('react');
 require('react-dom');
 require('react-redux');
 require('redux');
-require('react-player');
-require('redux-saga');
+require('redux-saga');
+require('react-bootstrap');

package.json

@@ -30,6 +30,8 @@
     "babel-eslint": "^8.2.6",
     "babel-loader": "^8.0.0-beta.4",
     "babel-polyfill": "^6.26.0",
+    "chai": "^4.1.2",
+    "chai-enzyme": "^1.0.0-beta.1",
     "chromedriver": "^2.41.0",
     "css-loader": "^1.0.0",
     "cucumber": "^4.2.1",
@@ -43,6 +45,7 @@
     "express": "^4.16.3",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "jsdom": "^12.0.0",
+    "jsdom-global": "^3.0.2",
     "mocha": "^5.2.0",
     "nightwatch": "^0.9.21",
     "nightwatch-cucumber": "^9.1.2",
@@ -54,17 +57,18 @@
     "style-loader": "^0.22.1",
     "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.2.0",
+    "testdouble": "^3.8.1",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.17.0",
     "webpack-cli": "^3.1.0"
   },
   "dependencies": {
-    "react-player": "^1.6.4",
-    "redux-saga": "^0.16.0",
     "react": "^16.4.2",
+    "react-bootstrap": "^0.32.3",
     "react-dom": "^16.4.2",
     "react-redux": "^5.0.7",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-saga": "^0.16.0"
   },
   "nyc": {
     "extension": [

src/client/actions/index.js

@@ -1,4 +1,8 @@
 import { action } from '../helpers/actionCreator';
 import * as actions from '../constants/index';
 
-export const add = text => action(actions.ADD, { text });
+export const add = number => action(actions.ADD, { number });
+
+export const sub = number => action(actions.SUB, { number });
+
+export const change = number => action(actions.CHANGE, { number });

src/client/components/App.jsx

@@ -1,35 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactPlayer from 'react-player';
+
 import '../styles/App.scss';
+import { Button, FormControl } from 'react-bootstrap';
 export default class App extends React.Component {
   constructor(props) {
     super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    parseInt(e.target.value) ? this.props.change(parseInt(e.target.value)): '';
   }
   render() {
-    return this.props.number == 1 ? (
-      <div>
-        <ReactPlayer
-          url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
-          playing
-        />
-      </div>
-    ) : (
-      <div className="container">
-        {' '}
-        Welcome{' '}
-        <input
-          type="button"
-          value="Play Me"
-          onClick={() => this.props.add(1)}
-        />{' '}
-      </div>
+    return (<div className="container">
+      <Button bsStyle="primary" onClick={() => this.props.add(this.props.number)}>
+          +
+      </Button>
+      <FormControl
+        type="text"
+        value={this.props.number}
+        onChange={this.handleChange}
+      />
+      <Button bsStyle="primary" onClick={() => this.props.sub(this.props.number)}>
+          -
+      </Button>
+    </div>
     );
   }
 }
 
 App.propTypes = {
-  number: PropTypes.string,
+  number: PropTypes.number,
   add: PropTypes.func,
-  recipes: PropTypes.array,
+  sub: PropTypes.func,
+  change: PropTypes.func,
 };

src/client/constants/index.js

@@ -1,4 +1,5 @@
+export const INITALIZE_APPLICATION = 'INITALIZE_APPLICATION';
+export const CHANGE = 'CHANGE';
 export const ADD = 'ADD';
+export const SUB = 'SUB';
 export const SAVE = 'SAVE';
-export const START_APPLICATION = 'START_APPLICATION';
-export const ADD_RECIPES = 'ADD_RECIPES';

src/client/containers/App.js

@@ -1,17 +1,18 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import App from '../components/App';
-import { add } from '../actions';
+import { add, sub, change } from '../actions';
 
 const mapStateToProps = state => ({
-  number: state.add.number,
-  recipes: state.recipe.recipes,
+  number: state.calc.number,
 });
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       add,
+      sub,
+      change,
     },
     dispatch
   );

src/client/index.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
+const sagaMiddleware = createSagaMiddleware();
 import cr from './reducers/combined';
 import AppContainer from './containers/App';
 import rootSaga from './sagas/combined';
-const sagaMiddleware = createSagaMiddleware();
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 import * as actions from './constants';
 // then run the saga
-const store = createStore(cr, applyMiddleware(sagaMiddleware));
+const store = createStore(cr, composeEnhancers(applyMiddleware(sagaMiddleware)));
 sagaMiddleware.run(rootSaga);
 export const action = type => store.dispatch({ type });
-action(actions.START_APPLICATION);
+action(actions.INITALIZE_APPLICATION);
 
 render(
   <Provider store={store}>

src/client/reducers/add.js → src/client/reducers/calc.js

@@ -1,6 +1,6 @@
 import * as actions from '../constants';
 
-const add = (state = {}, action) => {
+const calc = (state = {}, action) => {
   switch (action.type) {
   case actions.SAVE:
     return Object.assign({}, state, {
@@ -11,4 +11,4 @@ const add = (state = {}, action) => {
   }
 };
 
-export default add;
+export default calc;

src/client/reducers/combined.js

@@ -1,10 +1,8 @@
 import { combineReducers } from 'redux';
-import  add  from './add';
-import recipe from './recipe';
+import  calc  from './calc';
 
 const combined = combineReducers({
-  add,
-  recipe,
+  calc,
 });
 
 export default combined;

src/client/sagas/calc.js

@@ -0,0 +1,56 @@
+import {  put, takeEvery } from 'redux-saga/effects';
+import * as actions from '../constants';
+
+function* initalize() {
+  try {
+    yield put({
+      type: actions.SAVE,
+      number: 100,
+    });
+  } catch (e) {
+    yield put({ type: 'INITALIZE_APPLICATION_FAILED', number: null });
+  }
+}
+
+export function* initalizeWatcher() {
+  yield takeEvery(actions.INITALIZE_APPLICATION, initalize);
+}
+
+function* addnumber(action) {
+  try {
+    yield put({ type: actions.SAVE, number: action.payload.number + 1 });
+  } catch (e) {
+    yield put({ type: 'ADD_FAILED', message: e.message });
+  }
+}
+
+export function* addWatcher() {
+  yield takeEvery(actions.ADD, addnumber);
+}
+export default addWatcher;
+
+
+function* changenumber(action) {
+  try {
+    yield put({ type: actions.SAVE, number: action.payload.number });
+  } catch (e) {
+    yield put({ type: 'CHANGE_FAILED', message: e.message });
+  }
+}
+
+export function* changeWatcher() {
+  yield takeEvery(actions.CHANGE, changenumber);
+}
+
+
+function* subnumber(action) {
+  try {
+    yield put({ type: actions.SAVE, number: action.payload.number - 1 });
+  } catch (e) {
+    yield put({ type: 'SUB_FAILED', message: e.message });
+  }
+}
+
+export function* subWatcher() {
+  yield takeEvery(actions.SUB, subnumber);
+}

src/client/sagas/combined.js

@@ -1,6 +1,5 @@
 import { all } from 'redux-saga/effects';
-import addWatcher from './add';
-import startWatcher from './start';
+import * as watcher from './calc';
 export default function* rootSaga() {
-  yield all([addWatcher(), startWatcher()]);
+  yield all([watcher.addWatcher(), watcher.subWatcher(), watcher.changeWatcher(), watcher.initalizeWatcher()]);
 }

src/client/styles/App.scss

@@ -4,4 +4,13 @@
   background-color: #fff;
   text-transform: capitalize;
   text-align: left;
+  .btn {
+    margin: 10px;
+  }
+  .form-control {
+    margin: 10px;
+    display: unset;
+    width: unset;
+    padding-bottom: 9px;
+  }
 }

src/dist/index.html

@@ -10,6 +10,7 @@
 <body>
   <div id="app"></div>
   <link rel="stylesheet" type="text/css" href="public/bundle.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <script src="public/lib.bundle.js"></script>
   <script src="public/bundle.js"></script>
 </body>

test/mocha.opts

@@ -4,5 +4,5 @@
 --require @babel/register
 --require babel-polyfill
 --require test/mochasetup.js
---require jsdom
+--require jsdom-global/register
 test/unit/**/*.{js,jsx}

test/unit/client/actions/indexTest.js

@@ -0,0 +1,28 @@
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import * as action from '../../../../src/client/actions';
+import * as actions from '../../../../src/client/constants';
+
+describe('actions', () => {
+  it('should trigger the ADD action', () => {
+    const number = 100;
+    const response = action.add(number);
+
+    expect(response.type).to.deep.equal(actions.ADD);
+    expect(response.payload.number).to.deep.equal(100);
+  });
+  it('should trigger the SUB action', () => {
+    const number = 100;
+    const response = action.sub(number);
+
+    expect(response.type).to.deep.equal(actions.SUB);
+    expect(response.payload.number).to.deep.equal(100);
+  });
+  it('should trigger the CHANGE action', () => {
+    const number = 100;
+    const response = action.change(number);
+
+    expect(response.type).to.deep.equal(actions.CHANGE);
+    expect(response.payload.number).to.deep.equal(100);
+  });
+});