diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js index 8656ef0..b917566 100644 --- a/twistter-frontend/src/App.js +++ b/twistter-frontend/src/App.js @@ -12,6 +12,11 @@ import store from "./redux/store"; import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'; import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; import themeObject from './util/theme'; +import { SET_AUTHENTICATED } from './redux/types'; +import { logoutUser, getUserData } from './redux/actions/userActions'; + +// Components +import AuthRoute from "./util/AuthRoute"; // Pages import home from './pages/Home'; @@ -21,24 +26,23 @@ import user from './pages/user'; import writeMicroblog from "./Writing_Microblogs.js"; import edit from "./pages/edit.js"; import userLine from "./Userline.js"; +import axios from "axios"; -// Components -import AuthRoute from "./util/AuthRoute"; - -let authenticated; +const theme = createMuiTheme(themeObject); const token = localStorage.FBIdToken; if (token) { const decodedToken = jwtDecode(token); if (decodedToken.exp * 1000 < Date.now()) { + store.dispatch(logoutUser); window.location.href = "/login"; - authenticated = false; } else { - authenticated = true; + store.dispatch({ type: SET_AUTHENTICATED }); + axios.defaults.headers.common['Authorization'] = token; + store.dispatch(getUserData()); } } -const theme = createMuiTheme(themeObject); class App extends Component { render() { @@ -52,22 +56,16 @@ class App extends Component {
- {/* */} - - + {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */} + + - - - - + + + + - {/* - - - - - */}
diff --git a/twistter-frontend/src/pages/Login.js b/twistter-frontend/src/pages/Login.js index 9492372..5453b11 100644 --- a/twistter-frontend/src/pages/Login.js +++ b/twistter-frontend/src/pages/Login.js @@ -1,7 +1,6 @@ /* eslint-disable */ import React, { Component } from 'react'; import '../App.css'; -import axios from 'axios'; import PropTypes from 'prop-types'; import logo from '../images/twistter-logo.png'; @@ -157,6 +156,8 @@ export class Login extends Component { } } +// Proptypes just confirms that all data in it exists and is of the type that it +// is declared to be Login.propTypes = { classes: PropTypes.object.isRequired, loginUser: PropTypes.func.isRequired, @@ -176,5 +177,7 @@ Login.propTypes = { classes: PropTypes.object.isRequired }; +// This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it +// The state contains info about the current logged in user export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Login)); diff --git a/twistter-frontend/src/util/AuthRoute.js b/twistter-frontend/src/util/AuthRoute.js index f2d9bc2..db4eb36 100644 --- a/twistter-frontend/src/util/AuthRoute.js +++ b/twistter-frontend/src/util/AuthRoute.js @@ -7,7 +7,7 @@ const AuthRoute = ({ component: Component, authenticated, ...rest }) => ( - authenticated === true ? : + authenticated === true ? : } /> );