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>