Get login prototyped

web/src/App.js

@@ -1,17 +1,27 @@
 import './App.css';
 import Home from './Components/Pages/Home';
 import About from './Components/Pages/About';
-import Login from './Components/Pages/Login';
 import Navigation from './Components/Pages/Navigation';
 import { Route, Switch, HashRouter } from 'react-router-dom';
+import { connect } from "react-redux";
+
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
-function App() {
+function mapStateToProps(state) {
+  return {
+    isLoggedIn: state
+  };
+}
 
-  if (!true) {
-    return <Login />
-  }
+function mapDispatchToProps(dispatch) {
+  return {
+    logIn: () => dispatch({type: true}),
+    logOut: () => dispatch({type: false})
+  };
 
+}
+
+const App = (props) => {
   return (
     <HashRouter>
       <div className="wrapper">
@@ -22,16 +32,7 @@ function App() {
         </Switch>
       </div>
       </HashRouter>
-      // <div className="App">
-      //   <Router>
-      //     <Navigation/>
-      //     <Switch>
-      //       <Route exact path='/' component={Home}/>
-      //       <Route path='/about' component={About}/>
-      //     </Switch>
-      //   </Router>
-      // </div>
   );
 }
 
-export default App;
+export default connect(mapStateToProps, mapDispatchToProps)(App);

web/src/Components/Pages/Navigation.css

@@ -1,5 +1,5 @@
 .navLink {
-    padding: 10px;
+    padding: 0 15px 0 15px;
     color: #CCCCCC;
 }
 

web/src/Components/Pages/Navigation.js

@@ -1,18 +1,59 @@
-import React from 'react';
+import { React, Component } from 'react';
 import { Navbar, NavbarBrand } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import './Navigation.css';
 
-const Navigation = () => {
-    return (
-    <div>
-      <Navbar color="dark" dark fixed="top">
-        <NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
-        <Link class="navLink" to="/">Home</Link>
-        <Link class="navLink" to="/about">About</Link>
-      </Navbar>
-    </div>
-    );
-}
+const menuItems = [
+  'Home',
+  'About',
+];
+
+class Navigation extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { isLoggedIn: false };
+    }
+
+    toggleLogin() {
+      this.setState({ isLoggedIn: !this.state.isLoggedIn })
+    }
+
+    _handleClick(menuItem) {
+      this.setState({ active: menuItem });
+    }
+
+    render() {
+      const activeStyle = { color: '#FFF' };
+
+      const renderAuthButton = () => {
+        if (this.state.isLoggedIn) {
+          return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Logout</Link>;
+        } else {
+          return <Link class="navLink" onClick={this.toggleLogin.bind(this)}>Login</Link>;
+        }
+      }
+
+      return (
+        <div>
+          <Navbar color="dark" dark fixed="top">
+            <NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
+            {menuItems.map(menuItem =>
+            <Link
+              class="navLink"
+              style={this.state.active === menuItem ? activeStyle : {}}
+             onClick={this._handleClick.bind(this, menuItem)}
+            >
+              {menuItem}
+            </Link>
+         )}
+
+            <Link class="navLink" to="/">Home</Link>
+            <Link class="navLink" to="/about">About</Link>
+            {renderAuthButton()}
+          </Navbar>
+        </div>
+      );
+    }
+  }
 
 export default Navigation;

web/src/index.js

@@ -4,9 +4,20 @@ import './index.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom'
 
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+
+const goScorbbleStore = (state = false, logIn) => {
+  return state = logIn
+};
+
+const store = createStore(goScorbbleStore);
+
 ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );

web/src/store.js

@@ -0,0 +1 @@
+