Logout is working now : )

twistter-frontend/src/App.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import React, { Component } from "react";
 import "./App.css";
+import axios from "axios";
 
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Navbar from "./components/layout/NavBar";
@@ -26,7 +27,7 @@ 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";
+import logout from './pages/Logout';
 
 const theme = createMuiTheme(themeObject);
 
@@ -59,6 +60,7 @@ class App extends Component {
               {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
               <AuthRoute exact path="/signup" component={signup} />
               <AuthRoute exact path="/login" component={login} />
+              <Route exact path="/logout" component={logout} />
 
               <Route exact path="/user" component={user} />
               <Route exact path="/home" component={writeMicroblog} />

twistter-frontend/src/Logout.js

@@ -1,22 +0,0 @@
-/* eslint-disable */
-import React, { Component} from 'react';
-import './App.css';
-import logo from './images/twistter-logo.png';
-import TextField from '@material-ui/core/TextField';
-
-class Logout extends Component {
-  render() {
-    return(
-      <div>
-	    <img src={logo} className="app-logo" alt="logo" />
-      <br/><br/>
-	    <b>Logout of your Twistter Account</b>
-      <br/><br/>
-      <br/><br/>
-	    <button className="authButtons signup" type="submit">Sign Out</button>
-      </div>
-    );
-  };
-}
-
-export default Logout;

twistter-frontend/src/components/layout/NavBar.js

@@ -1,12 +1,43 @@
 /* eslint-disable */
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
+// import PropTypes from 'prop-types';
+
+// Material UI stuff
 import AppBar from '@material-ui/core/AppBar';
 import ToolBar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
+import withStyles from "@material-ui/core/styles/withStyles";
 
-export class Navbar extends Component {
-    render() {
+// Redux stuff
+// import { logoutUser } from '../../redux/actions/userActions';
+// import { connect } from 'react-redux';
+
+// const styles = {
+//     form: {
+//       textAlign: "center"
+//     },
+//     textField: {
+//       marginBottom: 30
+//     },
+//     pageTitle: {
+//       marginBottom: 40
+//     },
+//     button: {
+//       positon: "relative",
+//       marginBottom: 30
+//     },
+//     progress: {
+//       position: "absolute"
+//     }
+//   };
+
+
+
+
+  
+  export class Navbar extends Component {
+      render() {
         return (
             <AppBar>
                 <ToolBar>
@@ -28,4 +59,18 @@ export class Navbar extends Component {
     }
 }
 
+// const mapStateToProps = (state) => ({
+//     user: state.user
+// })
+
+// const mapActionsToProps = { logoutUser };
+
+// Navbar.propTypes = {
+//     logoutUser: PropTypes.func.isRequired,
+//     user: PropTypes.object.isRequired,
+//     classes: PropTypes.object.isRequired
+// }
+
+// export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Navbar));
+
 export default Navbar;

twistter-frontend/src/pages/Login.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import '../App.css';
+// import '../App.css';
 import PropTypes from 'prop-types';
 
 import logo from '../images/twistter-logo.png';
@@ -173,6 +173,7 @@ const mapStateToProps = (state) => ({
 const mapActionsToProps = {
   loginUser
 }
+
 Login.propTypes = {
   classes: PropTypes.object.isRequired
 };

twistter-frontend/src/pages/Logout.js

@@ -0,0 +1,56 @@
+/* eslint-disable */
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+// Material UI stuff
+import Button from "@material-ui/core/Button";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+// Redux stuff
+import { logoutUser } from "../redux/actions/userActions";
+import { connect } from "react-redux";
+
+const styles = {
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
+
+export class Logout extends Component {
+
+  componentDidMount() {
+    this.props.logoutUser();
+    this.props.history.push('/');
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  user: state.user
+});
+
+const mapActionsToProps = { logoutUser };
+
+Logout.propTypes = {
+  logoutUser: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Logout));

twistter-frontend/src/pages/Signup.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import '../App.css';
+// import '../App.css';
 import PropTypes from 'prop-types';
 
 import logo from '../images/twistter-logo.png';
@@ -42,8 +42,10 @@ export class Signup extends Component {
   constructor() {
     super();
     this.state = {
+      handle: "",
       email: "",
       password:"",
+      confirmPassword: "",
       errors: {}
     };
   }
@@ -60,8 +62,10 @@ export class Signup extends Component {
   handleSubmit = (event) => {
     event.preventDefault();
     const signupData = {
+      handle: this.state.handle,
       email: this.state.email,
       password: this.state.password,
+      confirmPassword: this.state.confirmPassword
     };
     this.props.signupUser(signupData, this.props.history);
   };
@@ -88,7 +92,7 @@ export class Signup extends Component {
         <Grid item sm>
         <img src={logo} className="app-logo" alt="logo" />
           <Typography variant="h2" className={classes.pageTitle}>
-            Log in to Twistter
+            Create a new account
           </Typography>
           <form noValidate onSubmit={this.handleSubmit}>
             <TextField
@@ -156,6 +160,7 @@ const mapStateToProps = (state) => ({
 const mapActionsToProps = {
   signupUser
 }
+
 Signup.propTypes = {
   classes: PropTypes.object.isRequired
 };