- {this.state.isLoading
- ?
Scrobbles -
- Scrobbles -
- {this.state.isLoading
- ?
Users -
- Users -
- {this.state.isLoading
- ?
Tracks -
- Tracks -
- {this.state.isLoading
- ?
Artists -
+ return (
+ Artists -
+
+ );
}
export default HomeBanner;
diff --git a/web/src/Components/Navigation.js b/web/src/Components/Navigation.js
index f8f93239..5c3ea871 100644
--- a/web/src/Components/Navigation.js
+++ b/web/src/Components/Navigation.js
@@ -1,16 +1,10 @@
-import { React, Component } from 'react';
+import { React, useState, useContext } from 'react';
import { Navbar, NavbarBrand, Collapse, Nav, NavbarToggler, NavItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
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";
+import AuthContext from '../Contexts/AuthContext';
const menuItems = [
'Home',
@@ -26,197 +20,141 @@ const isMobile = () => {
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
};
-class Navigation extends Component {
- constructor(props) {
- super(props);
- this.toggleNavbar = this.toggleNavbar.bind(this);
- this.handleLogout = this.handleLogout.bind(this);
+const Navigation = () => {
+ const location = useLocation();
- // Yeah I know you might not hit home.. but I can't get the
- // path based finder thing working on initial load :sweatsmile:
- this.state = { active: "Home", collapsed: true };
+ // Lovely hack to highlight the current page (:
+ let active = "Home"
+ if (location && location.pathname && location.pathname.length > 1) {
+ active = location.pathname.replace(/\//, "");
}
- componentDidMount() {
- const { isLoggedIn } = this.props;
- if (isLoggedIn) {
- this.setState({
- isLoggedIn: true,
- });
- }
+ let activeStyle = { color: '#FFFFFF' };
+ let { user, Logout } = useContext(AuthContext);
+ let [collapsed, setCollapsed] = useState(true);
- eventBus.on(LOGIN_SUCCESS, () =>
- this.setState({ isLoggedIn: true })
- );
-
- eventBus.on(LOGOUT, () =>
- this.setState({ isLoggedIn: false })
- );
- }
-
- componentWillUnmount() {
- eventBus.remove(LOGIN_SUCCESS);
- }
-
- _handleClick(menuItem) {
- this.setState({ active: menuItem, collapsed: !this.state.collapsed });
- }
-
- handleLogout() {
- this.dispatch(logout());
- }
-
- toggleNavbar() {
- this.setState({ collapsed: !this.state.collapsed });
- }
-
- // This is a real mess. TO CLEAN UP.
- render() {
- const activeStyle = { color: '#FFFFFF' };
-
- const renderMobileNav = () => {
- return
+ {isLoading
+ ?
Scrobbles
- );
- }
+ Scrobbles
+ {isLoading
+ ?
Users +
+ Users +
+ {isLoading
+ ?
Tracks +
+ Tracks +
+ {isLoading
+ ?
Artists +
+ Artists +
+ {
+ isMobile()
+ ? renderMobileNav()
+ : renderDesktopNav()
+ }
+
+ );
}
-function mapStateToProps(state) {
- const { isLoggedIn } = state.auth;
-
- return {
- isLoggedIn
- };
-}
-
-export default connect(mapStateToProps)(Navigation);
\ No newline at end of file
+export default Navigation;
\ No newline at end of file
diff --git a/web/src/Components/ScrobbleTable.js b/web/src/Components/ScrobbleTable.js
index c15e6e93..57507072 100644
--- a/web/src/Components/ScrobbleTable.js
+++ b/web/src/Components/ScrobbleTable.js
@@ -1,15 +1,6 @@
import React from "react";
-class ScrobbleTable extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- data: this.props.data,
- };
- }
-
- render() {
+const ScrobbleTable = (props) => {
return (
| {element.time} | {element.track} | @@ -37,7 +28,6 @@ class ScrobbleTable extends React.Component {