Merge pull request #25 from choonchernlim/feature/dep

Feature/dep
choonchernlim · Dec 28, 2018 · 1f178a9 · 1f178a9
2 parents e9cae8f + 1b19e4a
commit 1f178a9
Show file tree

Hide file tree

Showing 19 changed files with 2,016 additions and 2,436 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.15.0 - 2018-12-28
+
+- Replaced `react-router-redux` with `connected-react-router` because the earlier won't work with Redux v6.
+- Run Prettier on Git pre commit.
+- Removed `uglifyjs-webpack-plugin` to use Webpack's built-in `terser-webpack-plugin`.
+
 ## 0.14.0 - 2018-10-04
 
 - Babel - Upgrade to v7.

diff --git a/README.md b/README.md
@@ -65,26 +65,26 @@ These commands are cross-platform compatible.
 
 ## Dependencies
 
-| Dependency         | Description                                                  |
-| ------------------ | ------------------------------------------------------------ |
-| @material-ui/core  | UI - Google's material design UI components built with React |
-| @material-ui/icons | UI - Google Material icons                                   |
-| classnames         | UI - Conditionally joining classNames together               |
-| date-fns           | Parse, validate, manipulate and display dates                |
-| history            | Managing browser history                                     |
-| immer              | Handling immutable objects                                   |
-| prop-types         | React - Runtime type checking for React props                |
-| react              | React - Core                                                 |
-| react-dom          | React - DOM                                                  |
-| react-redux        | React - Redux integration                                    |
-| react-router-dom   | React - Router                                               |
-| react-router-redux | React - Router with Redux integration                        |
-| recompose          | React - Useful utility function components and HOCs.         |
-| redux              | Redux - Core                                                 |
-| redux-observable   | Redux - Side Effects middleware using RxJS' Observables      |
-| reselect           | Memoized selector for React components                       |
-| rxjs               | Handling async actions                                       |
-| typeface-roboto    | UI - Roboto font, adhering to Google Material Design spec    |
+| Dependency             | Description                                                  |
+| ---------------------- | ------------------------------------------------------------ |
+| @material-ui/core      | UI - Google's material design UI components built with React |
+| @material-ui/icons     | UI - Google Material icons                                   |
+| classnames             | UI - Conditionally joining classNames together               |
+| connected-react-router | React - Router with Redux integration                        |
+| date-fns               | Parse, validate, manipulate and display dates                |
+| history                | Managing browser history                                     |
+| immer                  | Handling immutable objects                                   |
+| prop-types             | React - Runtime type checking for React props                |
+| react                  | React - Core                                                 |
+| react-dom              | React - DOM                                                  |
+| react-redux            | React - Redux integration                                    |
+| react-router-dom       | React - Router                                               |
+| recompose              | React - Useful utility function components and HOCs.         |
+| redux                  | Redux - Core                                                 |
+| redux-observable       | Redux - Side Effects middleware using RxJS' Observables      |
+| reselect               | Memoized selector for React components                       |
+| rxjs                   | Handling async actions                                       |
+| typeface-roboto        | UI - Roboto font, adhering to Google Material Design spec    |
 
 ## Dev Dependencies
 
@@ -122,8 +122,10 @@ These commands are cross-platform compatible.
 | file-loader                                | Webpack - File loader                                                                                                                                                                      |
 | flow-bin                                   | Flow - Static type checker for JavaScript                                                                                                                                                  |
 | html-webpack-plugin                        | Webpack - Generates `index.html` using hash filenames for cache busting                                                                                                                    |
+| husky                                      | Git - Provides Git hooks to run Prettier                                                                                                                                                   |
 | image-webpack-loader                       | Webpack - Image loader and handling compression                                                                                                                                            |
 | jsdom                                      | Test - A JavaScript implementation of the WHATWG DOM and HTML standards                                                                                                                    |
+| lint-staged                                | Git - Run Prettier on staged files                                                                                                                                                         |
 | mini-css-extract-plugin                    | Webpack - Extract CSS into separate files                                                                                                                                                  |
 | mocha                                      | Test - JS test framework                                                                                                                                                                   |
 | mocha-junit-reporter                       | Test - Creating JUnit result file for Jenkins                                                                                                                                              |
@@ -135,7 +137,6 @@ These commands are cross-platform compatible.
 | react-test-renderer                        | Test - Works in conjunction with Enzyme                                                                                                                                                    |
 | rimraf                                     | Util - `rm -rf` for both Unix and Windows world                                                                                                                                            |
 | sinon                                      | Test - Standalone test spies, stubs and mocks                                                                                                                                              |
-| uglifyjs-webpack-plugin                    | Webpack - Minify JS files                                                                                                                                                                  |
 | url-loader                                 | Webpack - URL loader                                                                                                                                                                       |
 | webpack                                    | Webpack - Core                                                                                                                                                                             |
 | webpack-dev-server                         | Webpack - Node.js Express server                                                                                                                                                           |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "front-end-stack",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "private": true,
   "sideEffects": false,
   "config": {
@@ -25,75 +25,88 @@
     "prettier": "prettier --write '**/*.{js,json,md}'"
   },
   "dependencies": {
-    "@material-ui/core": "3.1.2",
+    "@material-ui/core": "3.7.1",
     "@material-ui/icons": "3.0.1",
     "classnames": "2.2.6",
-    "date-fns": "1.29.0",
+    "connected-react-router": "6.1.0",
+    "date-fns": "1.30.1",
     "history": "4.7.2",
-    "immer": "1.7.2",
+    "immer": "1.9.3",
     "prop-types": "15.6.2",
-    "react": "16.5.2",
-    "react-dom": "16.5.2",
-    "react-redux": "5.0.7",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-redux": "6.0.0",
     "react-router-dom": "4.3.1",
-    "react-router-redux": "5.0.0-alpha.9",
     "recompose": "0.30.0",
-    "redux": "4.0.0",
+    "redux": "4.0.1",
     "redux-observable": "1.0.0",
     "reselect": "4.0.0",
     "rxjs": "6.3.3",
     "typeface-roboto": "0.0.54"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.2",
-    "@babel/core": "7.1.2",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/plugin-proposal-export-default-from": "7.0.0",
-    "@babel/polyfill": "7.0.0",
-    "@babel/preset-env": "7.1.0",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-export-default-from": "7.2.0",
+    "@babel/polyfill": "7.2.5",
+    "@babel/preset-env": "7.2.3",
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
     "@babel/register": "7.0.0",
-    "autoprefixer": "9.1.5",
-    "babel-eslint": "9.0.0",
+    "autoprefixer": "9.4.3",
+    "babel-eslint": "10.0.1",
     "babel-loader": "8.0.4",
-    "babel-plugin-istanbul": "5.0.1",
+    "babel-plugin-istanbul": "5.1.0",
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-webpack-plugin": "1.0.0",
     "compression-webpack-plugin": "2.0.0",
-    "css-loader": "1.0.0",
-    "enzyme": "3.6.0",
-    "enzyme-adapter-react-16": "1.5.0",
-    "eslint": "5.6.1",
+    "css-loader": "2.1.0",
+    "enzyme": "3.8.0",
+    "enzyme-adapter-react-16": "1.7.1",
+    "eslint": "5.11.1",
     "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "3.1.0",
+    "eslint-config-prettier": "3.3.0",
     "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.3",
+    "eslint-plugin-flowtype": "3.2.0",
     "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.1",
-    "eslint-plugin-prettier": "3.0.0",
-    "eslint-plugin-react": "7.11.1",
-    "file-loader": "2.0.0",
-    "flow-bin": "0.82.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.0",
+    "file-loader": "3.0.1",
+    "flow-bin": "0.89.0",
     "html-webpack-plugin": "3.2.0",
-    "image-webpack-loader": "4.3.1",
-    "jsdom": "12.1.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "husky": "1.3.1",
+    "image-webpack-loader": "4.6.0",
+    "jsdom": "13.1.0",
+    "lint-staged": "8.1.0",
+    "mini-css-extract-plugin": "0.5.0",
     "mocha": "5.2.0",
     "mocha-junit-reporter": "1.18.0",
-    "nock": "10.0.0",
-    "nodemon": "1.18.4",
-    "nyc": "13.0.1",
+    "nock": "10.0.5",
+    "nodemon": "1.18.9",
+    "nyc": "13.1.0",
     "postcss-loader": "3.0.0",
-    "prettier": "1.14.3",
-    "react-test-renderer": "16.5.2",
+    "prettier": "1.15.3",
+    "react-test-renderer": "16.7.0",
     "rimraf": "2.6.2",
-    "sinon": "6.3.5",
-    "uglifyjs-webpack-plugin": "2.0.1",
-    "url-loader": "1.1.1",
-    "webpack": "4.20.2",
+    "sinon": "7.2.2",
+    "uglifyjs-webpack-plugin": "2.1.1",
+    "url-loader": "1.1.2",
+    "webpack": "4.28.2",
     "webpack-cli": "3.1.2",
-    "webpack-dev-server": "3.1.9"
+    "webpack-dev-server": "3.1.14"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }
diff --git a/src/js/app/reducers/index.js b/src/js/app/reducers/index.js
@@ -1,13 +1,16 @@
 // @flow
 import { combineReducers } from 'redux';
-import { routerReducer as router } from 'react-router-redux/reducer';
+import { connectRouter } from 'connected-react-router';
 import layout from './layoutReducer';
 import todoManager from './todoManagerReducer';
 import chuckNorris from './chuckNorrisReducer';
 
-export default combineReducers({
-  router,
-  layout,
-  todoManager,
-  chuckNorris,
-});
+const reducers = (history: *) =>
+  combineReducers({
+    router: connectRouter(history),
+    layout,
+    todoManager,
+    chuckNorris,
+  });
+
+export default reducers;
diff --git a/src/js/app/selectors/makeVisibleTodosSelector.js b/src/js/app/selectors/makeVisibleTodosSelector.js
@@ -6,17 +6,21 @@ import type { VisibleTodosSelectorFn } from './types';
 type MakeVisibleTodosSelectorFn = () => VisibleTodosSelectorFn;
 
 const makeVisibleTodosSelector: MakeVisibleTodosSelectorFn = () =>
-  createSelector(states.todoManager.visibilityFilter, states.todoManager.todos, (filter, todos) => {
-    switch (filter) {
-      case 'SHOW_ALL':
-        return todos;
-      case 'SHOW_COMPLETED':
-        return todos.filter(t => t.completed);
-      case 'SHOW_ACTIVE':
-        return todos.filter(t => !t.completed);
-      default:
-        return todos;
-    }
-  });
+  createSelector(
+    states.todoManager.visibilityFilter,
+    states.todoManager.todos,
+    (filter, todos) => {
+      switch (filter) {
+        case 'SHOW_ALL':
+          return todos;
+        case 'SHOW_COMPLETED':
+          return todos.filter(t => t.completed);
+        case 'SHOW_ACTIVE':
+          return todos.filter(t => !t.completed);
+        default:
+          return todos;
+      }
+    },
+  );
 
 export default makeVisibleTodosSelector;
diff --git a/src/js/app/store/index.js b/src/js/app/store/index.js
@@ -4,7 +4,7 @@
  */
 import type { GenericStoreEnchancer } from 'redux';
 import { applyMiddleware, compose, createStore, StoreCreator } from 'redux';
-import routerMiddleware from 'react-router-redux/middleware';
+import { routerMiddleware } from 'connected-react-router';
 import { createEpicMiddleware } from 'redux-observable';
 import reduxDevToolsExtension from './reduxDevtoolsExtension';
 import rootEpic from '../epics/index';
@@ -14,8 +14,6 @@ import env from '../utils/env';
 const configureStore = (history: *): StoreCreator => {
   const epicMiddleware = createEpicMiddleware();
 
-  // To allow epic to change use `push(..)` and such to change the routing.
-  // See https://github.com/reactjs/react-router-redux#pushlocation-replacelocation-gonumber-goback-goforward
   const routerHistoryMiddleware = routerMiddleware(history);
 
   let enhancer: GenericStoreEnchancer = applyMiddleware(epicMiddleware, routerHistoryMiddleware);
@@ -27,7 +25,7 @@ const configureStore = (history: *): StoreCreator => {
     );
   }
 
-  const store = createStore(reducers, enhancer);
+  const store = createStore(reducers(history), enhancer);
 
   epicMiddleware.run(rootEpic);
 

diff --git a/src/js/components/chuckNorris/ChuckNorris.js b/src/js/components/chuckNorris/ChuckNorris.js
@@ -15,7 +15,7 @@ type Props = $ReadOnly<{|
 
 const ChuckNorris = ({ chuckNorris, onGetJoke }: Props) => (
   <div>
-    <Typography variant="display2" gutterBottom>
+    <Typography variant="h3" gutterBottom>
       Chuck Norris
     </Typography>
 
@@ -28,7 +28,7 @@ const ChuckNorris = ({ chuckNorris, onGetJoke }: Props) => (
         <br />
         <br />
 
-        <Button variant="raised" color="primary" onClick={onGetJoke}>
+        <Button variant="contained" color="primary" onClick={onGetJoke}>
           Get Joke
         </Button>
       </Grid>
@@ -40,12 +40,12 @@ const ChuckNorris = ({ chuckNorris, onGetJoke }: Props) => (
           </div>
         ) : null}
         {chuckNorris.joke ? (
-          <Typography variant="display1" gutterBottom>
+          <Typography variant="h4" gutterBottom>
             {chuckNorris.joke}
           </Typography>
         ) : null}
         {chuckNorris.error ? (
-          <Typography variant="display1" gutterBottom color="accent">
+          <Typography variant="h4" gutterBottom color="accent">
             An error has occurred: {chuckNorris.error}
           </Typography>
         ) : null}

diff --git a/src/js/components/error/PageNotFoundError.js b/src/js/components/error/PageNotFoundError.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 const PageNotFoundError = () => (
-  <Typography variant="display2" gutterBottom>
+  <Typography variant="h3" gutterBottom>
     The page you are looking for does not exist.
   </Typography>
 );

diff --git a/src/js/components/error/UnexpectedError.js b/src/js/components/error/UnexpectedError.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 const UnexpectedError = () => (
-  <Typography variant="display2" gutterBottom>
+  <Typography variant="h3" gutterBottom>
     An unexpected error has occurred while trying to process the page.
   </Typography>
 );