121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
import {
|
|
Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink
|
|
} from 'reactstrap';
|
|
import {connect} from 'react-redux';
|
|
import React, {useRef, useEffect, useState} from 'react';
|
|
|
|
import {logout} from '../api';
|
|
import {notify} from 'react-notify-toast';
|
|
import {Timer} from './Timer';
|
|
|
|
export class TurniereNavigation extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.toggle = this.toggle.bind(this);
|
|
this.togglerRef = React.createRef();
|
|
this.state = {
|
|
collapsed: true,
|
|
isToggleVisible: true
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
this.setState({isToggleVisible: entry.isIntersecting});
|
|
},
|
|
{threshold: 0.1}
|
|
);
|
|
|
|
if (this.togglerRef.current) {
|
|
observer.observe(this.togglerRef.current);
|
|
}
|
|
|
|
this.observer = observer;
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.observer) {
|
|
this.observer.disconnect();
|
|
}
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({collapsed: !this.state.collapsed});
|
|
}
|
|
|
|
render() {
|
|
const {tournament} = this.props;
|
|
const {isToggleVisible} = this.state;
|
|
|
|
return (
|
|
<Navbar color="light" light expand="lg" sticky="top">
|
|
<NavbarBrand className={'hide-below-260-w'} href="/">turnie.re</NavbarBrand>
|
|
{tournament && tournament.timerEnd &&
|
|
<NavbarText className="m-auto">
|
|
<span className={'hide-below-340-w'}>Spielzeit: </span><Timer timerEnd={tournament.timerEnd}/>
|
|
</NavbarText>
|
|
}
|
|
{isToggleVisible && <NavbarText>HALLO WELT</NavbarText>}
|
|
<NavbarToggler ref={this.togglerRef} onClick={this.toggle}/>
|
|
<Collapse isOpen={!this.state.collapsed} navbar>
|
|
<NavLinks/>
|
|
<div className="ms-auto">
|
|
<LoginLogoutButtons/>
|
|
</div>
|
|
</Collapse>
|
|
</Navbar>
|
|
);
|
|
}
|
|
}
|
|
|
|
function Navlink(props) {
|
|
return (<NavItem active={true}>
|
|
<NavLink href={props.target}>{props.text}</NavLink>
|
|
</NavItem>);
|
|
}
|
|
|
|
class SmartNavLinks extends React.Component {
|
|
render() {
|
|
return (<Nav navbar className="mr-auto">
|
|
<Navlink target="/create" text="Turnier erstellen"/>
|
|
<Navlink target="/list" text="Öffentliche Turniere"/>
|
|
{this.props.isSignedIn && <Navlink target="/private" text="Private Turniere"/>}
|
|
<Navlink target="/faq" text="FAQ"/>
|
|
</Nav>);
|
|
}
|
|
}
|
|
|
|
class InvisibleLoginLogoutButtons extends React.Component {
|
|
logout() {
|
|
logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
|
|
}
|
|
|
|
render() {
|
|
const {isSignedIn, username} = this.props;
|
|
|
|
if (isSignedIn) {
|
|
return (<ButtonGroup className="nav-item">
|
|
<Button outline color="success" href="/profile"
|
|
className="navbar-btn my-2 my-sm-0 px-5">{username}</Button>
|
|
<Button outline color="success" onClick={this.logout.bind(this)}
|
|
className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
|
|
</ButtonGroup>);
|
|
} else {
|
|
return (<ButtonGroup className="nav-item">
|
|
<Button outline color="success" href="/login"
|
|
className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
|
|
</ButtonGroup>);
|
|
}
|
|
}
|
|
}
|
|
|
|
const mapStateToUserinfo = state => {
|
|
const {isSignedIn, username} = state.userinfo;
|
|
return {isSignedIn, username};
|
|
};
|
|
|
|
const LoginLogoutButtons = connect(mapStateToUserinfo)(InvisibleLoginLogoutButtons);
|
|
|
|
const NavLinks = connect(mapStateToUserinfo)(SmartNavLinks);
|