acklen-keystone/admin/client/App/App.js

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

/**
 * The App component is the component that is rendered around all views, and
 * contains common things like navigation, footer, etc.
 */

import React from 'react';
import { Container } from './elemental';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { css } from 'glamor';
import { Layout } from 'antd';
import { Debounce } from 'react-throttle';
import { WindowResizeListener } from 'react-window-resize-listener';

import Sidebar from './isomorphic/components/Sidebar/Sidebar';
import Topbar from './isomorphic/components/Topbar/TopBar';
import { toggleAll } from './isomorphic/redux/app/reducer';
import LayoutWrapper from './isomorphic/components/utility/layoutWrapper';
import Box from './isomorphic/components/utility/box';
import ContentHolder from './isomorphic/components/utility/contentHolder';
import PageHeader from './isomorphic/components/utility/pageHeader';
const { Content, Footer } = Layout;


const classes = {
	wrapper: {
		display: 'flex',
		flexDirection: 'column',
		minHeight: '100vh',
	},
	body: {
		flexGrow: 1,
	},
};

const App = (props) => {
	const listsByPath = require('../utils/lists').listsByPath;
	let children = props.children;
	// If we're on either a list or an item view
	let currentList, currentSection;
	if (props.params.listId) {
		currentList = listsByPath[props.params.listId];
		// If we're on a list path that doesn't exist (e.g. /keystone/gibberishasfw34afsd) this will
		// be undefined
		if (!currentList) {
			children = (
				<Container>
					<p>List not found!</p>
					<Link to={`${Keystone.adminPath}`}>
						Go back home
					</Link>
				</Container>
			);
		} else {
			// Get the current section we're in for the navigation
			currentSection = Keystone.nav.by.list[currentList.key];
		}
	}
	// Default current section key to dashboard
	const currentSectionKey = (currentSection && currentSection.key) || 'dashboard';

	// Default current section key to dashboard
	const url = '/';
	const title = props.params.listId
		? props.params.listId.split('-')
		.map((l) => l.charAt(0).toUpperCase() + l.slice(1))
		.join(' ') : null;

	return (
		<div className={css(classes.wrapper)}>
			<Layout style={{ height: '100vh' }}>
				<Debounce time="1000" handler="onResize">
					<WindowResizeListener
						onResize={windowSize =>
							props.toggleAll(
								windowSize.windowWidth,
								windowSize.windowHeight
							)}
					/>
				</Debounce>
				<Topbar signoutUrl={Keystone.signoutUrl} />
				<Layout style={{ flexDirection: 'row', overflowX: 'hidden' }}>
					<Sidebar
						url={url}
						sections={Keystone.nav.sections}
						currentSectionKey={currentSectionKey}
						currentSection={currentSection}
					/>
					<Layout
						id={'main-container'}
						style={{
							height: '100vh',
						}}
					>
						<Content
							className="isomorphicContent"
							style={{
								padding: '70px 0 0',
								flexShrink: '0',
								background: '#f1f3f6',
							}}
						>
							<LayoutWrapper>
								{ title ? (
									<PageHeader><span>{title}</span></PageHeader>
								) : null}
								<Box
									title={''}
									subtitle={''}
								>
									<ContentHolder>
										<main className={css(classes.body)}>
											{children}
										</main>
									</ContentHolder>
								</Box>
							</LayoutWrapper>
						</Content>
						<Footer
							style={{
								background: '#ffffff',
								textAlign: 'center',
								borderTop: '1px solid #ededed',
							}}
						>
							AGA CMS
						</Footer>
					</Layout>
				</Layout>
			</Layout>
		</div>
	);
};

export default connect(
	state => ({}),
	{ toggleAll }
  )(App);