0.0.3

- Clean up login/redirect flow
- Add redirect when not authed on other endpoints
- Add GET /stats endpoint for overal stats

web/src/Components/HomeBanner.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import '../App.css';
+import './HomeBanner.css';
+import { getStats } from '../Actions/api';
+
+class HomeBanner extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      userCount: 0,
+      scrobbleCount: 0,
+      trackCount: 0,
+      artistCount: 0,
+    };
+  }
+
+  componentDidMount() {
+    getStats()
+    // .then((data) => {
+    //   this.setState({
+    //     loading: false,
+    //     userCount: data.users,
+    //     scrobbleCount: data.scrobbles,
+    //     trackCount: data.tracks,
+    //     artistCount: data.artists,
+    //   });
+    // })
+    // .catch(() => {
+    //   this.setState({
+    //     loading: false
+    //   });
+    // });
+  }
+
+  render() {
+    return (
+      <div className="container">
+      </div>
+    );
+  }
+}
+
+export default HomeBanner;

web/src/Components/Navigation.js

@@ -5,6 +5,12 @@ import logo from '../logo.png';
 import './Navigation.css';
 import { connect } from 'react-redux';
 import { logout } from '../Actions/auth';
+import eventBus from "../Actions/eventBus";
+
+import {
+  LOGIN_SUCCESS,
+  LOGOUT,
+} from "../Actions/types";
 
 const menuItems = [
   'Home',
@@ -24,32 +30,62 @@ class Navigation extends Component {
   }
 
   componentDidMount() {
-    const isLoggedIn = this.props.isLoggedIn;
-
+    const { isLoggedIn } = this.props;
     if (isLoggedIn) {
       this.setState({
         isLoggedIn: true,
       });
     }
+
+    eventBus.on(LOGIN_SUCCESS, () =>
+      this.setState({ isLoggedIn: true })
+    );
+
+    eventBus.on(LOGOUT, () =>
+      this.setState({ isLoggedIn: false })
+    );
   }
 
+  componentWillUnmount() {
+    eventBus.remove(LOGIN_SUCCESS);
+    eventBus.remove(LOGOUT);
+  }
+
+
   _handleClick(menuItem) {
     this.setState({ active: menuItem });
   }
 
+
   render() {
     const activeStyle = { color: '#FFFFFF' };
 
     const renderAuthButtons = () => {
       if (this.state.isLoggedIn) {
         return <div className="navLinkLogin">
-                <Link to="/profile" className="navLink">Profile</Link>
+                <Link
+                  to="/profile"
+                  style={this.state.active === "profile" ? activeStyle : {}}
+                  onClick={this._handleClick.bind(this, "profile")}
+                  className="navLink"
+                >Profile</Link>
                 <Link to="/" className="navLink" onClick={logout()}>Logout</Link>
               </div>;
       } else {
         return <div className="navLinkLogin">
-                <Link to="/login" className="navLink">Login</Link>
-                <Link to="/register" className="navLink" history={this.props.history}>Register</Link>
+                <Link
+                  to="/login"
+                  style={this.state.active === "login" ? activeStyle : {}}
+                  onClick={this._handleClick.bind(this, "login")}
+                  className="navLink"
+                >Login</Link>
+                <Link
+                  to="/register"
+                  className="navLink"
+                  style={this.state.active === "register" ? activeStyle : {}}
+                  onClick={this._handleClick.bind(this, "register")}
+                  history={this.props.history}
+                >Register</Link>
               </div>;
       }
     }
@@ -89,7 +125,7 @@ class Navigation extends Component {
     return (
       <div>
         <Navbar color="dark" dark fixed="top">
-          <NavbarBrand href="/" className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
+          <NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
           {renderMenuButtons()}
           {renderAuthButtons()}
         </Navbar>