Moving query for siteMetadata to Layout
This commit is contained in:
parent
f14e018518
commit
1e4e5d82d1
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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],
|
||||
|
@ -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 } />
|
||||
) } />
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user