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,10 +22,27 @@ const query = graphql`
   }
 `
 
-const LayoutMarkup = ({ children, data, location }) => {
-  const { allowedHosts } = data.contentYaml
+const timeout = 200
+const RoutesContainer = posed.div(fadeIn)
+
+export default class Layout extends PureComponent {
+  static propTypes = {
+    children: PropTypes.any.isRequired,
+    location: PropTypes.shape({
+      pathname: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  render() {
+    const { children, location } = this.props
     const isHomepage = location.pathname === '/'
 
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const { allowedHosts } = data.contentYaml
+
           return (
             <>
               <Typekit />
@@ -48,39 +62,7 @@ const LayoutMarkup = ({ children, data, location }) => {
               <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
-}
-
-export default class Layout extends PureComponent {
-  static propTypes = {
-    children: PropTypes.any.isRequired,
-    location: PropTypes.shape({
-      pathname: PropTypes.string.isRequired
-    }).isRequired
-  }
-
-  render() {
-    const { children, location } = this.props
-
-    return (
-      <StaticQuery
-        query={query}
-        render={data => (
-          <LayoutMarkup data={data} location={location}>
-            {children}
-          </LayoutMarkup>
-        )}
+        }}
       />
     )
   }

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', () => {