refactor

gatsby-browser.js

@@ -1,7 +1,10 @@
-import './src/styles/global.scss'
 import React from 'react'
-import AppProvider from './src/store/Provider'
-import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
+import PropTypes from 'prop-types'
+import AppProvider from './src/store/AppProvider'
+import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
+
+// Global styles
+import './src/styles/global.scss'
 
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window !== 'undefined' && !window.IntersectionObserver) {
@@ -9,10 +12,13 @@ if (typeof window !== 'undefined' && !window.IntersectionObserver) {
 }
 
 // React Context in Browser
-// eslint-disable-next-line
 export const wrapRootElement = ({ element }) => {
   return <AppProvider>{element}</AppProvider>
 }
 
-// Page Transitions & Layout
-export const wrapPageElement = wrapPageElementWithTransition
+wrapRootElement.propTypes = {
+  element: PropTypes.any
+}
+
+// Layout with Page Transitions
+export const wrapPageElement = wrapPageElementWithLayout

gatsby-ssr.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { renderToString } from 'react-dom/server'
-import AppProvider from './src/store/Provider'
-import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
+import AppProvider from './src/store/AppProvider'
+import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
 
 export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
   // React Context in SSR/build
@@ -9,5 +9,5 @@ export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
   replaceBodyHTMLString(renderToString(<ConnectedBody />))
 }
 
-// Page Transitions & Layout
-export const wrapPageElement = wrapPageElementWithTransition
+// Layout with Page Transitions
+export const wrapPageElement = wrapPageElementWithLayout

src/components/Layout.jsx

@@ -14,9 +14,6 @@ import styles from './Layout.module.scss'
 //   whyDidYouUpdate(React)
 // }
 
-const timeout = 250
-const RoutesContainer = posed.div(fadeIn)
-
 const query = graphql`
   query {
     contentYaml {
@@ -25,42 +22,8 @@ const query = graphql`
   }
 `
 
-const LayoutMarkup = ({ children, data, location }) => {
-  const { allowedHosts } = data.contentYaml
-  const isHomepage = location.pathname === '/'
-
-  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 />
-    </>
-  )
-}
-
-LayoutMarkup.propTypes = {
-  children: PropTypes.any.isRequired,
-  data: PropTypes.shape({
-    contentYaml: PropTypes.shape({
-      allowedHosts: PropTypes.array.isRequired
-    }).isRequired
-  }).isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  }).isRequired
-}
+const timeout = 200
+const RoutesContainer = posed.div(fadeIn)
 
 export default class Layout extends PureComponent {
   static propTypes = {
@@ -72,15 +35,34 @@ export default class Layout extends PureComponent {
 
   render() {
     const { children, location } = this.props
+    const isHomepage = location.pathname === '/'
 
     return (
       <StaticQuery
         query={query}
-        render={data => (
-          <LayoutMarkup data={data} location={location}>
-            {children}
-          </LayoutMarkup>
-        )}
+        render={data => {
+          const { allowedHosts } = data.contentYaml
+
+          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 />
+            </>
+          )
+        }}
       />
     )
   }

src/store/AppProvider.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-testing-library'
-import AppProvider from './Provider.jsx'
+import AppProvider from './AppProvider.jsx'
 
 describe('AppProvider', () => {
   it('renders correctly', () => {