From 3b11fcb0b63649796ec9e6b5d2752e323559eb43 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 6 Jan 2019 13:56:25 -0500
Subject: [PATCH] Adding a HOC for using StaticQuery

---
 .../Footer/__snapshots__/test.js.snap         |  8 +----
 src/components/Footer/index.js                | 25 ++++++++--------
 src/components/Footer/test.js                 |  2 +-
 .../Header/__snapshots__/test.js.snap         | 16 ++--------
 src/components/Header/index.js                | 30 +++++++++----------
 src/components/Header/test.js                 |  4 +--
 .../Layout/__snapshots__/test.js.snap         |  8 ++---
 src/lib/with-query.js                         | 21 +++++++++++++
 8 files changed, 57 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/with-query.js

diff --git a/src/components/Footer/__snapshots__/test.js.snap b/src/components/Footer/__snapshots__/test.js.snap
index a11faa4..70d1a8c 100644
--- a/src/components/Footer/__snapshots__/test.js.snap
+++ b/src/components/Footer/__snapshots__/test.js.snap
@@ -4,13 +4,7 @@ exports[`Footer rendering 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Footer
-    site={
-      Object {
-        "siteMetadata": Object {
-          "buildId": "abc-123",
-        },
-      }
-    }
+    buildId="abc-123"
     t={[Function]}
   />,
   Symbol(enzyme.__renderer__): Object {
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 7c0c9de..3a6a742 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StaticQuery, graphql } from 'gatsby';
+import { graphql } from 'gatsby';
 import { withNamespaces, Trans } from 'react-i18next';
 
+import withQuery from 'lib/with-query';
+
 import style from './style.module.css';
 
 const query = graphql`
@@ -15,7 +17,7 @@ const query = graphql`
   }
 `;
 
-export const Footer = ({ t, site: { siteMetadata } }) => (
+export const Footer = ({ t, buildId }) => (
   <footer className={ style.footer }>
     <ul className={ style.list }>
       <li>
@@ -33,22 +35,19 @@ export const Footer = ({ t, site: { siteMetadata } }) => (
       </li>
     </ul>
     <div className={ style.buildId }>
-      { siteMetadata.buildId }
+      { buildId }
     </div>
   </footer>
 );
 
 Footer.propTypes = {
   t: PropTypes.func.isRequired,
-  site: PropTypes.shape({
-    siteMetadata: PropTypes.shape({
-      buildId: PropTypes.string.isRequired
-    }).isRequired
-  }).isRequired
+  buildId: PropTypes.string.isRequired
 };
 
-export default withNamespaces()(props => (
-  <StaticQuery query={ query } render={ data => (
-    <Footer { ...props } { ...data } />
-  ) } />
-));
+export default [
+  withQuery(query, {
+    toProps: ({ site: { siteMetadata } }) => siteMetadata
+  }),
+  withNamespaces()
+].reduce((component, fn) => fn(component), Footer);
diff --git a/src/components/Footer/test.js b/src/components/Footer/test.js
index 47e0071..e681fc2 100644
--- a/src/components/Footer/test.js
+++ b/src/components/Footer/test.js
@@ -7,7 +7,7 @@ import { Footer } from 'components/Footer';
 describe('Footer', () => {
   test('rendering', () => {
     const component = shallow(
-      <Footer site={{ siteMetadata: { buildId: 'abc-123' } }} t={ mockT } />
+      <Footer buildId="abc-123" t={ mockT } />
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index 52e7a4e..15475cf 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/src/components/Header/__snapshots__/test.js.snap
@@ -4,13 +4,7 @@ exports[`Header rendering 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Header
-    site={
-      Object {
-        "siteMetadata": Object {
-          "banner": "testing",
-        },
-      }
-    }
+    banner="testing"
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
@@ -540,13 +534,7 @@ exports[`Header rendering with no banner 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Header
-    site={
-      Object {
-        "siteMetadata": Object {
-          "banner": false,
-        },
-      }
-    }
+    banner={false}
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 9f637e7..c193747 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, StaticQuery, graphql } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
 
+import withQuery from 'lib/with-query';
 import LocaleSwitcher from 'components/LocaleSwitcher';
 
 import style from './style.module.css';
@@ -19,10 +20,10 @@ const query = graphql`
   }
 `;
 
-export const Header = ({ site: { siteMetadata } }) => (
+export const Header = ({ banner }) => (
   <header
     className={ style.header }
-    data-banner={ siteMetadata.banner || null }>
+    data-banner={ banner || null }>
     <h1>
       <Link to="/">Regexper</Link>
     </h1>
@@ -49,18 +50,15 @@ export const Header = ({ site: { siteMetadata } }) => (
 );
 
 Header.propTypes = {
-  site: PropTypes.shape({
-    siteMetadata: PropTypes.shape({
-      banner: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string
-      ]).isRequired
-    }).isRequired
-  }).isRequired
+  banner: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string
+  ]).isRequired
 };
 
-export default withNamespaces()(props => (
-  <StaticQuery query={ query } render={ data => (
-    <Header { ...props } { ...data } />
-  ) } />
-));
+export default [
+  withQuery(query, {
+    toProps: ({ site: { siteMetadata } }) => siteMetadata
+  }),
+  withNamespaces()
+].reduce((component, fn) => fn(component), Header);
diff --git a/src/components/Header/test.js b/src/components/Header/test.js
index f4c3dca..7d64c25 100644
--- a/src/components/Header/test.js
+++ b/src/components/Header/test.js
@@ -6,14 +6,14 @@ import { Header } from 'components/Header';
 describe('Header', () => {
   test('rendering', () => {
     const component = shallow(
-      <Header site={{ siteMetadata: { banner: 'testing' } }} />
+      <Header banner="testing" />
     );
     expect(component).toMatchSnapshot();
   });
 
   test('rendering with no banner', () => {
     const component = shallow(
-      <Header site={{ siteMetadata: { banner: false } }} />
+      <Header banner={ false } />
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/Layout/__snapshots__/test.js.snap b/src/components/Layout/__snapshots__/test.js.snap
index 8ceef60..da64f63 100644
--- a/src/components/Layout/__snapshots__/test.js.snap
+++ b/src/components/Layout/__snapshots__/test.js.snap
@@ -20,11 +20,11 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <LoadNamespace(Component) />,
+        <LoadNamespace(WithQuery(Header)) />,
         <SentryBoundary>
           Example content
         </SentryBoundary>,
-        <LoadNamespace(Component) />,
+        <LoadNamespace(WithQuery(Footer)) />,
       ],
     },
     "ref": null,
@@ -68,11 +68,11 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <LoadNamespace(Component) />,
+          <LoadNamespace(WithQuery(Header)) />,
           <SentryBoundary>
             Example content
           </SentryBoundary>,
-          <LoadNamespace(Component) />,
+          <LoadNamespace(WithQuery(Footer)) />,
         ],
       },
       "ref": null,
diff --git a/src/lib/with-query.js b/src/lib/with-query.js
new file mode 100644
index 0000000..5f613eb
--- /dev/null
+++ b/src/lib/with-query.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { StaticQuery } from 'gatsby';
+
+const withQuery = (query, options = {}) => Component => {
+  const { toProps } = {
+    toProps: data => data,
+    ...options
+  };
+  const displayName = Component.displayName || Component.name || 'Component';
+  const wrapped = props => (
+    <StaticQuery query={ query } render={ data => (
+      <Component { ...props } { ...toProps(data) } />
+    ) } />
+  );
+
+  wrapped.displayName = `WithQuery(${ displayName })`;
+
+  return wrapped;
+};
+
+export default withQuery;