text: // frontend/src/components/dashboard/Dashboard.js
  
  import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { withRouter } from "react-router-dom";
  
  import { Container, Navbar, Nav } from "react-bootstrap";
  import { logout } from "../login/LoginActions";
  
  import NotesList from "../notes/NotesList";
  import AddNote from "../notes/AddNote";
  
  class Dashboard extends Component {
    onLogout = () => {
      this.props.logout();
    };
  
    render() {
      const { user } = this.props.auth;
      return (
        <div>
          <Navbar bg="light">
            <Navbar.Brand href="/">Home</Navbar.Brand>
            <Navbar.Toggle />
            <Navbar.Collapse className="justify-content-end">
              <Navbar.Text>
                User: <b>{user.username}</b>
              </Navbar.Text>
              <Nav.Link onClick={this.onLogout}>Logout</Nav.Link>
            </Navbar.Collapse>
          </Navbar>
          <Container>
            <NotesList />
            <AddNote />
          </Container>
        </div>
      );
    }
  }
  
  Dashboard.propTypes = {
    logout: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state => ({
    auth: state.auth
  });
  
  export default connect(mapStateToProps, {
    logout
  })(withRouter(Dashboard));
  