r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Refactor Nav

Browse source
This commit is contained in:
Andrew Nicolaou 2019-09-11 19:06:30 +02:00
parent 8ac95c0084
commit 611730c289
1 changed files with 393 additions and 364 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
client/components/Nav.jsx
View file

@ -217,31 +217,8 @@ class Nav extends React.PureComponent {
this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10); this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
} }
render() { renderProjectMenu(navDropdownState) {
const navDropdownState = {
file: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'file'
}),
edit: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'edit'
}),
sketch: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'sketch'
}),
help: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'help'
}),
account: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'account'
})
};
return ( return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
<ul className="nav__items-left" title="project-menu"> <ul className="nav__items-left" title="project-menu">
<li className="nav__item-logo"> <li className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" /> <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
@ -528,7 +505,11 @@ class Nav extends React.PureComponent {
</ul> </ul>
</li> </li>
</ul> </ul>
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated && );
}
renderUnauthenticatedUserMenu(navDropdownState) {
return (
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li> <li>
<Link to="/login"> <Link to="/login">
@ -541,8 +522,12 @@ class Nav extends React.PureComponent {
<span className="nav__item-header">Sign up</span> <span className="nav__item-header">Sign up</span>
</Link> </Link>
</li> </li>
</ul>} </ul>
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated && );
}
renderAuthenticatedUserMenu(navDropdownState) {
return (
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li className="nav__item">
<span>Hello, {this.props.user.username}!</span> <span>Hello, {this.props.user.username}!</span>
@ -605,7 +590,51 @@ class Nav extends React.PureComponent {
</li> </li>
</ul> </ul>
</li> </li>
</ul> } </ul>
);
}
renderUserMenu(navDropdownState) {
const isLoginEnabled = __process.env.LOGIN_ENABLED;
const isAuthenticated = this.props.user.authenticated;
if (isLoginEnabled && isAuthenticated) {
return this.renderAuthenticatedUserMenu(navDropdownState);
} else if (isLoginEnabled && !isAuthenticated) {
return this.renderUnauthenticatedUserMenu(navDropdownState);
}
return null;
}
render() {
const navDropdownState = {
file: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'file'
}),
edit: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'edit'
}),
sketch: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'sketch'
}),
help: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'help'
}),
account: classNames({
'nav__item': true,
'nav__item--open': this.state.dropdownOpen === 'account'
})
};
return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderProjectMenu(navDropdownState)}
{this.renderUserMenu(navDropdownState)}
{/* {/*
<div className="nav__announce"> <div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released. This is a preview version of the editor, that has not yet been officially released.