Make NavBar display login/signup/logout correctly

This commit is contained in:
Clayton Wilson 2019-10-24 22:38:42 -04:00
parent 64c10cd172
commit 021e25de86

View File

@ -1,7 +1,7 @@
/* eslint-disable */ /* eslint-disable */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// Material UI stuff // Material UI stuff
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
@ -11,26 +11,26 @@ import withStyles from "@material-ui/core/styles/withStyles";
// Redux stuff // Redux stuff
// import { logoutUser } from '../../redux/actions/userActions'; // import { logoutUser } from '../../redux/actions/userActions';
// import { connect } from 'react-redux'; import { connect } from 'react-redux';
// const styles = { const styles = {
// form: { form: {
// textAlign: "center" textAlign: "center"
// }, },
// textField: { textField: {
// marginBottom: 30 marginBottom: 30
// }, },
// pageTitle: { pageTitle: {
// marginBottom: 40 marginBottom: 40
// }, },
// button: { button: {
// positon: "relative", positon: "relative",
// marginBottom: 30 marginBottom: 30
// }, },
// progress: { progress: {
// position: "absolute" position: "absolute"
// } }
// }; };
@ -38,42 +38,44 @@ import withStyles from "@material-ui/core/styles/withStyles";
export class Navbar extends Component { export class Navbar extends Component {
render() { render() {
const authenticated = this.props.user.authenticated;
return ( return (
<AppBar> <AppBar>
<ToolBar> <ToolBar>
<Button component={ Link } to='/'> <Button component={ Link } to='/'>
Home Home
</Button> </Button>
<Button component={ Link } to='/login'> {!authenticated && <Button component={ Link } to='/login'>
Login Login
</Button> </Button>}
<Button component={ Link } to='/signup'> {!authenticated && <Button component={ Link } to='/signup'>
Sign Up Sign Up
</Button> </Button>}
<Button component={ Link } to='/logout'> {authenticated && <Button component={ Link } to='/logout'>
Logout Logout
</Button> </Button>}
<Button component={ Link } to='/delete'> {/* Commented out the delete button, because it should probably go on
the profile or editProfile page instead of the NavBar */}
{/* <Button component={ Link } to='/delete'>
Delete Account Delete Account
</Button> </Button> */}
</ToolBar> </ToolBar>
</AppBar> </AppBar>
) )
} }
} }
// const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
// user: state.user user: state.user
// }) })
// const mapActionsToProps = { logoutUser }; // const mapActionsToProps = { logoutUser };
// Navbar.propTypes = { Navbar.propTypes = {
// logoutUser: PropTypes.func.isRequired, user: PropTypes.object.isRequired,
// user: PropTypes.object.isRequired, classes: PropTypes.object.isRequired
// classes: PropTypes.object.isRequired }
// }
// export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Navbar)); export default connect(mapStateToProps)(withStyles(styles)(Navbar));
export default Navbar; // export default Navbar;