Update dependencies and migrate code

Gruntfile.js

@@ -34,10 +34,7 @@ module.exports = function (grunt) {
         publicPath: '/assets/',
         contentBase: './<%= pkg.src %>/'
       },
-
-      start: {
-        keepAlive: true
-      }
+      keepalive: true
     },
 
     'connect': {

karma.conf.js

@@ -57,9 +57,8 @@ module.exports = function (config) {
     // - Firefox
     // - Opera
     // - Safari (only Mac)
-    // - PhantomJS
     // - IE (only Windows)
-    browsers: ['PhantomJS'],
+    browsers: ['Chrome'],
     reporters: ['progress'],
     captureTimeout: 60000,
     singleRun: true

package.json

@@ -33,8 +33,7 @@
     "serve-electron": "grunt serve-electron",
     "serve-web": "grunt serve-web",
     "serve-web:dist": "grunt serve-web:dist",
-    "test": "jest",
-    "postinstall": "npm install fbjs@0.6.0"
+    "test": "jest"
   },
   "window": {
     "toolbar": true,
@@ -44,11 +43,7 @@
     "max_height": 600
   },
   "jest": {
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
-    "testFileExtensions": [
-      "js"
-    ],
-    "testPathDirs": [
+    "roots": [
       "src"
     ],
     "moduleFileExtensions": [
@@ -58,64 +53,64 @@
     "collectCoverage": true
   },
   "dependencies": {
-    "electron-prebuilt": "^0.37.2",
-    "es6-promise": "^3.1.2",
-    "events": "^1.1.0",
-    "flux": "^2.1.1",
-    "grunt": "^0.4.5",
-    "history": "^2.0.1",
+    "electron": "^9.1.1",
+    "events": "^3.2.0",
+    "flux": "^3.1.3",
+    "history": "^5.0.0",
     "keymirror": "^0.1.1",
-    "normalize.css": "^3.0.3",
-    "object-assign": "^4.0.1",
-    "react-dom": "^0.14.7",
-    "react-native": "^0.21.0",
-    "react-native-cli": "^0.1.10",
-    "react-router": "^2.0.1",
-    "serve-static": "^1.10.2",
-    "uniqid": "^1.0.0"
+    "normalize.css": "^8.0.1",
+    "object-assign": "^4.1.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-native": "^0.63.2",
+    "react-native-cli": "^2.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "serve-static": "^1.14.1",
+    "uniqid": "^5.2.0"
   },
   "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-core": "^6.7.2",
-    "babel-jest": "^9.0.3",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-register": "^6.7.2",
-    "css-loader": "^0.23.1",
-    "eslint": "^2.4.0",
-    "eslint-plugin-react": "^4.2.3",
-    "file-loader": "^0.8.5",
-    "gh-pages": "^0.11.0",
-    "grunt-cli": "^0.1.13",
-    "grunt-concurrent": "^2.2.1",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-connect": "^1.0.0",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/register": "^7.10.5",
+    "babel-jest": "^26.1.0",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.5.0",
+    "eslint-plugin-react": "^7.20.3",
+    "file-loader": "^6.0.0",
+    "gh-pages": "^3.1.0",
+    "grunt": "^1.2.1",
+    "grunt-cli": "^1.3.2",
+    "grunt-concurrent": "^3.0.0",
+    "grunt-contrib-clean": "^2.0.0",
+    "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-exec": "^0.4.6",
-    "grunt-karma": "^0.12.2",
-    "grunt-open": "^0.2.3",
-    "grunt-webpack": "^1.0.11",
-    "jasmine-core": "^2.4.1",
-    "jest-cli": "^0.9.2",
-    "jshint": "^2.9.1",
-    "jshint-loader": "^0.8.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.2",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.8",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-script-launcher": "^0.2.0",
-    "karma-webpack": "^1.7.0",
-    "load-grunt-tasks": "^3.4.1",
-    "node-sass": "^3.4.2",
-    "phantomjs-prebuilt": "^2.1.5",
-    "react-hot-loader": "^1.3.0",
-    "sass-loader": "^3.2.0",
-    "style-loader": "^0.13.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1"
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-exec": "^3.0.0",
+    "grunt-karma": "^4.0.0",
+    "grunt-open": "^0.2.4",
+    "grunt-webpack": "^4.0.2",
+    "jasmine-core": "^3.6.0",
+    "jest-cli": "^26.1.0",
+    "jshint": "^2.11.1",
+    "jshint-loader": "^0.8.4",
+    "karma": "^5.1.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^1.3.0",
+    "karma-jasmine": "^3.3.1",
+    "karma-script-launcher": "^1.0.0",
+    "karma-webpack": "^4.0.2",
+    "load-grunt-tasks": "^5.1.0",
+    "node-sass": "^4.14.1",
+    "react-hot-loader": "^4.12.21",
+    "sass-loader": "^9.0.2",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-dev-server": "^3.11.0"
   }
 }

src/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react", "es2015"]
+  "presets": ["@babel/react", "@babel/preset-env"]
 }

src/__tests__/spec/actions/CalculatorActions.js

@@ -4,7 +4,7 @@ describe('CalculatorActions', function() {
   var action;
 
   beforeEach(function() {
-    action = require('../../../common/actions/CalculatorActions.js');
+    action = require('../../../common/actions/CalculatorActions.js').default;
   });
 
   it('should be defined', function() {

src/__tests__/spec/stores/CalculatorStore-test.js

@@ -6,9 +6,9 @@ jest.dontMock('keymirror');
 
 describe('CalculatorStore', function() {
 
-  var CalculatorConstants = require('../../../common/constants/CalculatorConstants');
-  var AppDispatcher = require('../../../common/dispatcher/AppDispatcher');
-  var CalculatorStore = require('../../../common/stores/CalculatorStore');
+  var CalculatorConstants = require('../../../common/constants/CalculatorConstants').default;
+  var AppDispatcher = require('../../../common/dispatcher/AppDispatcher').default;
+  var CalculatorStore = require('../../../common/stores/CalculatorStore').default;
   var callback = AppDispatcher.register.mock.calls[0][0];
 
   // mock actions

src/common/actions/CalculatorActions.js

@@ -22,4 +22,4 @@ var CalculatorActions = {
 
 };
 
-module.exports = CalculatorActions;
+export default CalculatorActions;

src/common/components/FormulaeBase.js

@@ -44,4 +44,4 @@ class Formulae extends Component {
   }
 }
 
-module.exports = Formulae;
+export default Formulae;

src/common/components/KeyBase.js

@@ -34,4 +34,4 @@ class Key extends Component {
   }
 }
 
-module.exports = Key;
+export default Key;

src/common/components/ScreenBase.js

@@ -34,4 +34,4 @@ class Screen extends Component {
   }
 }
 
-module.exports = Screen;
+export default Screen;

src/common/constants/CalculatorConstants.js

@@ -2,7 +2,7 @@
 
 import keyMirror from 'keymirror';
 
-module.exports = keyMirror({
+export default keyMirror({
   KEY_TYPED: null,
   FORMULA_TYPED: null
 });

src/common/dispatcher/AppDispatcher.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import { Promise } from 'es6-promise';
 import assign from 'object-assign';
 
 var _callbacks = [];
-var _promises = [];
 
 var Dispatcher = function() {};
 Dispatcher.prototype = assign({}, Dispatcher.prototype, {
@@ -27,12 +25,6 @@ Dispatcher.prototype = assign({}, Dispatcher.prototype, {
     // First create array of promises for callbacks to reference.
     var resolves = [];
     var rejects = [];
-    _promises = _callbacks.map(function(_, i) {
-      return new Promise(function(resolve, reject) {
-        resolves[i] = resolve;
-        rejects[i] = reject;
-      });
-    });
     // Dispatch to callbacks and resolve/reject promises.
     _callbacks.forEach(function(callback, i) {
       // Callback can return an obj, to resolve, or a promise, to chain.
@@ -43,7 +35,6 @@ Dispatcher.prototype = assign({}, Dispatcher.prototype, {
         rejects[i](new Error('Dispatcher callback unsuccessful'));
       });
     });
-    _promises = [];
   }
 });
 
@@ -63,4 +54,4 @@ var AppDispatcher = assign({}, Dispatcher.prototype, {
 
 });
 
-module.exports = AppDispatcher;
+export default AppDispatcher;

src/common/stores/CalculatorStore.js

@@ -305,4 +305,4 @@ CalculatorStore.dispatchToken = AppDispatcher.register(function(action) {
   }
 });
 
-module.exports = CalculatorStore;
+export default CalculatorStore;

src/index.js

@@ -3,7 +3,7 @@
 import App from './common/components/App';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, hashHistory } from 'react-router';
+import { HashRouter, Route } from 'react-router-dom';
 
 // CSS
 require('normalize.css');
@@ -12,7 +12,7 @@ require('./styles/main.css');
 var content = document.getElementById('content');
 
 ReactDOM.render((
-  <Router history={hashHistory}>
+  <HashRouter>
     <Route path="/" component={App} />
-  </Router>
+  </HashRouter>
 ), content);

webpack.config.js

@@ -12,7 +12,6 @@ module.exports = {
     publicPath: '/assets/'
   },
   cache: true,
-  debug: true,
   devtool: false,
   entry: [
       'webpack/hot/only-dev-server',
@@ -24,13 +23,12 @@ module.exports = {
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
   ],
   module: {
-    loaders: [{
+    rules: [{
       test: /\.js$/,
       exclude: /node_modules/,
-      loader: 'react-hot!babel-loader'
+      loader: 'babel-loader'
     }, {
       test: /\.sass/,
       loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'

webpack.dist.config.js

@@ -7,28 +7,25 @@
 'use strict';
 
 var webpack = require('webpack');
+const path = require('path');
 
 module.exports = {
   output: {
     publicPath: '/assets/',
-    path: 'dist/assets/',
+    path: path.resolve(__dirname, 'dist/assets/'),
     filename: 'main.js'
   },
-  debug: false,
   devtool: false,
   entry: './src/index.js',
   stats: {
     colors: true,
     reasons: false
   },
   plugins: [
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.AggressiveMergingPlugin()
   ],
   module: {
-    loaders: [{
+    rules: [{
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader'