p5.js-web-editor/client/components/Nav.jsx

165 lines
4.6 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
2016-06-23 22:29:55 +00:00
import { Link } from 'react-router';
function Nav(props) {
return (
2016-07-14 21:20:44 +00:00
<nav className="nav" role="navigation" title="main-navigation">
2016-07-13 15:59:47 +00:00
<ul className="nav__items-left" title="project-menu">
<li className="nav__item">
2016-07-12 16:25:48 +00:00
<a
className="nav__new"
onClick={props.newProject}
>
New
2016-07-12 16:25:48 +00:00
</a>
</li>
{(() => { // eslint-disable-line
if (!props.project.owner || props.project.owner && props.project.owner.id === props.user.id) {
return (
<li className="nav__item">
<a
className="nav__save"
onClick={() => {
if (props.user.authenticated) {
props.saveProject();
} else {
props.openForceAuthentication();
}
}}
>
Save
</a>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (props.project.id) {
return (
<li className="nav__item">
<a className="nav__clone" onClick={props.cloneProject}>
Duplicate
</a>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (props.project.id) {
return (
<li className="nav__item">
<a className="nav__export" onClick={() => props.exportProjectAsZip(props.project.id)}>
Download
</a>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (props.project.id) {
return (
<li className="nav__item">
2016-09-07 02:37:29 +00:00
<a onClick={props.showShareModal}>
Share
</a>
</li>
);
}
})()}
{(() => { // eslint-disable-line
if (props.user.authenticated) {
return (
<li className="nav__item">
<p className="nav__open">
2016-08-28 01:52:00 +00:00
<Link
to="/sketches"
onClick={props.stopSketch}
>
Open
</Link>
</p>
</li>
);
}
})()}
<li className="nav__item">
<p className="nav__open">
<Link to="/p5/sketches">
Examples
</Link>
</p>
</li>
<li className="nav__item">
<p className="nav__reference">
<a
href="https://p5js.org/reference/"
target="_blank"
>Reference</a>
</p>
</li>
2016-08-22 16:35:59 +00:00
<li className="nav__item">
<p className="nav__about">
<Link to="/about">
About
</Link>
</p>
</li>
</ul>
2016-07-13 15:59:47 +00:00
<ul className="nav__items-right" title="user-menu">
2016-08-28 00:46:20 +00:00
{(() => {
if (!props.user.authenticated) {
return (
<li className="nav__item login__items">
2016-08-28 00:46:20 +00:00
<p>
<Link to="/login">Login</Link> <span className="spacer">or</span> <Link to="/signup">Sign Up</Link>
2016-08-28 00:46:20 +00:00
</p>
</li>
);
}
return (
<li className="nav__item">
<a>Hello, {props.user.username}!</a>
<ul className="nav__dropdown">
<li>
<Link to="/sketches">
My Sketches
</Link>
</li>
<li>
<a onClick={props.logoutUser} >
Logout
</a>
</li>
</ul>
</li>
);
})()}
</ul>
</nav>
);
2016-06-23 22:29:55 +00:00
}
Nav.propTypes = {
newProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
2016-07-15 17:11:50 +00:00
exportProjectAsZip: PropTypes.func.isRequired,
2016-07-15 17:36:33 +00:00
cloneProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
username: PropTypes.string,
id: PropTypes.string
2016-08-17 22:35:15 +00:00
}).isRequired,
project: PropTypes.shape({
id: PropTypes.string,
owner: PropTypes.shape({
id: PropTypes.string
})
2016-08-28 00:46:20 +00:00
}),
2016-08-28 01:52:00 +00:00
logoutUser: PropTypes.func.isRequired,
2016-09-07 02:37:29 +00:00
stopSketch: PropTypes.func.isRequired,
showShareModal: PropTypes.func.isRequired,
openForceAuthentication: PropTypes.func.isRequired
};
2016-06-23 22:29:55 +00:00
export default Nav;