import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { getContactHref } from '../../../utils';
import styles from './Author.module.scss';

export const PureAuthor = ({ data }) => {
  const { author } = data.site.siteMetadata;

  return (
    <div className={styles['author']}>
      <p className={styles['author__bio']}>
        {author.bio}
        <a
          className={styles['author__bio-twitter']}
          href={getContactHref('twitter', author.contacts.twitter)}
          rel="noopener noreferrer"
          target="_blank"
        >
          <strong>{author.name}</strong> on Twitter
        </a>
      </p>
    </div>
  );
};

export const Author = (props) => (
  <StaticQuery
    query={graphql`
      query AuthorQuery {
        site {
          siteMetadata {
            author {
              name
              bio
              contacts {       
                twitter
              }
            }
          }
        }
      }
    `}
    render={(data) => <PureAuthor {...props} data={data} />}
  />
);

export default Author;

@@ -1,12 +1,21 @@
+// @flow%0A
 import React
@@ -204,16 +204,24 @@
 %7B data %7D
+: Object
 ) =%3E %7B%0A 
@@ -702,21 +702,16 @@
 thor = (
-props
 ) =%3E (%0A 
@@ -892,23 +892,16 @@
 ntacts %7B
-       
 %0A       
@@ -984,16 +984,16 @@
 %0A    %60%7D%0A
+
     rend
@@ -1021,19 +1021,8 @@
 thor
- %7B...props%7D
  dat

Add Flow Typing for Post/Author.js