2018-11-25 00:15:02 +01:00
|
|
|
import React, { PureComponent } from 'react'
|
2018-06-13 20:46:36 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2018-09-14 20:22:57 +02:00
|
|
|
import posed, { PoseGroup } from 'react-pose'
|
2019-04-14 16:58:20 +02:00
|
|
|
import { StaticQuery, graphql } from 'gatsby'
|
2018-09-14 20:58:49 +02:00
|
|
|
import { fadeIn } from './atoms/Transitions'
|
2018-11-25 00:15:02 +01:00
|
|
|
import Typekit from './atoms/Typekit'
|
2018-12-09 15:14:20 +01:00
|
|
|
import HostnameCheck from './atoms/HostnameCheck'
|
2018-06-13 20:46:36 +02:00
|
|
|
import Header from './organisms/Header'
|
|
|
|
import Footer from './organisms/Footer'
|
2018-06-23 15:50:02 +02:00
|
|
|
import styles from './Layout.module.scss'
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-11-24 15:02:32 +01:00
|
|
|
// if (process.env.NODE_ENV !== 'production') {
|
|
|
|
// const { whyDidYouUpdate } = require('why-did-you-update')
|
|
|
|
// whyDidYouUpdate(React)
|
|
|
|
// }
|
2018-11-17 14:58:27 +01:00
|
|
|
|
2019-04-14 16:58:20 +02:00
|
|
|
const query = graphql`
|
|
|
|
query {
|
2019-05-26 16:55:56 +02:00
|
|
|
metaYaml {
|
2019-04-14 16:58:20 +02:00
|
|
|
allowedHosts
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
2019-04-28 22:30:20 +02:00
|
|
|
const timeout = 200
|
|
|
|
const RoutesContainer = posed.div(fadeIn)
|
2019-04-14 16:58:20 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
export default class Layout extends PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
children: PropTypes.any.isRequired,
|
2019-04-16 03:59:21 +02:00
|
|
|
location: PropTypes.shape({
|
|
|
|
pathname: PropTypes.string.isRequired
|
|
|
|
}).isRequired
|
2018-09-14 20:22:57 +02:00
|
|
|
}
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
render() {
|
|
|
|
const { children, location } = this.props
|
2019-04-28 22:30:20 +02:00
|
|
|
const isHomepage = location.pathname === '/'
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
return (
|
2019-04-14 16:58:20 +02:00
|
|
|
<StaticQuery
|
|
|
|
query={query}
|
2019-04-28 22:30:20 +02:00
|
|
|
render={data => {
|
2019-05-26 16:55:56 +02:00
|
|
|
const { allowedHosts } = data.metaYaml
|
2019-04-28 22:30:20 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Typekit />
|
|
|
|
<HostnameCheck allowedHosts={allowedHosts} />
|
|
|
|
|
|
|
|
<PoseGroup animateOnMount={true}>
|
|
|
|
<RoutesContainer
|
|
|
|
key={location.pathname}
|
|
|
|
delay={timeout}
|
|
|
|
delayChildren={timeout}
|
|
|
|
>
|
|
|
|
<Header minimal={!isHomepage} />
|
|
|
|
<main className={styles.screen}>{children}</main>
|
|
|
|
</RoutesContainer>
|
|
|
|
</PoseGroup>
|
|
|
|
|
|
|
|
<Footer />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}}
|
2019-04-14 16:58:20 +02:00
|
|
|
/>
|
2018-09-14 20:22:57 +02:00
|
|
|
)
|
|
|
|
}
|
2018-06-13 20:46:36 +02:00
|
|
|
}
|