mirror of
https://github.com/idanoo/GoScrobble
synced 2025-07-03 14:42:18 +00:00
0.0.7
- Switch redux -> Context - Remove excess packages
This commit is contained in:
parent
ebd88b3bb0
commit
65c092e4ee
GPG key ID:
387387CDBC02F132
14 changed files with 293 additions and 397 deletions
|
|
@ -1,10 +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 logout from '../Contexts/AuthContextProvider';
|
||||
import AuthContext from '../Contexts/AuthContext';
|
||||
|
||||
const menuItems = [
|
||||
'Home',
|
||||
|
|
@ -20,178 +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);
|
||||
|
||||
}
|
||||
|
||||
_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 <Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
|
||||
<Collapse isOpen={!this.state.collapsed} navbar>
|
||||
{this.state.isLoggedIn ?
|
||||
<Nav className="navLinkLoginMobile" navbar>
|
||||
{loggedInMenuItems.map(menuItem =>
|
||||
const renderMobileNav = () => {
|
||||
return <Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
|
||||
<NavbarToggler onClick={setCollapsed(!collapsed)} className="mr-2" />
|
||||
<Collapse isOpen={!collapsed} navbar>
|
||||
{user ?
|
||||
<Nav className="navLinkLoginMobile" navbar>
|
||||
{loggedInMenuItems.map(menuItem =>
|
||||
<NavItem>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLinkMobile"
|
||||
style={active === menuItem ? activeStyle : {}}
|
||||
to={menuItem}
|
||||
>{menuItem}</Link>
|
||||
</NavItem>
|
||||
)}
|
||||
<Link
|
||||
to="/profile"
|
||||
style={active === "profile" ? activeStyle : {}}
|
||||
className="navLinkMobile"
|
||||
>Profile</Link>
|
||||
<Link to="/" className="navLink" onClick={Logout}>Logout</Link>
|
||||
</Nav>
|
||||
: <Nav className="navLinkLoginMobile" navbar>
|
||||
{menuItems.map(menuItem =>
|
||||
<NavItem>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLinkMobile"
|
||||
style={active === menuItem ? activeStyle : {}}
|
||||
to={menuItem === "Home" ? "/" : menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
</NavItem>
|
||||
)}
|
||||
<NavItem>
|
||||
<Link
|
||||
key={menuItem}
|
||||
to="/Login"
|
||||
style={active === "Login" ? activeStyle : {}}
|
||||
className="navLinkMobile"
|
||||
style={this.state.active === menuItem ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, menuItem)}
|
||||
to={menuItem}
|
||||
>{menuItem}</Link>
|
||||
>Login</Link>
|
||||
</NavItem>
|
||||
)}
|
||||
<NavItem>
|
||||
<Link
|
||||
to="/Register"
|
||||
className="navLinkMobile"
|
||||
style={active === "Register" ? activeStyle : {}}
|
||||
>Register</Link>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
}
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
}
|
||||
|
||||
const renderDesktopNav = () => {
|
||||
return <Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
|
||||
{user ?
|
||||
<div>
|
||||
{loggedInMenuItems.map(menuItem =>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLink"
|
||||
style={active === menuItem ? activeStyle : {}}
|
||||
to={menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
: <div>
|
||||
{menuItems.map(menuItem =>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLink"
|
||||
style={active === menuItem ? activeStyle : {}}
|
||||
to={menuItem === "Home" ? "/" : menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
{user ?
|
||||
<div className="navLinkLogin">
|
||||
<Link
|
||||
to="/profile"
|
||||
style={this.state.active === "profile" ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, "profile")}
|
||||
className="navLinkMobile"
|
||||
>Profile</Link>
|
||||
<Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
|
||||
</Nav>
|
||||
: <Nav className="navLinkLoginMobile" navbar>
|
||||
{menuItems.map(menuItem =>
|
||||
<NavItem>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLinkMobile"
|
||||
style={this.state.active === menuItem ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, menuItem)}
|
||||
to={menuItem === "Home" ? "/" : menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
</NavItem>
|
||||
)}
|
||||
<NavItem>
|
||||
<Link
|
||||
to="/login"
|
||||
style={this.state.active === "login" ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, "login")}
|
||||
className="navLinkMobile"
|
||||
>Login</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link
|
||||
to="/register"
|
||||
className="navLinkMobile"
|
||||
style={this.state.active === "register" ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, "register")}
|
||||
history={this.props.history}
|
||||
>Register</Link>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
}
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
}
|
||||
|
||||
const renderDesktopNav = () => {
|
||||
return <Navbar color="dark" dark fixed="top">
|
||||
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
|
||||
{this.state.isLoggedIn ?
|
||||
<div>
|
||||
{loggedInMenuItems.map(menuItem =>
|
||||
<Link
|
||||
key={menuItem}
|
||||
style={active === "profile" ? activeStyle : {}}
|
||||
className="navLink"
|
||||
style={this.state.active === menuItem ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, menuItem)}
|
||||
to={menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
: <div>
|
||||
{menuItems.map(menuItem =>
|
||||
<Link
|
||||
key={menuItem}
|
||||
className="navLink"
|
||||
style={this.state.active === menuItem ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, menuItem)}
|
||||
to={menuItem === "Home" ? "/" : menuItem}
|
||||
>
|
||||
{menuItem}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
{this.state.isLoggedIn ?
|
||||
<div className="navLinkLogin">
|
||||
<Link
|
||||
to="/profile"
|
||||
style={this.state.active === "profile" ? activeStyle : {}}
|
||||
onClick={this._handleClick.bind(this, "profile")}
|
||||
className="navLink"
|
||||
>Profile</Link>
|
||||
<Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
|
||||
</div>
|
||||
:
|
||||
<div className="navLinkLogin">
|
||||
<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>
|
||||
>{user.username}</Link>
|
||||
<Link to="/" className="navLink" onClick={Logout}>Logout</Link>
|
||||
</div>
|
||||
:
|
||||
<div className="navLinkLogin">
|
||||
<Link
|
||||
to="/login"
|
||||
style={active === "login" ? activeStyle : {}}
|
||||
className="navLink"
|
||||
>Login</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
className="navLink"
|
||||
style={active === "register" ? activeStyle : {}}
|
||||
>Register</Link>
|
||||
</div>
|
||||
|
||||
}
|
||||
</Navbar>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
isMobile()
|
||||
? renderMobileNav()
|
||||
: renderDesktopNav()
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</Navbar>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
isMobile()
|
||||
? renderMobileNav()
|
||||
: renderDesktopNav()
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
<table border={1} cellPadding={5}>
|
||||
|
|
@ -23,8 +14,8 @@ class ScrobbleTable extends React.Component {
|
|||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
this.state.data && this.state.data.items &&
|
||||
this.state.data.items.map(function (element) {
|
||||
props.data && props.data.items &&
|
||||
props.data.items.map(function (element) {
|
||||
return <tr>
|
||||
<td>{element.time}</td>
|
||||
<td>{element.track}</td>
|
||||
|
|
@ -37,7 +28,6 @@ class ScrobbleTable extends React.Component {
|
|||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ScrobbleTable;
|
||||
Loading…
Add table
Add a link
Reference in a new issue