diff --git a/chapter08/src/App.routing.js b/chapter08/src/App.routing.js index f283866..5db4ca2 100644 --- a/chapter08/src/App.routing.js +++ b/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 - ) : ( - - ); - } -} - class App extends Component<{}> { render() { return ( @@ -25,10 +14,9 @@ class App extends Component<{}> { - +
HOME SWEET HOME
} /> { path="/BBB" render={() =>
BBB
} /> -
+
404 ERROR!
} />
diff --git a/chapter08/src/routingApp/index.js b/chapter08/src/routingApp/index.js index a88e205..f59006e 100644 --- a/chapter08/src/routingApp/index.js +++ b/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 }; diff --git a/chapter08/src/routingApp/login.component.js b/chapter08/src/routingApp/login.component.js index 26f90bb..2a6df9a 100644 --- a/chapter08/src/routingApp/login.component.js +++ b/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 ; + return ( + + ); } else { return (
diff --git a/chapter08/src/routingApp/protectedRoutes.component.js b/chapter08/src/routingApp/protectedRoutes.component.js new file mode 100644 index 0000000..8f0138b --- /dev/null +++ b/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 + ) : ( + + ); + } +} diff --git a/chapter08/src/routingApp/protectedRoutes.connected.js b/chapter08/src/routingApp/protectedRoutes.connected.js new file mode 100644 index 0000000..1b3a5f4 --- /dev/null +++ b/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);