import React, { Component } from 'react';
import { Layout, Drawer, Header, Navigation, Content,
Footer, FooterSection, FooterDropDownSection, FooterLinkList,
Grid, Cell,
} from 'react-mdl';
import { Link } from 'react-router';
import style from './styles.scss';
import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container';
import ShowUserContainer from './user/show-user-container';
const base = {
name: 'Unleash',
link: '/',
};
function replace (input, params) {
if (!params) {
return input;
}
Object.keys(params).forEach(key => {
input = input.replace(`:${key}`, params[key]);
});
return input;
}
export default class App extends Component {
constructor (props) {
super(props);
this.state = { drawerActive: false };
this.toggleDrawerActive = () => {
this.setState({ drawerActive: !this.state.drawerActive });
};
}
static contextTypes = {
router: React.PropTypes.object,
}
componentWillReceiveProps (nextProps) {
// copied from https://github.com/react-mdl/react-mdl/issues/254
// If our locations are different and drawer is open,
// force a close
if (this.props.location.pathname !== nextProps.location.pathname) {
const layout = document.querySelector('.mdl-js-layout');
const drawer = document.querySelector('.mdl-layout__drawer');
if (layout.classList.contains('is-small-screen') && drawer.classList.contains('is-visible')) {
layout.MaterialLayout.toggleDrawer();
}
}
}
getSections () {
const { routes, params } = this.props;
const unique = {};
let result = [base].concat(routes.splice(1).map((routeEntry) => ({
name: replace(routeEntry.pageTitle, params),
link: replace(routeEntry.link || routeEntry.path, params),
}))).filter(entry => {
if (!unique[entry.link]) {
unique[entry.link] = true;
return true;
}
return false;
});
// mutate document.title:
document.title = result
.map(e => e.name)
.reverse()
.join(' - ');
if (result.length > 2) {
result = result.splice(1);
}
return result;
}
getTitleWithLinks () {
const result = this.getSections();
return (
{result.map((entry, index) => (
{entry.name}
{(index + 1) < result.length ? ' / ' : null}
))}
);
}
onOverlayClick = () => this.setState({ drawerActive: false });
render () {
const createListItem = (path, caption) =>
{caption}
;
return (
{createListItem('/features', 'Feature toggles')}
{createListItem('/strategies', 'Strategies')}
{createListItem('/history', 'Event history')}
{createListItem('/archive', 'Archived toggles')}
{createListItem('/applications', 'Applications')}
{/*createListItem('/metrics', 'Client metrics')*/}
{createListItem('/client-strategies', 'Client strategies')}
{/*createListItem('/client-instances', 'Client instances')*/}
{this.props.children}
|
);
return (
);
}
};