Get login prototyped

web/package-lock.json

@@ -8,6 +8,7 @@
       "name": "goscrobble",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^1.5.0",
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^11.2.5",
         "@testing-library/user-event": "^12.8.3",
@@ -15,6 +16,7 @@
         "react": "^17.0.2",
         "react-bootstrap": "^1.5.2",
         "react-dom": "^17.0.2",
+        "react-redux": "^7.2.3",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
         "reactstrap": "^8.9.0",
@@ -2391,6 +2393,17 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
+      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
+      "dependencies": {
+        "immer": "^8.0.0",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      }
+    },
     "node_modules/@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -3022,6 +3035,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -3117,6 +3139,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
+      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -16252,6 +16285,36 @@
         "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-redux": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.3.tgz",
+      "integrity": "sha512-ZhAmQ1lrK+Pyi0ZXNMUZuYxYAZd59wFuVDGUt536kSGdD0ya9Q7BfsE95E3TsFLE3kOSFp5m6G5qbatE+Ic1+w==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/react-redux": "^7.1.16",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17",
+        "redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -16651,6 +16714,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16943,6 +17020,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "node_modules/reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "node_modules/resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -18892,6 +18974,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -23697,6 +23787,17 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
       "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
     },
+    "@reduxjs/toolkit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
+      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
+      "requires": {
+        "immer": "^8.0.0",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      }
+    },
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -24156,6 +24257,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -24251,6 +24361,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-redux": {
+      "version": "7.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
+      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -34536,6 +34657,26 @@
         "warning": "^4.0.2"
       }
     },
+    "react-redux": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.3.tgz",
+      "integrity": "sha512-ZhAmQ1lrK+Pyi0ZXNMUZuYxYAZd59wFuVDGUt536kSGdD0ya9Q7BfsE95E3TsFLE3kOSFp5m6G5qbatE+Ic1+w==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/react-redux": "^7.1.16",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -34857,6 +34998,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -35083,6 +35238,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -36650,6 +36810,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
@@ -10,6 +11,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "reactstrap": "^8.9.0",

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) {
+function mapDispatchToProps(dispatch) {
-    return <Login />
+  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 = () => {
+const menuItems = [
-    return (
+  'Home',
-    <div>
+  'About',
-      <Navbar color="dark" dark fixed="top">
+];
-        <NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
+
-        <Link class="navLink" to="/">Home</Link>
+class Navigation extends Component {
-        <Link class="navLink" to="/about">About</Link>
+    constructor(props) {
-      </Navbar>
+      super(props);
-    </div>
+      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>
+  <Provider store={store}>
-    <App />
+    <BrowserRouter>
-  </BrowserRouter>,
+      <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );

web/src/store.js

@@ -0,0 +1 @@
+