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 ? :
}
/>
);