Cleaning up uses of StaticQuery

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={
+    buildId="abc-123"
-      Object {
-        "siteMetadata": Object {
-          "buildId": "abc-123",
-        },
-      }
-    }
     t={[Function]}
   />,
   Symbol(enzyme.__renderer__): Object {

src/components/Footer/index.js

@@ -15,7 +15,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 +33,18 @@ 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({
+  buildId: PropTypes.string.isRequired
-    siteMetadata: PropTypes.shape({
-      buildId: PropTypes.string.isRequired
-    }).isRequired
-  }).isRequired
 };
 
 export default withNamespaces()(props => (
-  <StaticQuery query={ query } render={ data => (
+  <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
-    <Footer { ...props } { ...data } />
+    <Footer { ...props } { ...siteMetadata } />
   ) } />
 ));

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();
   });

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={
+    banner="testing"
-      Object {
-        "siteMetadata": Object {
-          "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={
+    banner={false}
-      Object {
-        "siteMetadata": Object {
-          "banner": false,
-        },
-      }
-    }
   />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],

src/components/Header/index.js

@@ -19,10 +19,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 +49,14 @@ export const Header = ({ site: { siteMetadata } }) => (
 );
 
 Header.propTypes = {
-  site: PropTypes.shape({
+  banner: PropTypes.oneOfType([
-    siteMetadata: PropTypes.shape({
+    PropTypes.bool,
-      banner: PropTypes.oneOfType([
+    PropTypes.string
-        PropTypes.bool,
+  ]).isRequired
-        PropTypes.string
-      ]).isRequired
-    }).isRequired
-  }).isRequired
 };
 
 export default withNamespaces()(props => (
-  <StaticQuery query={ query } render={ data => (
+  <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
-    <Header { ...props } { ...data } />
+    <Header { ...props } { ...siteMetadata } />
   ) } />
 ));

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();
   });