Logging is working

chapter05/package-lock.json

@@ -3803,7 +3803,8 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -4218,7 +4219,8 @@
                 "safe-buffer": {
                     "version": "5.1.1",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -4274,6 +4276,7 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
+                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -4317,12 +4320,14 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 },
                 "yallist": {
                     "version": "3.0.2",
                     "bundled": true,
-                    "dev": true
+                    "dev": true,
+                    "optional": true
                 }
             }
         },

chapter08/package-lock.json

@@ -2671,6 +2671,15 @@
       "integrity": "sha1-sGhzk0vF40T+9hGhlqb6rgruAVo=",
       "dev": true
     },
+    "connected-react-router": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-4.3.0.tgz",
+      "integrity": "sha512-HUXyhpA2EyOcxKftkrETWwGIsJ/PQ6yjtWMAYPfwqnjVVmMOex0RfkPpub8e+/VAU/XV+DZ62YjFeDvPo6boZw==",
+      "requires": {
+        "immutable": "^3.8.1",
+        "react-router": "^4.2.0"
+      }
+    },
     "console-browserify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
@@ -6742,6 +6751,28 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "^2.2.1",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "value-equal": "^0.4.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -7163,6 +7194,11 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -9788,7 +9824,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
       "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
-      "dev": true,
       "requires": {
         "isarray": "0.0.1"
       },
@@ -9796,8 +9831,7 @@
         "isarray": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-          "dev": true
         }
       }
     },
@@ -11549,6 +11583,33 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -12281,6 +12342,11 @@
       "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
       "dev": true
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -13915,6 +13981,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -13956,6 +14027,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",

chapter08/package.json

@@ -21,9 +21,11 @@
     },
     "dependencies": {
         "axios": "^0.18.0",
+        "connected-react-router": "^4.3.0",
         "react": "^16.4.1",
         "react-dom": "^16.4.1",
         "react-redux": "^5.0.7",
+        "react-router-dom": "^4.3.1",
         "redux": "^4.0.0",
         "redux-thunk": "^2.3.0"
     },

chapter08/src/App.regions.js

@@ -8,18 +8,14 @@ import {
     ConnectedRegionsTable
 } from "./regionsApp";
 
-import { getCountries, getRegions } from "./regionsApp/serviceApi.js";
+import { store } from "./regionsApp/store";
-import { store } from "./regionsApp/store.js";
 
 class App extends Component<{}> {
     render() {
         return (
             <Provider store={store}>
                 <Fragment>
-                    <ConnectedCountrySelect
+                    <ConnectedCountrySelect />
-                        getCountries={() => store.dispatch(getCountries())}
-                        onSelect={c => store.dispatch(getRegions(c))}
-                    />
                     <ConnectedRegionsTable />
                 </Fragment>
             </Provider>

chapter08/src/App.routing.js

@@ -0,0 +1,51 @@
+/* noflow */
+
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+
+import { ConnectedLogin } from "./routingApp";
+import { store } from "./routingApp/store";
+
+/* eslint-disable */
+class ProtectedRoutes extends React.Component {
+    render() {
+        return store.getState().token ? (
+            this.props.children
+        ) : (
+            <Redirect to="/login" />
+        );
+    }
+}
+
+class App extends Component<{}> {
+    render() {
+        return (
+            <Provider store={store}>
+                <BrowserRouter>
+                    <Switch>
+                        <Route path="/login" component={ConnectedLogin} />
+                        <ProtectedRoutes>
+                            <Route
+                                path="/"
+                                exact
+                                render={() => <div>HOME SWEET HOME</div>}
+                            />
+                            <Route
+                                path="/AAA"
+                                render={() => <div>AAA</div>}
+                            />
+                            <Route
+                                path="/BBB"
+                                render={() => <div>BBB</div>}
+                            />
+                        </ProtectedRoutes>
+                        <Route render={() => <div>404 ERROR!</div>} />
+                    </Switch>
+                </BrowserRouter>
+            </Provider>
+        );
+    }
+}
+
+export default App;

chapter08/src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import App from "./App.counter.js";
+import App from "./App.routing";
 import registerServiceWorker from "./registerServiceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));

chapter08/src/regionsApp/countrySelect.connected.js

@@ -3,10 +3,19 @@
 import { connect } from "react-redux";
 
 import { CountrySelect } from "./countrySelect.component";
+import { getCountries, getRegions } from "./world.actions";
 
 const getProps = state => ({
     list: state.countries,
     loading: state.loadingCountries
 });
 
-export const ConnectedCountrySelect = connect(getProps)(CountrySelect);
+const getDispatch = dispatch => ({
+    getCountries: () => dispatch(getCountries()),
+    onSelect: c => dispatch(getRegions(c))
+});
+
+export const ConnectedCountrySelect = connect(
+    getProps,
+    getDispatch
+)(CountrySelect);

chapter08/src/regionsApp/serviceApi.js

@@ -2,62 +2,8 @@
 
 import axios from "axios";
 
-import {
+export const getCountriesAPI = () =>
-    countriesRequest,
+    axios.get(`http://fk-server:8080/countries`);
-    countriesSuccess,
-    countriesFailure,
-    regionsRequest,
-    regionsSuccess,
-    regionsFailure
-} from "./world.actions";
 
-export const getCountries = () => async dispatch => {
+export const getRegionsAPI = country =>
-    try {
+    axios.get(`http://fk-server:8080/regions/${country}`);
-        dispatch(countriesRequest());
-        // the next line delays execution for 5 seconds:
-        // await new Promise(resolve => setTimeout(resolve, 5000));
-        const result = await axios.get(`http://fk-server:8080/countries`);
-        dispatch(countriesSuccess(result.data));
-    } catch (e) {
-        dispatch(countriesFailure());
-    }
-};
-
-export const getRegions = (country: string) => async dispatch => {
-    if (country) {
-        try {
-            dispatch(regionsRequest(country));
-            const result = await axios.get(
-                `http://fk-server:8080/regions/${country}`
-            );
-            dispatch(regionsSuccess(result.data));
-        } catch (e) {
-            dispatch(regionsFailure());
-        }
-    } else {
-        dispatch(regionsFailure());
-    }
-};
-
-export const getRegions2 = (country: string) => async (
-    dispatch,
-    getState
-) => {
-    if (country === getState().currentCountry) {
-        console.log("Hey! You are getting the same country as before!");
-    }
-
-    if (country) {
-        try {
-            dispatch(regionsRequest(country));
-            const result = await axios.get(
-                `http://fk-server:8080/regions/${country}`
-            );
-            dispatch(regionsSuccess(result.data));
-        } catch (e) {
-            dispatch(regionsFailure());
-        }
-    } else {
-        dispatch(regionsFailure());
-    }
-};

chapter08/src/regionsApp/world.actions.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import { getCountriesAPI, getRegionsAPI } from "./serviceApi";
+
 // Countries actions
 
 export const COUNTRIES_REQUEST = "countries:request";
@@ -55,3 +57,52 @@ export const regionsFailure = () =>
     ({
         type: REGIONS_FAILURE
     }: RegionsActions);
+
+// Complex Actions:
+
+export const getCountries = () => async dispatch => {
+    try {
+        dispatch(countriesRequest());
+        // the next line delays execution for 5 seconds:
+        // await new Promise(resolve => setTimeout(resolve, 5000));
+        const result = await getCountriesAPI();
+        dispatch(countriesSuccess(result.data));
+    } catch (e) {
+        dispatch(countriesFailure());
+    }
+};
+
+export const getRegions = (country: string) => async dispatch => {
+    if (country) {
+        try {
+            dispatch(regionsRequest(country));
+            const result = await getRegionsAPI(country);
+            dispatch(regionsSuccess(result.data));
+        } catch (e) {
+            dispatch(regionsFailure());
+        }
+    } else {
+        dispatch(regionsFailure());
+    }
+};
+
+export const getRegions2 = (country: string) => async (
+    dispatch,
+    getState
+) => {
+    if (country === getState().currentCountry) {
+        console.log("Hey! You are getting the same country as before!");
+    }
+
+    if (country) {
+        try {
+            dispatch(regionsRequest(country));
+            const result = await getRegionsAPI(country);
+            dispatch(regionsSuccess(result.data));
+        } catch (e) {
+            dispatch(regionsFailure());
+        }
+    } else {
+        dispatch(regionsFailure());
+    }
+};

chapter08/src/routingApp/index.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+import { ConnectedLogin } from "./login.connected.js";
+
+export { ConnectedLogin };

chapter08/src/routingApp/login.actions.js

@@ -0,0 +1,34 @@
+/* @flow */
+
+import { loginService } from "./serviceApi";
+
+export const LOGIN_REQUEST = "login:request";
+export const LOGIN_SUCCESS = "login:success";
+export const LOGIN_FAILURE = "login:failure";
+
+export const loginRequest = () => ({
+    type: LOGIN_REQUEST
+});
+
+export const loginSuccess = (token: string) => ({
+    type: LOGIN_SUCCESS,
+    token
+});
+
+export const loginFailure = () => ({
+    type: LOGIN_FAILURE
+});
+
+// Complex actions:
+
+export const attemptLogin = (user, password) => async dispatch => {
+    try {
+        dispatch(loginRequest());
+        // the next line delays execution for 5 seconds:
+        // await new Promise(resolve => setTimeout(resolve, 5000));
+        const result = await loginService(user, password);
+        dispatch(loginSuccess(result.data));
+    } catch (e) {
+        dispatch(loginFailure());
+    }
+};

chapter08/src/routingApp/login.component.js

@@ -0,0 +1,60 @@
+/* noaunflow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Redirect } from "react-router-dom";
+
+export class Login extends React.PureComponent<{
+    logging: boolean
+}> {
+    static propTypes = {
+        onLogin: PropTypes.func.isRequired,
+        logging: PropTypes.bool.isRequired,
+        token: PropTypes.string.isRequired,
+        routeAfter: PropTypes.string.isRequired
+    };
+
+    state = {
+        userName: "",
+        password: ""
+    };
+
+    onUserNameBlur = e => this.setState({ userName: e.target.value });
+
+    onPasswordBlur = e => this.setState({ password: e.target.value });
+
+    onLoginClick = () =>
+        this.props.onLogin(this.state.userName, this.state.password);
+
+    render() {
+        if (
+            this.state.userName &&
+            this.state.password &&
+            this.props.token
+        ) {
+            return <Redirect to={this.props.routeAfter} />;
+        } else {
+            return (
+                <div>
+                    <h1>Login Form</h1>
+                    <div>
+                        User:{" "}
+                        <input type="text" onBlur={this.onUserNameBlur} />
+                    </div>
+                    <div>
+                        Password:{" "}
+                        <input
+                            type="password"
+                            onBlur={this.onPasswordBlur}
+                        />
+                    </div>
+                    {this.props.logging ? (
+                        "Logging in..."
+                    ) : (
+                        <button onClick={this.onLoginClick}>Login</button>
+                    )}
+                </div>
+            );
+        }
+    }
+}

chapter08/src/routingApp/login.connected.js

@@ -0,0 +1,16 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { Login } from "./login.component";
+import { attemptLogin } from "./login.actions";
+
+export const ConnectedLogin = connect(
+    state => ({
+        logging: state.logging,
+        token: state.token
+    }),
+    dispatch => ({
+        onLogin: (user, password) => dispatch(attemptLogin(user, password))
+    })
+)(Login);

chapter08/src/routingApp/login.reducer.js

@@ -0,0 +1,41 @@
+/* @flow */
+
+import {
+    LOGIN_REQUEST,
+    LOGIN_SUCCESS,
+    LOGIN_FAILURE
+} from "./login.actions";
+
+export const reducer = (
+    state: object = {
+        // initial state
+        logging: false,
+        token: ""
+    },
+    action
+) => {
+    switch (action.type) {
+        case LOGIN_REQUEST:
+            return {
+                ...state,
+                logging: true,
+                token: ""
+            };
+
+        case LOGIN_SUCCESS:
+            return {
+                ...state,
+                logging: false,
+                token: action.token
+            };
+
+        case LOGIN_FAILURE:
+            return {
+                ...state,
+                logging: false
+            };
+
+        default:
+            return state;
+    }
+};

chapter08/src/routingApp/serviceApi.js

@@ -0,0 +1,9 @@
+/* @flow */
+
+import axios from "axios";
+
+export const loginService = (user, password) =>
+    axios.post(
+        `http://localhost:8443/gettoken`,
+        `user=${user}&password=${password}`
+    );

chapter08/src/routingApp/store.js

@@ -0,0 +1,8 @@
+/* @flow */
+
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+import { reducer } from "./login.reducer.js";
+
+export const store = createStore(reducer, applyMiddleware(thunk));