From 4ada925e0f4ffc8325a8c4dc7307b75cd5173420 Mon Sep 17 00:00:00 2001 From: alxshelepenok Date: Thu, 9 May 2019 16:57:42 +0300 Subject: [PATCH] refactor: using react hooks --- .../Feed/__snapshots__/Feed.test.js.snap | 36 +-- .../__snapshots__/Pagination.test.js.snap | 12 +- src/components/Post/Author/Author.js | 27 +- src/components/Post/Author/Author.test.js | 31 +-- .../Author/__snapshots__/Author.test.js.snap | 6 +- src/components/Post/Comments/Comments.js | 25 +- src/components/Post/Comments/Comments.test.js | 31 ++- .../__snapshots__/Comments.test.js.snap | 8 +- src/components/Post/Post.js | 11 +- src/components/Post/Post.test.js | 11 + .../Post/Tags/__snapshots__/Tags.test.js.snap | 12 +- .../Post/__snapshots__/Post.test.js.snap | 47 ++-- .../Author/__snapshots__/Author.test.js.snap | 12 +- .../Menu/__snapshots__/Menu.test.js.snap | 14 +- src/components/Sidebar/Sidebar.js | 48 +--- src/components/Sidebar/Sidebar.test.js | 50 ++-- .../__snapshots__/Sidebar.test.js.snap | 98 ++++--- src/hooks/index.js | 4 + src/hooks/use-categories-list.js | 23 ++ src/hooks/use-site-metadata.js | 41 +++ src/hooks/use-tags-list.js | 23 ++ .../categories-list-template.test.js.snap | 218 ++++++++++++++- .../category-template.test.js.snap | 254 +++++++++++++++-- .../__snapshots__/index-template.test.js.snap | 258 ++++++++++++++++-- .../not-found-template.test.js.snap | 206 +++++++++++++- .../__snapshots__/page-template.test.js.snap | 206 +++++++++++++- .../__snapshots__/post-template.test.js.snap | 47 ++-- .../__snapshots__/tag-template.test.js.snap | 254 +++++++++++++++-- .../tags-list-template.test.js.snap | 218 ++++++++++++++- src/templates/categories-list-template.js | 36 +-- .../categories-list-template.test.js | 36 +-- src/templates/category-template.js | 12 +- src/templates/category-template.test.js | 71 +---- src/templates/index-template.js | 7 +- src/templates/index-template.test.js | 60 +--- src/templates/not-found-template.js | 20 +- src/templates/not-found-template.test.js | 22 +- src/templates/page-template.js | 14 +- src/templates/page-template.test.js | 28 +- src/templates/post-template.js | 29 +- src/templates/post-template.test.js | 39 +-- src/templates/tag-template.js | 6 +- src/templates/tag-template.test.js | 73 ++--- src/templates/tags-list-template.js | 33 +-- src/templates/tags-list-template.test.js | 36 +-- 45 files changed, 1972 insertions(+), 781 deletions(-) create mode 100644 src/hooks/index.js create mode 100644 src/hooks/use-categories-list.js create mode 100644 src/hooks/use-site-metadata.js create mode 100644 src/hooks/use-tags-list.js diff --git a/src/components/Feed/__snapshots__/Feed.test.js.snap b/src/components/Feed/__snapshots__/Feed.test.js.snap index d0bf186..1135d20 100644 --- a/src/components/Feed/__snapshots__/Feed.test.js.snap +++ b/src/components/Feed/__snapshots__/Feed.test.js.snap @@ -22,35 +22,35 @@ exports[`Feed renders correctly 1`] = ` - test_0 - +

- test_0 - +

test_0

- Read - +
- test_1 - +

- test_1 - +

test_1

- Read - + `; diff --git a/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/src/components/Pagination/__snapshots__/Pagination.test.js.snap index fe7d4bb..926c1bf 100644 --- a/src/components/Pagination/__snapshots__/Pagination.test.js.snap +++ b/src/components/Pagination/__snapshots__/Pagination.test.js.snap @@ -7,24 +7,24 @@ exports[`Pagination renders correctly 1`] = `
- ← PREV - +
- → NEXT - +
`; diff --git a/src/components/Post/Author/Author.js b/src/components/Post/Author/Author.js index f268e04..c77ac65 100644 --- a/src/components/Post/Author/Author.js +++ b/src/components/Post/Author/Author.js @@ -1,11 +1,11 @@ // @flow import React from 'react'; -import { graphql, StaticQuery } from 'gatsby'; import { getContactHref } from '../../../utils'; import styles from './Author.module.scss'; +import { useSiteMetadata } from '../../../hooks'; -export const PureAuthor = ({ data }: Object) => { - const { author } = data.site.siteMetadata; +const Author = () => { + const { author } = useSiteMetadata(); return (
@@ -24,25 +24,4 @@ export const PureAuthor = ({ data }: Object) => { ); }; -export const Author = () => ( - } - /> -); - export default Author; diff --git a/src/components/Post/Author/Author.test.js b/src/components/Post/Author/Author.test.js index ad3adaf..1c06dcc 100644 --- a/src/components/Post/Author/Author.test.js +++ b/src/components/Post/Author/Author.test.js @@ -1,26 +1,21 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import { PureAuthor as Author } from './Author'; +import { useStaticQuery, StaticQuery } from 'gatsby'; +import Author from './Author'; +import siteMetadata from '../../../../jest/__fixtures__/site-metadata'; describe('Author', () => { - it('renders correctly', () => { - const props = { - data: { - site: { - siteMetadata: { - author: { - name: 'test', - bio: 'test', - contacts: { - twitter: 'test' - } - } - } - } - } - }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); - const tree = renderer.create().toJSON(); + it('renders correctly', () => { + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/Post/Author/__snapshots__/Author.test.js.snap b/src/components/Post/Author/__snapshots__/Author.test.js.snap index c419bec..0865748 100644 --- a/src/components/Post/Author/__snapshots__/Author.test.js.snap +++ b/src/components/Post/Author/__snapshots__/Author.test.js.snap @@ -7,15 +7,15 @@ exports[`Author renders correctly 1`] = `

- test + Test bio - test + Test name on Twitter diff --git a/src/components/Post/Comments/Comments.js b/src/components/Post/Comments/Comments.js index 6388763..44f51de 100644 --- a/src/components/Post/Comments/Comments.js +++ b/src/components/Post/Comments/Comments.js @@ -1,12 +1,9 @@ import React from 'react'; -import { graphql, StaticQuery } from 'gatsby'; import ReactDisqusComments from 'react-disqus-comments'; +import { useSiteMetadata } from '../../../hooks'; -export const PureComments = ({ data, postTitle, postSlug }) => { - const { - url, - disqusShortname - } = data.site.siteMetadata; +const Comments = ({ postTitle, postSlug }) => { + const { url, disqusShortname } = useSiteMetadata(); if (!disqusShortname) { return null; @@ -22,20 +19,4 @@ export const PureComments = ({ data, postTitle, postSlug }) => { ); }; -export const Comments = (props) => ( - } - /> -); - export default Comments; diff --git a/src/components/Post/Comments/Comments.test.js b/src/components/Post/Comments/Comments.test.js index 247ba22..70ba4aa 100644 --- a/src/components/Post/Comments/Comments.test.js +++ b/src/components/Post/Comments/Comments.test.js @@ -1,22 +1,25 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import { PureComments as Comments } from './Comments'; +import { useStaticQuery, StaticQuery } from 'gatsby'; +import Comments from './Comments'; +import siteMetadata from '../../../../jest/__fixtures__/site-metadata'; describe('Comments', () => { - it('renders correctly', () => { - const props = { - data: { - site: { - siteMetadata: { - url: 'http://localhost', - disqusShortname: 'test' - } - } - }, - postTitle: 'test', - postSlug: '/test' - }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + const props = { + postTitle: 'test', + postSlug: '/test' + }; + + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/src/components/Post/Comments/__snapshots__/Comments.test.js.snap b/src/components/Post/Comments/__snapshots__/Comments.test.js.snap index 0631f88..b16a2b2 100644 --- a/src/components/Post/Comments/__snapshots__/Comments.test.js.snap +++ b/src/components/Post/Comments/__snapshots__/Comments.test.js.snap @@ -1,9 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Comments renders correctly 1`] = ` -

-
-
-`; +exports[`Comments renders correctly 1`] = `null`; diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js index 7aae74b..6dbf491 100644 --- a/src/components/Post/Post.js +++ b/src/components/Post/Post.js @@ -8,14 +8,9 @@ import Tags from './Tags'; import styles from './Post.module.scss'; const Post = ({ post }) => { - const { - tags, - title, - date - } = post.frontmatter; - const { html } = post; - const { tagSlugs } = post.fields; + const { tagSlugs, slug } = post.fields; + const { tags, title, date } = post.frontmatter; return (
@@ -32,7 +27,7 @@ const Post = ({ post }) => {
- +
); diff --git a/src/components/Post/Post.test.js b/src/components/Post/Post.test.js index f1c799f..b70faff 100644 --- a/src/components/Post/Post.test.js +++ b/src/components/Post/Post.test.js @@ -1,8 +1,19 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import Post from './Post'; +import siteMetadata from '../../../jest/__fixtures__/site-metadata'; describe('Post', () => { + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + const props = { post: { html: '

test

', diff --git a/src/components/Post/Tags/__snapshots__/Tags.test.js.snap b/src/components/Post/Tags/__snapshots__/Tags.test.js.snap index cf2e9fa..b3b4787 100644 --- a/src/components/Post/Tags/__snapshots__/Tags.test.js.snap +++ b/src/components/Post/Tags/__snapshots__/Tags.test.js.snap @@ -10,22 +10,22 @@ exports[`Tags renders correctly 1`] = `
  • - test_0 - +
  • - test_1 - +
    • diff --git a/src/components/Post/__snapshots__/Post.test.js.snap b/src/components/Post/__snapshots__/Post.test.js.snap index dcf0540..8bede4c 100644 --- a/src/components/Post/__snapshots__/Post.test.js.snap +++ b/src/components/Post/__snapshots__/Post.test.js.snap @@ -4,12 +4,12 @@ exports[`Post renders correctly 1`] = `
    - All Articles - +
    @@ -53,35 +53,48 @@ exports[`Post renders correctly 1`] = `
  • - test_0 - +
  • - test_1 - +
    • - +
    +

    + Test bio + + + Test name + + on Twitter + +

    +
    - -
    + /> `; diff --git a/src/components/Sidebar/Author/__snapshots__/Author.test.js.snap b/src/components/Sidebar/Author/__snapshots__/Author.test.js.snap index 875b0f0..8544773 100644 --- a/src/components/Sidebar/Author/__snapshots__/Author.test.js.snap +++ b/src/components/Sidebar/Author/__snapshots__/Author.test.js.snap @@ -4,8 +4,8 @@ exports[`Author renders correctly 1`] = `
    - test - +

    - test - +

    - Item 0 - +

  • - Item 1 - +
    • diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index a210b29..8f89ba5 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,26 +1,18 @@ // @flow import React from 'react'; -import { graphql, StaticQuery } from 'gatsby'; import Author from './Author'; import Contacts from './Contacts'; import Copyright from './Copyright'; import Menu from './Menu'; import styles from './Sidebar.module.scss'; +import { useSiteMetadata } from '../../hooks'; type Props = { +isIndex: ?boolean, }; -type PureProps = Props & { - +data: Object, -}; - -export const PureSidebar = ({ data, isIndex }: PureProps) => { - const { - author, - copyright, - menu - } = data.site.siteMetadata; +const Sidebar = ({ isIndex }: Props) => { + const { author, copyright, menu } = useSiteMetadata(); return (
    @@ -34,38 +26,4 @@ export const PureSidebar = ({ data, isIndex }: PureProps) => { ); }; -export const Sidebar = (props: Props) => ( - } - /> -); - export default Sidebar; diff --git a/src/components/Sidebar/Sidebar.test.js b/src/components/Sidebar/Sidebar.test.js index f83d6a0..e589d66 100644 --- a/src/components/Sidebar/Sidebar.test.js +++ b/src/components/Sidebar/Sidebar.test.js @@ -1,42 +1,24 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import { PureSidebar as Sidebar } from './Sidebar'; +import { useStaticQuery, StaticQuery } from 'gatsby'; +import Sidebar from './Sidebar'; +import siteMetadata from '../../../jest/__fixtures__/site-metadata'; describe('Sidebar', () => { - it('renders correctly', () => { - const props = { - data: { - site: { - siteMetadata: { - author: { - name: 'name', - photo: '/photo.jpg', - bio: 'bio', - contacts: { - email: '#', - twitter: '#', - vkontakte: '#', - github: '#', - rss: '#', - telegram: '#' - } - }, - copyright: 'copyright', - menu: [ - { - label: 'Item 0', - path: '/#0/' - }, - { - label: 'Item 1', - path: '/#1/' - } - ] - } - } - } - }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + const props = { + isIndex: true + }; + + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap b/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap index 827f553..54751fe 100644 --- a/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap +++ b/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap @@ -10,31 +10,31 @@ exports[`Sidebar renders correctly 1`] = `
    - name - -

    +

    - - name - -

    + Test name + +

    - bio + Test bio

    @@ -92,6 +100,25 @@ exports[`Sidebar renders correctly 1`] = ` +
  • + + + + + +
  • @@ -111,25 +138,6 @@ exports[`Sidebar renders correctly 1`] = `
    • -
  • - - - - - -
  • @@ -173,16 +181,16 @@ exports[`Sidebar renders correctly 1`] = ` > @@ -192,7 +200,7 @@ exports[`Sidebar renders correctly 1`] = `
    - copyright + Test copyright
    • diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 0000000..bbdbfd7 --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1,4 @@ +// @flow +export { default as useSiteMetadata } from './use-site-metadata'; +export { default as useCategoriesList } from './use-categories-list'; +export { default as useTagsList } from './use-tags-list'; diff --git a/src/hooks/use-categories-list.js b/src/hooks/use-categories-list.js new file mode 100644 index 0000000..77dca3e --- /dev/null +++ b/src/hooks/use-categories-list.js @@ -0,0 +1,23 @@ +// @flow +import { useStaticQuery, graphql } from 'gatsby'; + +const useCategoriesList = () => { + const { allMarkdownRemark } = useStaticQuery( + graphql` + query CategoriesListQuery { + allMarkdownRemark( + filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } } + ) { + group(field: frontmatter___category) { + fieldValue + totalCount + } + } + } + ` + ); + + return allMarkdownRemark.group; +}; + +export default useCategoriesList; diff --git a/src/hooks/use-site-metadata.js b/src/hooks/use-site-metadata.js new file mode 100644 index 0000000..72ec1a2 --- /dev/null +++ b/src/hooks/use-site-metadata.js @@ -0,0 +1,41 @@ +// @flow +import { useStaticQuery, graphql } from 'gatsby'; + +const useSiteMetadata = () => { + const { site } = useStaticQuery( + graphql` + query SiteMetaData { + site { + siteMetadata { + author { + name + bio + photo + contacts { + email + telegram + twitter + github + rss + vkontakte + } + } + menu { + label + path + } + url + title + subtitle + copyright + disqusShortname + } + } + } + ` + ); + + return site.siteMetadata; +}; + +export default useSiteMetadata; diff --git a/src/hooks/use-tags-list.js b/src/hooks/use-tags-list.js new file mode 100644 index 0000000..a62a28c --- /dev/null +++ b/src/hooks/use-tags-list.js @@ -0,0 +1,23 @@ +// @flow +import { useStaticQuery, graphql } from 'gatsby'; + +const useTagsList = () => { + const { allMarkdownRemark } = useStaticQuery( + graphql` + query TagsListQuery { + allMarkdownRemark( + filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } } + ) { + group(field: frontmatter___tags) { + fieldValue + totalCount + } + } + } + ` + ); + + return allMarkdownRemark.group; +}; + +export default useTagsList; diff --git a/src/templates/__snapshots__/categories-list-template.test.js.snap b/src/templates/__snapshots__/categories-list-template.test.js.snap index 7bc6109..65531cd 100644 --- a/src/templates/__snapshots__/categories-list-template.test.js.snap +++ b/src/templates/__snapshots__/categories-list-template.test.js.snap @@ -4,9 +4,209 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    @@ -23,24 +223,24 @@ exports[`CategoriesListTemplate renders correctly 1`] = ` >
    • - test_0 ( 1 ) - +
    • - test_1 ( 2 ) - +
    diff --git a/src/templates/__snapshots__/category-template.test.js.snap b/src/templates/__snapshots__/category-template.test.js.snap index 825b273..3660394 100644 --- a/src/templates/__snapshots__/category-template.test.js.snap +++ b/src/templates/__snapshots__/category-template.test.js.snap @@ -4,9 +4,209 @@ exports[`CategoryTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    @@ -42,35 +242,35 @@ exports[`CategoryTemplate renders correctly 1`] = ` - test - +

    - test_0 - +

    test_0

    - Read - +
    - test - +

    - test_1 - +

    test_1

    - Read - +
    - ← PREV - +
    - → NEXT - +
    diff --git a/src/templates/__snapshots__/index-template.test.js.snap b/src/templates/__snapshots__/index-template.test.js.snap index 3831696..dae8a07 100644 --- a/src/templates/__snapshots__/index-template.test.js.snap +++ b/src/templates/__snapshots__/index-template.test.js.snap @@ -4,9 +4,209 @@ exports[`IndexTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    @@ -37,35 +237,35 @@ exports[`IndexTemplate renders correctly 1`] = ` - - test_0 - + test +

    - test_0 - +

    test_0

    - Read - +
    - - test_1 - + test +

    - test_1 - +

    test_1

    - Read - +
    - ← PREV - +
    - → NEXT - +
    diff --git a/src/templates/__snapshots__/not-found-template.test.js.snap b/src/templates/__snapshots__/not-found-template.test.js.snap index 69f239e..79a74a4 100644 --- a/src/templates/__snapshots__/not-found-template.test.js.snap +++ b/src/templates/__snapshots__/not-found-template.test.js.snap @@ -4,9 +4,209 @@ exports[`NotFoundTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    diff --git a/src/templates/__snapshots__/page-template.test.js.snap b/src/templates/__snapshots__/page-template.test.js.snap index 1e4f13b..45ecb41 100644 --- a/src/templates/__snapshots__/page-template.test.js.snap +++ b/src/templates/__snapshots__/page-template.test.js.snap @@ -4,9 +4,209 @@ exports[`PageTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    diff --git a/src/templates/__snapshots__/post-template.test.js.snap b/src/templates/__snapshots__/post-template.test.js.snap index 85b821d..9092139 100644 --- a/src/templates/__snapshots__/post-template.test.js.snap +++ b/src/templates/__snapshots__/post-template.test.js.snap @@ -7,12 +7,12 @@ exports[`PostTemplate renders correctly 1`] = `
    - All Articles - +
    @@ -56,36 +56,49 @@ exports[`PostTemplate renders correctly 1`] = `
  • - test_0 - +
  • - test_1 - +
    • - +
    - -
    + />
    `; diff --git a/src/templates/__snapshots__/tag-template.test.js.snap b/src/templates/__snapshots__/tag-template.test.js.snap index 586c906..bd95cfa 100644 --- a/src/templates/__snapshots__/tag-template.test.js.snap +++ b/src/templates/__snapshots__/tag-template.test.js.snap @@ -4,9 +4,209 @@ exports[`TagTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    @@ -42,35 +242,35 @@ exports[`TagTemplate renders correctly 1`] = ` - test - +

    - test_0 - +

    test_0

    - Read - +
    - test - +

    - test_1 - +

    test_1

    - Read - +
    - ← PREV - +
    - → NEXT - +
    diff --git a/src/templates/__snapshots__/tags-list-template.test.js.snap b/src/templates/__snapshots__/tags-list-template.test.js.snap index fb4b45c..428c16b 100644 --- a/src/templates/__snapshots__/tags-list-template.test.js.snap +++ b/src/templates/__snapshots__/tags-list-template.test.js.snap @@ -4,9 +4,209 @@ exports[`TagsListTemplate renders correctly 1`] = `
    - +
    +
    +
    + + Test name + +

    + + Test name + +

    +

    + Test bio +

    +
    + +
    + +
    +
    + Test copyright +
    +
    +
    @@ -23,24 +223,24 @@ exports[`TagsListTemplate renders correctly 1`] = ` >
    • - test_0 ( 1 ) - +
    • - test_1 ( 2 ) - +
    diff --git a/src/templates/categories-list-template.js b/src/templates/categories-list-template.js index de2d77d..5fdcc37 100644 --- a/src/templates/categories-list-template.js +++ b/src/templates/categories-list-template.js @@ -1,24 +1,21 @@ import React from 'react'; -import { Link, graphql } from 'gatsby'; +import { Link } from 'gatsby'; import kebabCase from 'lodash/kebabCase'; import Sidebar from '../components/Sidebar'; import Layout from '../components/Layout'; import Page from '../components/Page'; +import { useSiteMetadata, useCategoriesList } from '../hooks'; -const CategoriesListTemplate = ({ data }) => { - const { - title, - subtitle - } = data.site.siteMetadata; - - const { group } = data.allMarkdownRemark; +const CategoriesListTemplate = () => { + const { title, subtitle } = useSiteMetadata(); + const categories = useCategoriesList(); return (
      - {group.map((category) => ( + {categories.map((category) => (
    • {category.fieldValue} ({category.totalCount}) @@ -31,23 +28,4 @@ const CategoriesListTemplate = ({ data }) => { ); }; -export const query = graphql` - query CategoriesListQuery { - site { - siteMetadata { - title - subtitle - } - } - allMarkdownRemark( - filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } } - ) { - group(field: frontmatter___category) { - fieldValue - totalCount - } - } - } -`; - -export default CategoriesListTemplate; +export default CategoriesListTemplate; \ No newline at end of file diff --git a/src/templates/categories-list-template.test.js b/src/templates/categories-list-template.test.js index 1262221..d9dcbeb 100644 --- a/src/templates/categories-list-template.test.js +++ b/src/templates/categories-list-template.test.js @@ -1,33 +1,27 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import CategoriesListTemplate from './categories-list-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark'; describe('CategoriesListTemplate', () => { const props = { - data: { - allMarkdownRemark: { - group: [ - { - fieldValue: 'test_0', - totalCount: 1 - }, - { - fieldValue: 'test_1', - totalCount: 2 - } - ] - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } - } + ...siteMetadata, + ...allMarkdownRemark }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(props) + ), + useStaticQuery.mockReturnValue(props) + ); + }); + it('renders correctly', () => { - const tree = renderer.create().toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/templates/category-template.js b/src/templates/category-template.js index b2b81ec..8b20296 100644 --- a/src/templates/category-template.js +++ b/src/templates/category-template.js @@ -5,12 +5,10 @@ import Sidebar from '../components/Sidebar'; import Feed from '../components/Feed'; import Page from '../components/Page'; import Pagination from '../components/Pagination'; +import { useSiteMetadata } from '../hooks'; const CategoryTemplate = ({ data, pageContext }) => { - const { - title: siteTitle, - subtitle: siteSubtitle - } = data.site.siteMetadata; + const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { category, @@ -42,12 +40,6 @@ const CategoryTemplate = ({ data, pageContext }) => { export const query = graphql` query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) { - site { - siteMetadata { - title - subtitle - } - } allMarkdownRemark( limit: $postsLimit, skip: $postsOffset, diff --git a/src/templates/category-template.test.js b/src/templates/category-template.test.js index f7f3f85..c25627d 100644 --- a/src/templates/category-template.test.js +++ b/src/templates/category-template.test.js @@ -1,69 +1,28 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import CategoryTemplate from './category-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark'; +import pageContext from '../../jest/__fixtures__/page-context'; describe('CategoryTemplate', () => { const props = { data: { - allMarkdownRemark: { - group: [ - { - fieldValue: 'test_0', - totalCount: 1 - }, - { - fieldValue: 'test_1', - totalCount: 2 - } - ], - edges: [ - { - node: { - fields: { - slug: '/test_0', - categorySlug: '/test' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_0', - category: 'test', - title: 'test_0' - } - } - }, - { - node: { - fields: { - slug: '/test_1', - categorySlug: '/test' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_1', - category: 'test', - title: 'test_1' - } - } - } - ] - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } + ...allMarkdownRemark }, - pageContext: { - category: 'test', - currentPage: 1, - prevPagePath: '/page/1', - nextPagePath: '/page/3', - hasNextPage: true, - hasPrevPage: true - } + ...pageContext }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/templates/index-template.js b/src/templates/index-template.js index eb84268..898b8ca 100644 --- a/src/templates/index-template.js +++ b/src/templates/index-template.js @@ -6,6 +6,7 @@ import Sidebar from '../components/Sidebar'; import Feed from '../components/Feed'; import Page from '../components/Page'; import Pagination from '../components/Pagination'; +import { useSiteMetadata } from '../hooks'; type Props = { +data: Object, @@ -13,10 +14,7 @@ type Props = { }; const IndexTemplate = ({ data, pageContext }: Props) => { - const { - title: siteTitle, - subtitle: siteSubtitle - } = data.site.siteMetadata; + const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { currentPage, @@ -26,6 +24,7 @@ const IndexTemplate = ({ data, pageContext }: Props) => { nextPagePath } = pageContext; + const { edges } = data.allMarkdownRemark; const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle; diff --git a/src/templates/index-template.test.js b/src/templates/index-template.test.js index 8888714..3b2d0fc 100644 --- a/src/templates/index-template.test.js +++ b/src/templates/index-template.test.js @@ -1,58 +1,28 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { StaticQuery, useStaticQuery } from 'gatsby'; import IndexTemplate from './index-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark'; +import pageContext from '../../jest/__fixtures__/page-context'; describe('IndexTemplate', () => { const props = { data: { - allMarkdownRemark: { - edges: [ - { - node: { - fields: { - slug: '/test_0', - categorySlug: '/test_0' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_0', - category: 'test_0', - title: 'test_0' - } - } - }, - { - node: { - fields: { - slug: '/test_1', - categorySlug: '/test_1' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_1', - category: 'test_1', - title: 'test_1' - } - } - } - ] - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } + ...allMarkdownRemark }, - pageContext: { - currentPage: 1, - prevPagePath: '/page/1', - nextPagePath: '/page/3', - hasNextPage: true, - hasPrevPage: true - } + ...pageContext }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/templates/not-found-template.js b/src/templates/not-found-template.js index fa5f936..c83c32c 100644 --- a/src/templates/not-found-template.js +++ b/src/templates/not-found-template.js @@ -1,14 +1,11 @@ import React from 'react'; -import { graphql } from 'gatsby'; import Sidebar from '../components/Sidebar'; import Layout from '../components/Layout'; import Page from '../components/Page'; +import { useSiteMetadata } from '../hooks'; -const NotFoundTemplate = ({ data }) => { - const { - title, - subtitle - } = data.site.siteMetadata; +const NotFoundTemplate = () => { + const { title, subtitle } = useSiteMetadata(); return ( @@ -20,15 +17,4 @@ const NotFoundTemplate = ({ data }) => { ); }; -export const query = graphql` - query NotFoundQuery { - site { - siteMetadata { - title - subtitle - } - } - } -`; - export default NotFoundTemplate; diff --git a/src/templates/not-found-template.test.js b/src/templates/not-found-template.test.js index 2709f19..5f54a5a 100644 --- a/src/templates/not-found-template.test.js +++ b/src/templates/not-found-template.test.js @@ -1,21 +1,21 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import NotFoundTemplate from './not-found-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; describe('NotFoundTemplate', () => { - const props = { - data: { - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } - } - }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); it('renders correctly', () => { - const tree = renderer.create().toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/templates/page-template.js b/src/templates/page-template.js index 0b8a3a4..d935196 100644 --- a/src/templates/page-template.js +++ b/src/templates/page-template.js @@ -3,20 +3,12 @@ import { graphql } from 'gatsby'; import Layout from '../components/Layout'; import Sidebar from '../components/Sidebar'; import Page from '../components/Page'; +import { useSiteMetadata } from '../hooks'; const PageTemplate = ({ data }) => { - const { - title: siteTitle, - subtitle: siteSubtitle - } = data.site.siteMetadata; - - const { - title: pageTitle, - description: pageDescription - } = data.markdownRemark.frontmatter; - + const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { html: pageBody } = data.markdownRemark; - + const { title: pageTitle, description: pageDescription } = data.markdownRemark.frontmatter; const metaDescription = pageDescription !== null ? pageDescription : siteSubtitle; return ( diff --git a/src/templates/page-template.test.js b/src/templates/page-template.test.js index a45f4f8..27866a7 100644 --- a/src/templates/page-template.test.js +++ b/src/templates/page-template.test.js @@ -1,28 +1,28 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import PageTemplate from './page-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import markdownRemark from '../../jest/__fixtures__/markdown-remark'; describe('PageTemplate', () => { const props = { data: { - markdownRemark: { - html: '

      test

      ', - frontmatter: { - title: 'test', - description: 'test' - } - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } + ...markdownRemark } }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); -}); +}); \ No newline at end of file diff --git a/src/templates/post-template.js b/src/templates/post-template.js index 945aaa1..7abbce1 100644 --- a/src/templates/post-template.js +++ b/src/templates/post-template.js @@ -2,18 +2,11 @@ import React from 'react'; import { graphql } from 'gatsby'; import Layout from '../components/Layout'; import Post from '../components/Post'; +import { useSiteMetadata } from '../hooks'; const PostTemplate = ({ data }) => { - const { - title: siteTitle, - subtitle: siteSubtitle - } = data.site.siteMetadata; - - const { - title: postTitle, - description: postDescription - } = data.markdownRemark.frontmatter; - + const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); + const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter; const metaDescription = postDescription !== null ? postDescription : siteSubtitle; return ( @@ -23,22 +16,9 @@ const PostTemplate = ({ data }) => { ); }; + export const query = graphql` query PostBySlug($slug: String!) { - site { - siteMetadata { - author { - name - contacts { - twitter - } - } - disqusShortname - subtitle - title - url - } - } markdownRemark(fields: { slug: { eq: $slug } }) { id html @@ -56,4 +36,5 @@ export const query = graphql` } `; + export default PostTemplate; diff --git a/src/templates/post-template.test.js b/src/templates/post-template.test.js index ccb1edf..ae20e3a 100644 --- a/src/templates/post-template.test.js +++ b/src/templates/post-template.test.js @@ -1,39 +1,28 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import PostTemplate from './post-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import markdownRemark from '../../jest/__fixtures__/markdown-remark'; describe('PostTemplate', () => { const props = { data: { - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - }, - markdownRemark: { - html: '

      test

      ', - fields: { - tagSlugs: [ - '/test_0', - '/test_1' - ] - }, - frontmatter: { - date: '2016-09-01', - description: 'test', - title: 'test', - tags: [ - 'test_0', - 'test_1' - ] - } - } + ...markdownRemark } }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); -}); +}); \ No newline at end of file diff --git a/src/templates/tag-template.js b/src/templates/tag-template.js index af991ec..c4d5a06 100644 --- a/src/templates/tag-template.js +++ b/src/templates/tag-template.js @@ -5,12 +5,10 @@ import Sidebar from '../components/Sidebar'; import Feed from '../components/Feed'; import Page from '../components/Page'; import Pagination from '../components/Pagination'; +import { useSiteMetadata } from '../hooks'; const TagTemplate = ({ data, pageContext }) => { - const { - title: siteTitle, - subtitle: siteSubtitle - } = data.site.siteMetadata; + const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata(); const { tag, diff --git a/src/templates/tag-template.test.js b/src/templates/tag-template.test.js index ddb9c17..cbe6aa0 100644 --- a/src/templates/tag-template.test.js +++ b/src/templates/tag-template.test.js @@ -1,71 +1,30 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import TagTemplate from './tag-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark'; +import pageContext from '../../jest/__fixtures__/page-context'; describe('TagTemplate', () => { + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(siteMetadata) + ), + useStaticQuery.mockReturnValue(siteMetadata) + ); + }); + const props = { data: { - allMarkdownRemark: { - group: [ - { - fieldValue: 'test_0', - totalCount: 1 - }, - { - fieldValue: 'test_1', - totalCount: 2 - } - ], - edges: [ - { - node: { - fields: { - slug: '/test_0', - categorySlug: '/test' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_0', - category: 'test', - title: 'test_0' - } - } - }, - { - node: { - fields: { - slug: '/test_1', - categorySlug: '/test' - }, - frontmatter: { - date: '2016-09-01', - description: 'test_1', - category: 'test', - title: 'test_1' - } - } - } - ] - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } + ...allMarkdownRemark }, - pageContext: { - tag: 'test', - currentPage: 1, - prevPagePath: '/page/1', - nextPagePath: '/page/3', - hasNextPage: true, - hasPrevPage: true - } + ...pageContext }; it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); -}); +}); \ No newline at end of file diff --git a/src/templates/tags-list-template.js b/src/templates/tags-list-template.js index 110ebe7..5a05b15 100644 --- a/src/templates/tags-list-template.js +++ b/src/templates/tags-list-template.js @@ -1,23 +1,21 @@ import React from 'react'; -import { Link, graphql } from 'gatsby'; +import { Link } from 'gatsby'; import kebabCase from 'lodash/kebabCase'; import Layout from '../components/Layout'; import Sidebar from '../components/Sidebar'; import Page from '../components/Page'; +import { useSiteMetadata, useTagsList } from '../hooks'; -const TagsListTemplate = ({ data }) => { - const { - title, - subtitle - } = data.site.siteMetadata; - const { group } = data.allMarkdownRemark; +const TagsListTemplate = () => { + const { title, subtitle } = useSiteMetadata(); + const tags = useTagsList(); return (
        - {group.map((tag) => ( + {tags.map((tag) => (
      • {tag.fieldValue} ({tag.totalCount}) @@ -30,23 +28,4 @@ const TagsListTemplate = ({ data }) => { ); }; -export const query = graphql` - query TagsListQuery { - site { - siteMetadata { - title, - subtitle - } - } - allMarkdownRemark( - filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } } - ) { - group(field: frontmatter___tags) { - fieldValue - totalCount - } - } - } -`; - export default TagsListTemplate; \ No newline at end of file diff --git a/src/templates/tags-list-template.test.js b/src/templates/tags-list-template.test.js index f530f0c..45121a0 100644 --- a/src/templates/tags-list-template.test.js +++ b/src/templates/tags-list-template.test.js @@ -1,33 +1,27 @@ import React from 'react'; import renderer from 'react-test-renderer'; +import { useStaticQuery, StaticQuery } from 'gatsby'; import TagsListTemplate from './tags-list-template'; +import siteMetadata from '../../jest/__fixtures__/site-metadata'; +import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark'; describe('TagsListTemplate', () => { const props = { - data: { - allMarkdownRemark: { - group: [ - { - fieldValue: 'test_0', - totalCount: 1 - }, - { - fieldValue: 'test_1', - totalCount: 2 - } - ] - }, - site: { - siteMetadata: { - title: 'test', - subtitle: 'test' - } - } - } + ...siteMetadata, + ...allMarkdownRemark }; + beforeEach(() => { + StaticQuery.mockImplementationOnce( + ({ render }) => ( + render(props) + ), + useStaticQuery.mockReturnValue(props) + ); + }); + it('renders correctly', () => { - const tree = renderer.create().toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); });