refactored cra boilerplate

Author: justintieu

.prettierrc

@@ -1,5 +1,6 @@
 {
-  "singleQuote": true,
-  "semi": false,
-  "jsxBracketSameLine": true
-}
+    "jsxBracketSameLine": true,
+    "singleQuote": false,
+    "semi": true,
+    "tabWidth": 4
+}

package.json

@@ -3,27 +3,35 @@
   "homepage": "https://create-react-app-redux.now.sh",
   "scripts": {
     "deploy": "now && now alias",
-    "start": "react-scripts start",
+    "start": "cross-env NODE_PATH=src/ react-scripts start",
     "now-start": "serve -s ./build",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "build": "cross-env NODE_PATH=src/ react-scripts build",
+    "test": "cross-env NODE_PATH=src/ react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "precommit": "pretty-quick --staged"
   },
   "devDependencies": {
-    "prettier": "1.18.2",
-    "react-scripts": "2.1.8"
+    "prettier": "1.18.2"
   },
   "dependencies": {
     "connected-react-router": "4.5.0",
+    "cross-env": "^5.2.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-redux": "5.1.1",
-    "react-router": "4.4.0-beta.8",
-    "react-router-dom": "4.4.0-beta.8",
-    "redux": "4.0.4",
+    "react-router": "5.0.1",
+    "react-router-dom": "5.0.1",
+    "react-scripts": "^3.0.1",
+    "redux": "4.0.1",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "2.3.0",
     "sanitize.css": "7.0.3",
     "serve": "10.1.2"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/App.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Route, Link } from "react-router-dom";
+import Home from "common/components/Home";
+import About from "common/components/About";
+
+const App = () => (
+    <div>
+        <header>
+            <Link to="/">Home</Link>
+            <Link to="/about-us">About</Link>
+        </header>
+
+        <main>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/about-us" component={About} />
+        </main>
+    </div>
+);
+
+export default App;

src/common/components/About.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const About = () => (
+    <div>
+        <h1>About Page</h1>
+        <p>Did you get here via Redux?</p>
+    </div>
+);
+
+export default About;

src/common/components/Home.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { push } from "connected-react-router";
+import { connect } from "react-redux";
+import {
+    increment,
+    incrementAsync,
+    decrement,
+    decrementAsync
+} from "counter/state/counterActions";
+
+const Home = props => {
+    const {
+        changePage,
+        count,
+        decrement,
+        decrementAsync,
+        increment,
+        incrementAsync,
+        isDecrementing,
+        isIncrementing
+    } = props;
+    return (
+        <div>
+            <h1>Home</h1>
+            <p>Count: {count}</p>
+
+            <p>
+                <button onClick={increment}>Increment</button>
+                <button onClick={incrementAsync} disabled={isIncrementing}>
+                    Increment Async
+                </button>
+            </p>
+
+            <p>
+                <button onClick={decrement}>Decrement</button>
+                <button onClick={decrementAsync} disabled={isDecrementing}>
+                    Decrement Async
+                </button>
+            </p>
+
+            <p>
+                <button onClick={changePage}>Go to about page via redux</button>
+            </p>
+        </div>
+    );
+};
+
+const mapStateToProps = ({
+    counter: { count, isDecrementing, isIncrementing }
+}) => ({
+    count: count,
+    isDecrementing: isDecrementing,
+    isIncrementing: isIncrementing
+});
+
+const mapDispatchToProps = dispatch => {
+    return {
+        changePage: () => {
+            dispatch(push("/about-us"));
+        },
+        decrement: () => {
+            dispatch(decrement());
+        },
+        decrementAsync: () => {
+            dispatch(decrementAsync());
+        },
+        increment: () => {
+            dispatch(increment());
+        },
+        incrementAsync: () => {
+            dispatch(incrementAsync());
+        }
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Home);

src/containers/about/index.js

@@ -0,0 +1,56 @@
+export const DECREMENT = "DECREMENT";
+export const DECREMENT_REQUESTED = "DECREMENT_REQUESTED";
+export const INCREMENT = "INCREMENT";
+export const INCREMENT_REQUESTED = "INCREMENT_REQUESTED";
+
+export const decrement = () => {
+    return dispatch => {
+        dispatch({
+            type: DECREMENT_REQUESTED
+        });
+
+        dispatch({
+            type: DECREMENT
+        });
+    };
+};
+
+export const decrementAsync = () => {
+    return dispatch => {
+        dispatch({
+            type: DECREMENT_REQUESTED
+        });
+
+        return setTimeout(() => {
+            dispatch({
+                type: DECREMENT
+            });
+        }, 3000);
+    };
+};
+
+export const increment = () => {
+    return dispatch => {
+        dispatch({
+            type: INCREMENT_REQUESTED
+        });
+
+        dispatch({
+            type: INCREMENT
+        });
+    };
+};
+
+export const incrementAsync = () => {
+    return dispatch => {
+        dispatch({
+            type: INCREMENT_REQUESTED
+        });
+
+        return setTimeout(() => {
+            dispatch({
+                type: INCREMENT
+            });
+        }, 3000);
+    };
+};

src/containers/app/index.js

@@ -0,0 +1,43 @@
+import {
+    DECREMENT,
+    DECREMENT_REQUESTED,
+    INCREMENT,
+    INCREMENT_REQUESTED
+} from "counter/state/counterActions";
+
+const initialState = {
+    count: 0,
+    isIncrementing: false,
+    isDecrementing: false
+};
+
+const counter = (state = initialState, action) => {
+    switch (action.type) {
+        case DECREMENT_REQUESTED:
+            return Object.assign({}, state, {
+                isDecrementing: true
+            });
+
+        case DECREMENT:
+            return Object.assign({}, state, {
+                count: state.count - 1,
+                isDecrementing: !state.isDecrementing
+            });
+
+        case INCREMENT_REQUESTED:
+            return Object.assign({}, state, {
+                isIncrementing: true
+            });
+
+        case INCREMENT:
+            return Object.assign({}, state, {
+                count: state.count + 1,
+                isIncrementing: !state.isIncrementing
+            });
+
+        default:
+            return state;
+    }
+};
+
+export default counter;

src/containers/home/index.js

@@ -1,16 +1,16 @@
 html {
-  font-size: 100%;
+    font-size: 100%;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif;
-  font-size: 1rem;
-  line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+        sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
 }
 
 button:disabled {
-  opacity: 0.5;
+    opacity: 0.5;
 }