Logout is working ^_^

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
+const theme = createMuiTheme(themeObject);
-import AuthRoute from "./util/AuthRoute";
-
-let authenticated;
 
 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 {
 
             <div className="app">
               <Switch>
-              {/* <AuthRoute exact path="/" component={home} authenticated={authenticated}/> */}
+              {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
-              <AuthRoute exact path="/register" component={register} authenticated={authenticated}/>
+              <AuthRoute exact path="/register" component={register} />
-              <AuthRoute exact path="/login" component={login} authenticated={authenticated}/>
+              <AuthRoute exact path="/login" component={login} />
 
-              <AuthRoute exact path="/user" component={user} authenticated={authenticated}/>
+              <Route exact path="/user" component={user} />
-              <AuthRoute exact path="/home" component={writeMicroblog} authenticated={authenticated}/>
+              <Route exact path="/home" component={writeMicroblog} />
-              <AuthRoute exact path="/edit" component={edit} authenticated={authenticated}/>
+              <Route exact path="/edit" component={edit} />
-              <AuthRoute exact path="/user" component={userLine} authenticated={authenticated}/>
+              <Route exact path="/user" component={userLine} />
 
               <Route exact path="/" component={home}/>
-              {/* <Route exact path="/register" component={register}/>
-              <Route exact path="/login" component={login}/>
-              <Route exact path="/user" component={user}/>
-              <Route exact path="/home" component={writeMicroblog}/>
-              <Route exact path="/edit" component={edit}/>
-              <Route exact path="/user" component={userLine}/> */}
               </Switch>
             </div>
 

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));

twistter-frontend/src/util/AuthRoute.js

@@ -7,7 +7,7 @@ const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
   <Route
     {...rest}
     render={(props) =>
-      authenticated === true ? <Redirect to="/" /> : <Component {...props} />
+      authenticated === true ? <Redirect to="/home" /> : <Component {...props} />
     }
   />
 );