refactor: using react hooks

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 (
     <div className={styles['author']}>
@@ -24,25 +24,4 @@ export const PureAuthor = ({ data }: Object) => {
   );
 };
 
-export const Author = () => (
-  <StaticQuery
-    query={graphql`
-      query AuthorQuery {
-        site {
-          siteMetadata {
-            author {
-              name
-              bio
-              contacts {
-                twitter
-              }
-            }
-          }
-        }
-      }
-    `}
-    render={(data) => <PureAuthor data={data} />}
-  />
-);
-
 export default Author;

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(<Author {...props} />).toJSON();
+  it('renders correctly', () => {
+    const tree = renderer.create(<Author />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/Post/Author/__snapshots__/Author.test.js.snap

@@ -7,15 +7,15 @@ exports[`Author renders correctly 1`] = `
   <p
     className="author__bio"
   >
-    test
+    Test bio
     <a
       className="author__bio-twitter"
-      href="https://www.twitter.com/test"
+      href="https://www.twitter.com/#"
       rel="noopener noreferrer"
       target="_blank"
     >
       <strong>
-        test
+        Test name
       </strong>
        on Twitter
     </a>

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) => (
-  <StaticQuery
-    query={graphql`
-      query CommentsQuery {
-        site {
-          siteMetadata {
-            disqusShortname
-            url
-          }
-        }
-      }
-    `}
-    render={(data) => <PureComments {...props} data={data}/>}
-  />
-);
-
 export default Comments;

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(<Comments {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

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`] = `
-<div>
-  <div
-    id="disqus_thread"
-  />
-</div>
-`;
+exports[`Comments renders correctly 1`] = `null`;

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 (
     <div className={styles['post']}>
@@ -32,7 +27,7 @@ const Post = ({ post }) => {
       </div>
 
       <div className={styles['post__comments']}>
-        <Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
+        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
       </div>
     </div>
   );

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: '<p>test</p>',

src/components/Post/Tags/__snapshots__/Tags.test.js.snap

@@ -10,22 +10,22 @@ exports[`Tags renders correctly 1`] = `
     <li
       className="tags__list-item"
     >
-      <Link
+      <a
         className="tags__list-item-link"
-        to="/test_0"
+        href="/test_0"
       >
         test_0
-      </Link>
+      </a>
     </li>
     <li
       className="tags__list-item"
     >
-      <Link
+      <a
         className="tags__list-item-link"
-        to="/test_1"
+        href="/test_1"
       >
         test_1
-      </Link>
+      </a>
     </li>
   </ul>
 </div>

src/components/Post/__snapshots__/Post.test.js.snap

@@ -4,12 +4,12 @@ exports[`Post renders correctly 1`] = `
 <div
   className="post"
 >
-  <Link
+  <a
     className="post__home-button"
-    to="/"
+    href="/"
   >
     All Articles
-  </Link>
+  </a>
   <div
     className="post__content"
   >
@@ -53,35 +53,48 @@ exports[`Post renders correctly 1`] = `
         <li
           className="tags__list-item"
         >
-          <Link
+          <a
             className="tags__list-item-link"
-            to="/test_0"
+            href="/test_0"
           >
             test_0
-          </Link>
+          </a>
         </li>
         <li
           className="tags__list-item"
         >
-          <Link
+          <a
             className="tags__list-item-link"
-            to="/test_1"
+            href="/test_1"
           >
             test_1
-          </Link>
+          </a>
         </li>
       </ul>
     </div>
-    <StaticQuery
-      render={[Function]}
-    />
+    <div
+      className="author"
+    >
+      <p
+        className="author__bio"
+      >
+        Test bio
+        <a
+          className="author__bio-twitter"
+          href="https://www.twitter.com/#"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <strong>
+            Test name
+          </strong>
+           on Twitter
+        </a>
+      </p>
+    </div>
   </div>
   <div
     className="post__comments"
-  >
-    <StaticQuery
-      render={[Function]}
-    />
-  </div>
+  />
 </div>
 `;