New way of doing auth routes

chapter08/src/App.routing.js

@@ -1,48 +1,59 @@
-/* noflow */
+/* @flow */
 
 import React, { Component } from "react";
 import { Provider } from "react-redux";
-import { BrowserRouter, Switch, Route } from "react-router-dom";
+import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
 
-import { ConnectedLogin, ConnectedProtectedRoutes } from "./routingApp";
 import { store } from "./routingApp/store";
 
+const Home = () => <h1>Home Sweet Home</h1>;
+const Help = () => <h1>Help! SOS!</h1>;
+const Alpha = () => <h1>Alpha</h1>;
+const Bravo = () => <h1>Bravo</h1>;
+const Charlie = () => <h1>Charlie</h1>;
+const Zulu = () => <h1>Zulu</h1>;
+const Error404 = () => <h1>404 Error!</h1>;
+
 class App extends Component<{}> {
     render() {
         return (
             <Provider store={store}>
                 <BrowserRouter>
-                    <Switch>
+                    <div>
-                        <Route path="/login" component={ConnectedLogin} />
+                        <header>
-                        <Route
+                            <nav>
-                            path="/about/:something"
+                                <Link to="/">Home</Link>&nbsp;
-                            render={props => (
+                                <Link to="/about/routing">
-                                <div>
+                                    About Routing
-                                    About... {props.match.params.something}
+                                </Link>&nbsp;
-                                </div>
+                                <Link to="/alpha">Alpha...</Link>&nbsp;
-                            )}
+                                <Link to="/bravo">Bravo...</Link>&nbsp;
-                        />
+                                <Link to="/charlie">Charlie...</Link>&nbsp;
-                        <Route
+                                <Link to="/wrong">...Wrong...</Link>&nbsp;
-                            path="/help"
+                                <Link to="/zulu">Zulu</Link>&nbsp;
-                            render={() => <div>Help!</div>}
+                                <Link to="/help">Help</Link>&nbsp;
-                        />
+                            </nav>
-                        <ConnectedProtectedRoutes>
+                        </header>
+
+                        <Switch>
+                            <Route exact path="/" component={Home} />
+                            <Route path="/help" component={Help} />
                             <Route
-                                exact
+                                path="/about/:something"
-                                path="/"
+                                render={props => (
-                                render={() => <div>HOME SWEET HOME</div>}
+                                    <div>
+                                        <h1>About...</h1>
+                                        {props.match.params.something}
+                                    </div>
+                                )}
                             />
-                            <Route
+                            <Route path="/alpha" component={Alpha} />
-                                path="/alpha"
+                            <Route path="/bravo" component={Bravo} />
-                                render={() => <div>Alpha page</div>}
+                            <Route path="/charlie" component={Charlie} />
-                            />
+                            <Route path="/zulu" component={Zulu} />
-                            <Route
+                            <Route component={Error404} />
-                                path="/zulu"
+                        </Switch>
-                                render={() => <div>Zulu page</div>}
+                    </div>
-                            />
-                        </ConnectedProtectedRoutes>
-                        <Route render={() => <div>404 ERROR!</div>} />
-                    </Switch>
                 </BrowserRouter>
             </Provider>
         );

chapter08/src/App.routing.protected.auth.js

@@ -0,0 +1,78 @@
+/* noflow */
+
+/* eslint-disable */
+
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
+
+import {
+    ConnectedLogin,
+    ConnectedProtectedRoutes,
+    AuthRoute
+} from "./routingApp";
+import { store } from "./routingApp/store";
+
+const Home = () => <h1>Home Sweet Home</h1>;
+const Help = () => <h1>Help! SOS!</h1>;
+const Alpha = () => <h1>Alpha</h1>;
+const Bravo = () => <h1>Bravo</h1>;
+const Charlie = () => <h1>Charlie</h1>;
+const Zulu = () => <h1>Zulu</h1>;
+const Error404 = () => <h1>404 Error!</h1>;
+
+class App extends Component<{}> {
+    render() {
+        return (
+            <Provider store={store}>
+                <BrowserRouter>
+                    <div>
+                        <header>
+                            <nav>
+                                <Link to="/">Home</Link>&nbsp;
+                                <Link to="/login">Log in</Link>&nbsp;
+                                <Link to="/about/routing">
+                                    About Routing
+                                </Link>&nbsp;
+                                <Link to="/alpha">Alpha...</Link>&nbsp;
+                                <Link to="/bravo">Bravo...</Link>&nbsp;
+                                <Link to="/charlie">Charlie...</Link>&nbsp;
+                                <Link to="/wrong">...Wrong...</Link>&nbsp;
+                                <Link to="/zulu">Zulu</Link>&nbsp;
+                                <Link to="/help">Help</Link>&nbsp;
+                            </nav>
+                        </header>
+
+                        <Switch>
+                            <Route exact path="/" component={Home} />
+                            <Route path="/help" component={Help} />
+                            <Route
+                                path="/about/:something"
+                                render={props => (
+                                    <div>
+                                        <h1>About...</h1>
+                                        {props.match.params.something}
+                                    </div>
+                                )}
+                            />
+                            <Route
+                                path="/login"
+                                component={ConnectedLogin}
+                            />
+                            <AuthRoute path="/alpha" component={Alpha} />
+                            <AuthRoute path="/bravo" component={Bravo} />
+                            <AuthRoute
+                                path="/charlie"
+                                component={Charlie}
+                            />
+                            <AuthRoute path="/zulu" component={Zulu} />
+                            <AuthRoute component={Error404} />
+                        </Switch>
+                    </div>
+                </BrowserRouter>
+            </Provider>
+        );
+    }
+}
+
+export default App;

chapter08/src/App.routing.protected.js

@@ -0,0 +1,77 @@
+/* noflow */
+
+/* eslint-disable */
+
+import React, { Component } from "react";
+import { Provider } from "react-redux";
+import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
+
+import { ConnectedLogin, ConnectedProtectedRoutes } from "./routingApp";
+import { store } from "./routingApp/store";
+
+const Home = () => <h1>Home Sweet Home</h1>;
+const Help = () => <h1>Help! SOS!</h1>;
+const Alpha = () => <h1>Alpha</h1>;
+const Bravo = () => <h1>Bravo</h1>;
+//const Charlie = () => <h1>Charlie</h1>;
+const Charlie = props => ((window.XXX = props), <h1>Charlie</h1>);
+const Zulu = () => <h1>Zulu</h1>;
+const Error404 = () => <h1>404 Error!</h1>;
+
+class App extends Component<{}> {
+    render() {
+        return (
+            <Provider store={store}>
+                <BrowserRouter>
+                    <div>
+                        <header>
+                            <nav>
+                                <Link to="/">Home</Link>&nbsp;
+                                <Link to="/login">Log in</Link>&nbsp;
+                                <Link to="/about/routing">
+                                    About Routing
+                                </Link>&nbsp;
+                                <Link to="/alpha">Alpha...</Link>&nbsp;
+                                <Link to="/bravo">Bravo...</Link>&nbsp;
+                                <Link to="/charlie">Charlie...</Link>&nbsp;
+                                <Link to="/wrong">...Wrong...</Link>&nbsp;
+                                <Link to="/zulu">Zulu</Link>&nbsp;
+                                <Link to="/help">Help</Link>&nbsp;
+                            </nav>
+                        </header>
+
+                        <Switch>
+                            <Route exact path="/" component={Home} />
+                            <Route path="/help" component={Help} />
+                            <Route
+                                path="/about/:something"
+                                render={props => (
+                                    <div>
+                                        <h1>About...</h1>
+                                        {props.match.params.something}
+                                    </div>
+                                )}
+                            />
+                            <Route
+                                path="/login"
+                                component={ConnectedLogin}
+                            />
+                            <ConnectedProtectedRoutes>
+                                <Route path="/alpha" component={Alpha} />
+                                <Route path="/bravo" component={Bravo} />
+                                <Route
+                                    path="/charlie"
+                                    component={Charlie}
+                                />
+                                <Route path="/zulu" component={Zulu} />
+                                <Route component={Error404} />
+                            </ConnectedProtectedRoutes>
+                        </Switch>
+                    </div>
+                </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.routing";
+import App from "./App.routing.protected.auth";
 import registerServiceWorker from "./registerServiceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));

chapter08/src/routingApp/authRoute.component.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+import PropTypes from "prop-types";
+
+export class Auth extends React.Component {
+    render() {
+        const myProps = { ...this.props };
+        if (!myProps.token) {
+            delete myProps.component;
+            myProps.render = () => (
+                <Redirect
+                    to={{
+                        pathname: this.props.loginRoute,
+                        state: { from: this.props.location }
+                    }}
+                />
+            );
+        }
+        return <Route {...myProps} />;
+    }
+}

chapter08/src/routingApp/authRoute.connected.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+
+import React from "react";
+import { connect } from "react-redux";
+
+import { Auth } from "./authRoute.component";
+export const AuthRoute = connect(state => ({
+    token: state.token,
+    loginRoute: "/login"
+}))(Auth);

chapter08/src/routingApp/index.js

@@ -2,5 +2,6 @@
 
 import { ConnectedLogin } from "./login.connected.js";
 import { ConnectedProtectedRoutes } from "./protectedRoutes.connected.js";
+import { AuthRoute } from "./authroute.connected.js";
 
-export { ConnectedLogin, ConnectedProtectedRoutes };
+export { ConnectedLogin, ConnectedProtectedRoutes, AuthRoute };

chapter08/src/routingApp/login.component.js

@@ -40,11 +40,13 @@ export class Login extends React.PureComponent<{
                 <div>
                     <h1>Login Form</h1>
                     <div>
-                        User:{" "}
+                        User:<input
-                        <input type="text" onBlur={this.onUserNameBlur} />
+                            type="text"
+                            onBlur={this.onUserNameBlur}
+                        />
                     </div>
                     <div>
-                        Password:{" "}
+                        Password:
                         <input
                             type="password"
                             onBlur={this.onPasswordBlur}

chapter08/src/routingApp/protectedRoutes.component.js

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

chapter08/src/routingApp/store.js

@@ -3,6 +3,6 @@
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 
-import { reducer } from "./login.reducer.js";
+import { reducer } from "./login.reducer";
 
 export const store = createStore(reducer, applyMiddleware(thunk));