Moving query for siteMetadata to Layout

This commit is contained in:
Jeff Avallone 2019-01-08 07:09:06 -05:00
parent f14e018518
commit 1e4e5d82d1
5 changed files with 59 additions and 47 deletions

View File

@ -1,20 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { StaticQuery, graphql } from 'gatsby';
import { withNamespaces, Trans } from 'react-i18next';
import style from './style.module.css';
const query = graphql`
query FooterQuery {
site {
siteMetadata {
buildId
}
}
}
`;
export const Footer = ({ t, buildId }) => (
<footer className={ style.footer }>
<ul className={ style.list }>
@ -43,8 +32,4 @@ Footer.propTypes = {
buildId: PropTypes.string.isRequired
};
export default withNamespaces()(props => (
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
<Footer { ...props } { ...siteMetadata } />
) } />
));
export default withNamespaces()(Footer);

View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link, StaticQuery, graphql } from 'gatsby';
import { Link } from 'gatsby';
import { withNamespaces, Trans } from 'react-i18next';
import GitlabIcon from 'react-feather/dist/icons/gitlab';
@ -9,16 +9,6 @@ import LocaleSwitcher from 'components/LocaleSwitcher';
import style from './style.module.css';
const query = graphql`
query HeaderQuery {
site {
siteMetadata {
banner
}
}
}
`;
export const Header = ({ banner }) => (
<header
className={ style.header }
@ -55,8 +45,4 @@ Header.propTypes = {
]).isRequired
};
export default withNamespaces()(props => (
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
<Header { ...props } { ...siteMetadata } />
) } />
));
export default withNamespaces()(Header);

View File

@ -3,7 +3,10 @@
exports[`Layout rendering 1`] = `
ShallowWrapper {
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <Layout>
Symbol(enzyme.__unrendered__): <Layout
banner="Test Banner"
buildId="test-buildid"
>
Example content
</Layout>,
Symbol(enzyme.__renderer__): Object {
@ -20,11 +23,15 @@ ShallowWrapper {
"nodeType": "class",
"props": Object {
"children": Array [
<LoadNamespace(Component) />,
<LoadNamespace(Header)
banner="Test Banner"
/>,
<SentryBoundary>
Example content
</SentryBoundary>,
<LoadNamespace(Component) />,
<LoadNamespace(Footer)
buildId="test-buildid"
/>,
],
},
"ref": null,
@ -33,7 +40,9 @@ ShallowWrapper {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {},
"props": Object {
"banner": "Test Banner",
},
"ref": null,
"rendered": null,
"type": [Function],
@ -53,7 +62,9 @@ ShallowWrapper {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {},
"props": Object {
"buildId": "test-buildid",
},
"ref": null,
"rendered": null,
"type": [Function],
@ -68,11 +79,15 @@ ShallowWrapper {
"nodeType": "class",
"props": Object {
"children": Array [
<LoadNamespace(Component) />,
<LoadNamespace(Header)
banner="Test Banner"
/>,
<SentryBoundary>
Example content
</SentryBoundary>,
<LoadNamespace(Component) />,
<LoadNamespace(Footer)
buildId="test-buildid"
/>,
],
},
"ref": null,
@ -81,7 +96,9 @@ ShallowWrapper {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {},
"props": Object {
"banner": "Test Banner",
},
"ref": null,
"rendered": null,
"type": [Function],
@ -101,7 +118,9 @@ ShallowWrapper {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {},
"props": Object {
"buildId": "test-buildid",
},
"ref": null,
"rendered": null,
"type": [Function],

View File

@ -1,23 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import { graphql, StaticQuery } from 'gatsby';
import SentryBoundary from 'components/SentryBoundary';
import Header from 'components/Header';
import Footer from 'components/Footer';
const Layout = ({ children }) => <SentryBoundary>
<Header />
const query = graphql`
query LayoutQuery {
site {
siteMetadata {
banner
buildId
}
}
}
`;
export const Layout = ({ banner, buildId, children }) => <SentryBoundary>
<Header banner={ banner } />
<SentryBoundary>
{ children }
</SentryBoundary>
<Footer />
<Footer buildId={ buildId } />
</SentryBoundary>;
Layout.propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired,
buildId: PropTypes.string.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
};
export default Layout;
// eslint-disable-next-line react/display-name
export default props => (
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
<Layout { ...props } { ...siteMetadata } />
) } />
);

View File

@ -1,12 +1,12 @@
import React from 'react';
import { shallow } from 'enzyme';
import Layout from 'components/Layout';
import { Layout } from 'components/Layout';
describe('Layout', () => {
test('rendering', () => {
const component = shallow(
<Layout>
<Layout banner="Test Banner" buildId="test-buildid">
Example content
</Layout>
);