acklen-keystone/admin/client/App/components/Navigation/Primary/index.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

/**
 * The primary (i.e. uppermost) navigation on desktop. Renders all sections and
 * the home-, website- and signout buttons.
 */

import React from 'react';
import Auth0Lock from 'auth0-lock';
import { Link } from 'react-router';
import { Container } from '../../../elemental';
import PrimaryNavItem from './NavItem';
import assign from 'object-assign';
import xhr from 'xhr';

var PrimaryNavigation = React.createClass({
	displayName: 'PrimaryNavigation',
	propTypes: {
		brand: React.PropTypes.string,
		currentSectionKey: React.PropTypes.string,
		isAdministrator: false,
		isContributor: false,
		isEditor: false,
		sections: React.PropTypes.array.isRequired,
		signoutUrl: React.PropTypes.string,
	},
	getInitialState () {
		return {};
	},
	// Handle resizing, hide this navigation on mobile (i.e. < 768px) screens
	componentDidMount () {
		this.setLoggedUser();
		this.handleResize();
		window.addEventListener('resize', this.handleResize);
	},
	componentWillUnmount () {
		window.removeEventListener('resize', this.handleResize);
	},
	setLoggedUser () {
		xhr({
			url: `${Keystone.adminPath}/api/session`,
			method: 'get',
			headers: assign({}, Keystone.csrf.header),
		}, (err, resp, body) => {
			var loggedUser = JSON.parse(body);
			this.setState({
				isAdministrator: loggedUser.user.isAdministrator,
				isContributor: loggedUser.user.isContributor,
				isEditor: loggedUser.user.isEditor,
			});
		});
	},
	handleResize () {
		this.setState({
			navIsVisible: window.innerWidth >= 768,
		});
	},
	logout () {
		const clientId = Keystone.auth0ClientId;
		const domain = Keystone.auth0DomainUrl;

		localStorage.removeItem('id_token');
		new Auth0Lock(clientId, domain).logout({
			returnTo: window.location.origin + Keystone.signoutUrl,
			client_id: clientId,
			version: 'v2',
		});
	},
	// Render the sign out button
	renderSignout () {
		if (!this.props.signoutUrl) return null;

		return (
			<li className="primary-navbar__item">
				<Link
					className="primary-navbar__link"
					title={'Sign Out'}
					onClick={this.logout}
				>
					<span className="octicon octicon-sign-out" />
				</Link>
			</li>
		);
	},
	// Render the back button
	renderBackButton () {
		if (!Keystone.backUrl) return null;

		return (
			<PrimaryNavItem
				label="octicon-globe"
				href={Keystone.backUrl}
				title={'Front page - ' + this.props.brand}
			>
				<span className="octicon octicon-globe" />
			</PrimaryNavItem>
		);
	},
	// Render the link to the webpage
	renderFrontLink () {
		return (
			<ul className="app-nav app-nav--primary app-nav--right">
				{this.renderBackButton()}
				{this.renderSignout()}
			</ul>
		);
	},
	renderBrand () {
		// TODO: support navbarLogo from keystone config

		const { brand, currentSectionKey } = this.props;
		const className = currentSectionKey === 'dashboard' ? 'primary-navbar__brand primary-navbar__item--active' : 'primary-navbar__brand';

		return (
			<PrimaryNavItem
				className={className}
				label="octicon-home"
				title={'Dashboard - ' + brand}
				to={Keystone.adminPath}
			>
				<span className="octicon octicon-home" />
			</PrimaryNavItem>
		);
	},
	// Render the navigation
	renderNavigation () {
		if (!this.props.sections || !this.props.sections.length) return null;

		return this.props.sections.map((section) => {
			// Get the link and the class name
			const href = section.lists[0].external ? section.lists[0].path : `${Keystone.adminPath}/${section.lists[0].path}`;
			const isActive = this.props.currentSectionKey && this.props.currentSectionKey === section.key;
			const className = isActive ? 'primary-navbar__item--active' : null;
			if (section.key === 'users' && !this.state.isAdministrator) {
				return null;
			}
			return (
				<PrimaryNavItem
					active={isActive}
					key={section.key}
					label={section.label}
					className={className}
					to={href}
				>
					{section.label}
				</PrimaryNavItem>
			);
		});
	},
	render () {
		if (!this.state.navIsVisible) return null;

		return (
			<nav className="primary-navbar">
				<Container clearFloatingChildren>
					<ul className="app-nav app-nav--primary app-nav--left">
						{this.renderBrand()}
						{this.renderNavigation()}
					</ul>
					{this.renderFrontLink()}
				</Container>
			</nav>
		);
	},
});

module.exports = PrimaryNavigation;