Moving query for siteMetadata to Layout
This commit is contained in:
parent
f14e018518
commit
1e4e5d82d1
@ -1,20 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { StaticQuery, graphql } from 'gatsby';
|
|
||||||
import { withNamespaces, Trans } from 'react-i18next';
|
import { withNamespaces, Trans } from 'react-i18next';
|
||||||
|
|
||||||
import style from './style.module.css';
|
import style from './style.module.css';
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query FooterQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
buildId
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Footer = ({ t, buildId }) => (
|
export const Footer = ({ t, buildId }) => (
|
||||||
<footer className={ style.footer }>
|
<footer className={ style.footer }>
|
||||||
<ul className={ style.list }>
|
<ul className={ style.list }>
|
||||||
@ -43,8 +32,4 @@ Footer.propTypes = {
|
|||||||
buildId: PropTypes.string.isRequired
|
buildId: PropTypes.string.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withNamespaces()(props => (
|
export default withNamespaces()(Footer);
|
||||||
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
|
|
||||||
<Footer { ...props } { ...siteMetadata } />
|
|
||||||
) } />
|
|
||||||
));
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Link, StaticQuery, graphql } from 'gatsby';
|
import { Link } from 'gatsby';
|
||||||
import { withNamespaces, Trans } from 'react-i18next';
|
import { withNamespaces, Trans } from 'react-i18next';
|
||||||
|
|
||||||
import GitlabIcon from 'react-feather/dist/icons/gitlab';
|
import GitlabIcon from 'react-feather/dist/icons/gitlab';
|
||||||
@ -9,16 +9,6 @@ import LocaleSwitcher from 'components/LocaleSwitcher';
|
|||||||
|
|
||||||
import style from './style.module.css';
|
import style from './style.module.css';
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query HeaderQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
banner
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Header = ({ banner }) => (
|
export const Header = ({ banner }) => (
|
||||||
<header
|
<header
|
||||||
className={ style.header }
|
className={ style.header }
|
||||||
@ -55,8 +45,4 @@ Header.propTypes = {
|
|||||||
]).isRequired
|
]).isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withNamespaces()(props => (
|
export default withNamespaces()(Header);
|
||||||
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
|
|
||||||
<Header { ...props } { ...siteMetadata } />
|
|
||||||
) } />
|
|
||||||
));
|
|
||||||
|
@ -3,7 +3,10 @@
|
|||||||
exports[`Layout rendering 1`] = `
|
exports[`Layout rendering 1`] = `
|
||||||
ShallowWrapper {
|
ShallowWrapper {
|
||||||
Symbol(enzyme.__root__): [Circular],
|
Symbol(enzyme.__root__): [Circular],
|
||||||
Symbol(enzyme.__unrendered__): <Layout>
|
Symbol(enzyme.__unrendered__): <Layout
|
||||||
|
banner="Test Banner"
|
||||||
|
buildId="test-buildid"
|
||||||
|
>
|
||||||
Example content
|
Example content
|
||||||
</Layout>,
|
</Layout>,
|
||||||
Symbol(enzyme.__renderer__): Object {
|
Symbol(enzyme.__renderer__): Object {
|
||||||
@ -20,11 +23,15 @@ ShallowWrapper {
|
|||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {
|
"props": Object {
|
||||||
"children": Array [
|
"children": Array [
|
||||||
<LoadNamespace(Component) />,
|
<LoadNamespace(Header)
|
||||||
|
banner="Test Banner"
|
||||||
|
/>,
|
||||||
<SentryBoundary>
|
<SentryBoundary>
|
||||||
Example content
|
Example content
|
||||||
</SentryBoundary>,
|
</SentryBoundary>,
|
||||||
<LoadNamespace(Component) />,
|
<LoadNamespace(Footer)
|
||||||
|
buildId="test-buildid"
|
||||||
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
@ -33,7 +40,9 @@ ShallowWrapper {
|
|||||||
"instance": null,
|
"instance": null,
|
||||||
"key": undefined,
|
"key": undefined,
|
||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {},
|
"props": Object {
|
||||||
|
"banner": "Test Banner",
|
||||||
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
"rendered": null,
|
"rendered": null,
|
||||||
"type": [Function],
|
"type": [Function],
|
||||||
@ -53,7 +62,9 @@ ShallowWrapper {
|
|||||||
"instance": null,
|
"instance": null,
|
||||||
"key": undefined,
|
"key": undefined,
|
||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {},
|
"props": Object {
|
||||||
|
"buildId": "test-buildid",
|
||||||
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
"rendered": null,
|
"rendered": null,
|
||||||
"type": [Function],
|
"type": [Function],
|
||||||
@ -68,11 +79,15 @@ ShallowWrapper {
|
|||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {
|
"props": Object {
|
||||||
"children": Array [
|
"children": Array [
|
||||||
<LoadNamespace(Component) />,
|
<LoadNamespace(Header)
|
||||||
|
banner="Test Banner"
|
||||||
|
/>,
|
||||||
<SentryBoundary>
|
<SentryBoundary>
|
||||||
Example content
|
Example content
|
||||||
</SentryBoundary>,
|
</SentryBoundary>,
|
||||||
<LoadNamespace(Component) />,
|
<LoadNamespace(Footer)
|
||||||
|
buildId="test-buildid"
|
||||||
|
/>,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
@ -81,7 +96,9 @@ ShallowWrapper {
|
|||||||
"instance": null,
|
"instance": null,
|
||||||
"key": undefined,
|
"key": undefined,
|
||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {},
|
"props": Object {
|
||||||
|
"banner": "Test Banner",
|
||||||
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
"rendered": null,
|
"rendered": null,
|
||||||
"type": [Function],
|
"type": [Function],
|
||||||
@ -101,7 +118,9 @@ ShallowWrapper {
|
|||||||
"instance": null,
|
"instance": null,
|
||||||
"key": undefined,
|
"key": undefined,
|
||||||
"nodeType": "class",
|
"nodeType": "class",
|
||||||
"props": Object {},
|
"props": Object {
|
||||||
|
"buildId": "test-buildid",
|
||||||
|
},
|
||||||
"ref": null,
|
"ref": null,
|
||||||
"rendered": null,
|
"rendered": null,
|
||||||
"type": [Function],
|
"type": [Function],
|
||||||
|
@ -1,23 +1,45 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { graphql, StaticQuery } from 'gatsby';
|
||||||
|
|
||||||
import SentryBoundary from 'components/SentryBoundary';
|
import SentryBoundary from 'components/SentryBoundary';
|
||||||
import Header from 'components/Header';
|
import Header from 'components/Header';
|
||||||
import Footer from 'components/Footer';
|
import Footer from 'components/Footer';
|
||||||
|
|
||||||
const Layout = ({ children }) => <SentryBoundary>
|
const query = graphql`
|
||||||
<Header />
|
query LayoutQuery {
|
||||||
|
site {
|
||||||
|
siteMetadata {
|
||||||
|
banner
|
||||||
|
buildId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Layout = ({ banner, buildId, children }) => <SentryBoundary>
|
||||||
|
<Header banner={ banner } />
|
||||||
<SentryBoundary>
|
<SentryBoundary>
|
||||||
{ children }
|
{ children }
|
||||||
</SentryBoundary>
|
</SentryBoundary>
|
||||||
<Footer />
|
<Footer buildId={ buildId } />
|
||||||
</SentryBoundary>;
|
</SentryBoundary>;
|
||||||
|
|
||||||
Layout.propTypes = {
|
Layout.propTypes = {
|
||||||
|
banner: PropTypes.oneOfType([
|
||||||
|
PropTypes.bool,
|
||||||
|
PropTypes.string
|
||||||
|
]).isRequired,
|
||||||
|
buildId: PropTypes.string.isRequired,
|
||||||
children: PropTypes.oneOfType([
|
children: PropTypes.oneOfType([
|
||||||
PropTypes.arrayOf(PropTypes.node),
|
PropTypes.arrayOf(PropTypes.node),
|
||||||
PropTypes.node
|
PropTypes.node
|
||||||
]).isRequired
|
]).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 React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
import Layout from 'components/Layout';
|
import { Layout } from 'components/Layout';
|
||||||
|
|
||||||
describe('Layout', () => {
|
describe('Layout', () => {
|
||||||
test('rendering', () => {
|
test('rendering', () => {
|
||||||
const component = shallow(
|
const component = shallow(
|
||||||
<Layout>
|
<Layout banner="Test Banner" buildId="test-buildid">
|
||||||
Example content
|
Example content
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user