Redirection working

chapter08/src/App.routing.js

@@ -2,22 +2,11 @@
 
 import React, { Component } from "react";
 import { Provider } from "react-redux";
-import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
 
-import { ConnectedLogin } from "./routingApp";
+import { ConnectedLogin, ConnectedProtectedRoutes } 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 (
@@ -25,10 +14,9 @@ class App extends Component<{}> {
                 <BrowserRouter>
                     <Switch>
                         <Route path="/login" component={ConnectedLogin} />
-                        <ProtectedRoutes>
+                        <ConnectedProtectedRoutes>
                             <Route
                                 path="/"
-                                exact
                                 render={() => <div>HOME SWEET HOME</div>}
                             />
                             <Route
@@ -39,7 +27,7 @@ class App extends Component<{}> {
                                 path="/BBB"
                                 render={() => <div>BBB</div>}
                             />
-                        </ProtectedRoutes>
+                        </ConnectedProtectedRoutes>
                         <Route render={() => <div>404 ERROR!</div>} />
                     </Switch>
                 </BrowserRouter>

chapter08/src/routingApp/index.js

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

chapter08/src/routingApp/login.component.js

@@ -1,4 +1,4 @@
-/* noaunflow */
+/* @flow */
 
 import React from "react";
 import PropTypes from "prop-types";
@@ -11,7 +11,7 @@ export class Login extends React.PureComponent<{
         onLogin: PropTypes.func.isRequired,
         logging: PropTypes.bool.isRequired,
         token: PropTypes.string.isRequired,
-        routeAfter: PropTypes.string.isRequired
+        location: PropTypes.object
     };
 
     state = {
@@ -32,7 +32,9 @@ export class Login extends React.PureComponent<{
             this.state.password &&
             this.props.token
         ) {
-            return <Redirect to={this.props.routeAfter} />;
+            return (
+                <Redirect to={this.props.location.state.from.pathname} />
+            );
         } else {
             return (
                 <div>

chapter08/src/routingApp/protectedRoutes.component.js

@@ -0,0 +1,30 @@
+/* @flow */
+
+import React from "react";
+import { Redirect } from "react-router-dom";
+import PropTypes from "prop-types";
+
+export class ProtectedRoutes extends React.Component<{
+    token: string,
+    children: [{}],
+    location: object
+}> {
+    static propTypes = {
+        token: PropTypes.string.isRequired,
+        children: PropTypes.arrayOf(PropTypes.object).isRequired,
+        location: PropTypes.object
+    };
+
+    render() {
+        return this.props.token ? (
+            this.props.children
+        ) : (
+            <Redirect
+                to={{
+                    pathname: "/login",
+                    state: { from: this.props.location }
+                }}
+            />
+        );
+    }
+}

chapter08/src/routingApp/protectedRoutes.connected.js

@@ -0,0 +1,9 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { ProtectedRoutes } from "./protectedRoutes.component";
+
+export const ConnectedProtectedRoutes = connect(state => ({
+    token: state.token
+}))(ProtectedRoutes);