Adding a HOC for using StaticQuery
This commit is contained in:
parent
bf35f26d5b
commit
3b11fcb0b6
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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],
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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,
|
||||
|
21
src/lib/with-query.js
Normal file
21
src/lib/with-query.js
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user