2017-05-12 00:23:56 +00:00
|
|
|
// @flow
|
2016-04-29 05:25:37 +00:00
|
|
|
import React from 'react';
|
2017-05-17 07:11:13 +00:00
|
|
|
import { Link, withRouter } from 'react-router-dom';
|
2016-06-06 06:57:58 +00:00
|
|
|
import Helmet from 'react-helmet';
|
2017-05-02 05:01:50 +00:00
|
|
|
import styled from 'styled-components';
|
2017-04-27 05:18:36 +00:00
|
|
|
import { observer, inject } from 'mobx-react';
|
2016-07-23 20:12:56 +00:00
|
|
|
import _ from 'lodash';
|
2017-05-18 02:36:31 +00:00
|
|
|
import keydown from 'react-keydown';
|
|
|
|
import searchIcon from 'assets/icons/search.svg';
|
2017-05-10 07:02:11 +00:00
|
|
|
import { Flex } from 'reflexbox';
|
2017-05-26 19:56:10 +00:00
|
|
|
import { textColor, headerHeight } from 'styles/constants.scss';
|
2017-05-17 07:11:13 +00:00
|
|
|
|
2016-05-30 18:36:43 +00:00
|
|
|
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
2016-05-29 18:01:48 +00:00
|
|
|
import LoadingIndicator from 'components/LoadingIndicator';
|
2017-05-12 00:23:56 +00:00
|
|
|
import UserStore from 'stores/UserStore';
|
2017-05-30 02:08:03 +00:00
|
|
|
import AuthStore from 'stores/AuthStore';
|
2016-04-30 18:46:32 +00:00
|
|
|
|
2017-05-12 00:23:56 +00:00
|
|
|
type Props = {
|
2017-05-17 07:11:13 +00:00
|
|
|
history: Object,
|
2017-05-12 00:23:56 +00:00
|
|
|
children?: ?React.Element<any>,
|
|
|
|
actions?: ?React.Element<any>,
|
|
|
|
title?: ?React.Element<any>,
|
|
|
|
loading?: boolean,
|
|
|
|
user: UserStore,
|
2017-05-30 02:08:03 +00:00
|
|
|
auth: AuthStore,
|
2017-05-12 00:23:56 +00:00
|
|
|
search: ?boolean,
|
|
|
|
notifications?: React.Element<any>,
|
|
|
|
};
|
|
|
|
|
|
|
|
@observer class Layout extends React.Component {
|
|
|
|
props: Props;
|
2016-07-18 03:59:32 +00:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
search: true,
|
2017-04-27 05:18:36 +00:00
|
|
|
};
|
2016-07-18 03:59:32 +00:00
|
|
|
|
|
|
|
@keydown(['/', 't'])
|
|
|
|
search() {
|
2017-05-30 02:08:03 +00:00
|
|
|
if (this.props.auth.isAuthenticated)
|
|
|
|
_.defer(() => this.props.history.push('/search'));
|
2016-07-23 20:12:56 +00:00
|
|
|
}
|
2016-07-19 07:31:01 +00:00
|
|
|
|
2016-07-23 20:12:56 +00:00
|
|
|
@keydown(['d'])
|
|
|
|
dashboard() {
|
2017-05-30 02:08:03 +00:00
|
|
|
if (this.props.auth.isAuthenticated)
|
|
|
|
_.defer(() => this.props.history.push('/'));
|
2016-04-29 05:25:37 +00:00
|
|
|
}
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
handleLogout = () => {
|
|
|
|
this.props.auth.logout(() => this.props.history.push('/'));
|
|
|
|
};
|
2016-06-26 06:31:22 +00:00
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
render() {
|
|
|
|
const { auth, user } = this.props;
|
2017-05-17 07:11:13 +00:00
|
|
|
|
2016-04-29 05:25:37 +00:00
|
|
|
return (
|
2017-05-26 19:56:10 +00:00
|
|
|
<Container column auto>
|
2016-06-06 06:57:58 +00:00
|
|
|
<Helmet
|
2017-05-26 19:56:10 +00:00
|
|
|
title="Atlas"
|
2017-05-13 23:00:50 +00:00
|
|
|
meta={[
|
|
|
|
{
|
|
|
|
name: 'viewport',
|
|
|
|
content: 'width=device-width, initial-scale=1.0',
|
|
|
|
},
|
|
|
|
]}
|
2016-06-06 06:57:58 +00:00
|
|
|
/>
|
|
|
|
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.loading && <LoadingIndicator />}
|
2016-08-19 15:02:56 +00:00
|
|
|
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.notifications}
|
2016-10-28 05:37:26 +00:00
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
<Header>
|
|
|
|
<Flex align="center">
|
|
|
|
<LogoLink to="/">Atlas</LogoLink>
|
|
|
|
<Title>
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.title}
|
2017-05-26 19:56:10 +00:00
|
|
|
</Title>
|
|
|
|
</Flex>
|
|
|
|
<Flex>
|
2016-09-13 05:19:59 +00:00
|
|
|
<Flex>
|
2017-05-26 19:56:10 +00:00
|
|
|
<Flex align="center">
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.actions}
|
2016-07-18 03:59:32 +00:00
|
|
|
</Flex>
|
2017-05-30 02:08:03 +00:00
|
|
|
{auth.authenticated &&
|
|
|
|
user &&
|
2016-09-13 05:19:59 +00:00
|
|
|
<Flex>
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.search &&
|
2016-09-13 05:19:59 +00:00
|
|
|
<Flex>
|
2017-05-17 07:11:13 +00:00
|
|
|
<Link to="/search">
|
2017-05-26 19:56:10 +00:00
|
|
|
<Search title="Search (/)">
|
|
|
|
<SearchIcon src={searchIcon} alt="Search" />
|
|
|
|
</Search>
|
2017-05-17 07:11:13 +00:00
|
|
|
</Link>
|
2017-04-27 05:18:36 +00:00
|
|
|
</Flex>}
|
2017-05-02 05:01:50 +00:00
|
|
|
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
|
2017-05-17 07:11:13 +00:00
|
|
|
<MenuLink to="/settings">
|
|
|
|
<MenuItem>Settings</MenuItem>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuLink to="/keyboard-shortcuts">
|
|
|
|
<MenuItem>
|
|
|
|
Keyboard shortcuts
|
|
|
|
</MenuItem>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuLink to="/developers">
|
|
|
|
<MenuItem>API</MenuItem>
|
|
|
|
</MenuLink>
|
2017-05-30 02:08:03 +00:00
|
|
|
<MenuItem onClick={this.handleLogout}>Logout</MenuItem>
|
2016-09-13 05:19:59 +00:00
|
|
|
</DropdownMenu>
|
2017-04-27 05:18:36 +00:00
|
|
|
</Flex>}
|
2016-09-13 05:19:59 +00:00
|
|
|
</Flex>
|
2016-05-07 19:20:09 +00:00
|
|
|
</Flex>
|
2017-05-26 19:56:10 +00:00
|
|
|
</Header>
|
2016-05-30 18:36:43 +00:00
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
<Content auto justify="center">
|
2017-04-27 05:18:36 +00:00
|
|
|
{this.props.children}
|
2017-05-26 19:56:10 +00:00
|
|
|
</Content>
|
|
|
|
</Container>
|
2016-04-29 05:25:37 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
const Container = styled(Flex)`
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Header = styled(Flex)`
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
background: #fff;
|
|
|
|
height: ${headerHeight};
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 1;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const LogoLink = styled(Link)`
|
|
|
|
font-family: 'Atlas Grotesk';
|
|
|
|
font-weight: bold;
|
|
|
|
color: ${textColor};
|
|
|
|
text-decoration: none;
|
|
|
|
font-size: 16px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Title = styled.span`
|
|
|
|
color: #ccc;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: #ccc;
|
|
|
|
}
|
|
|
|
|
|
|
|
a:hover {
|
2017-05-30 01:31:29 +00:00
|
|
|
color: ${textColor};
|
2017-05-26 19:56:10 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Search = styled(Flex)`
|
|
|
|
margin: 0 5px;
|
|
|
|
padding: 15px 5px 0 5px;
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const SearchIcon = styled.img`
|
|
|
|
height: 20px;
|
|
|
|
`;
|
|
|
|
|
2017-05-02 05:01:50 +00:00
|
|
|
const Avatar = styled.img`
|
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
border-radius: 50%;
|
|
|
|
`;
|
|
|
|
|
2017-05-17 07:11:13 +00:00
|
|
|
const MenuLink = styled(Link)`
|
|
|
|
color: ${textColor};
|
|
|
|
`;
|
|
|
|
|
2017-05-26 19:56:10 +00:00
|
|
|
const Content = styled(Flex)`
|
|
|
|
height: 100%;
|
|
|
|
overflow: scroll;
|
|
|
|
`;
|
|
|
|
|
2017-05-30 02:08:03 +00:00
|
|
|
export default withRouter(inject('user', 'auth')(Layout));
|