improvement: flow coverage

jest/__fixtures__/markdown-remark.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   markdownRemark: {
+    id: 'test-123',
     html: '<p>test</p>',
     fields: {
       tagSlugs: [

src/cms/preview-templates/page-preview.js

@@ -1,6 +1,13 @@
+// @flow
 import React from 'react';
+import type { Entry, WidgetFor } from '../../types';
 
-const PagePreview = ({ entry, widgetFor }) => {
+type Props = {
+  entry: Entry,
+  widgetFor: WidgetFor
+};
+
+const PagePreview = ({ entry, widgetFor }: Props) => {
   const body = widgetFor('body');
   const title = entry.getIn(['data', 'title']);
 

src/cms/preview-templates/post-preview.js

@@ -1,6 +1,13 @@
+// @flow
 import React from 'react';
+import type { Entry, WidgetFor } from '../../types';
 
-const PostPreview = ({ entry, widgetFor }) => {
+type Props = {
+  entry: Entry,
+  widgetFor: WidgetFor
+};
+
+const PostPreview = ({ entry, widgetFor }: Props) => {
   const body = widgetFor('body');
   const title = entry.getIn(['data', 'title']);
 

src/components/Feed/Feed.js

@@ -1,9 +1,15 @@
+// @flow
 import React from 'react';
 import moment from 'moment';
 import { Link } from 'gatsby';
+import type { Edges } from '../../types';
 import styles from './Feed.module.scss';
 
-const Feed = ({ edges }) => (
+type Props = {
+  edges: Edges
+};
+
+const Feed = ({ edges }: Props) => (
   <div className={styles['feed']}>
     {edges.map((edge) => (
       <div className={styles['feed__item']} key={edge.node.fields.slug}>

src/components/Feed/Feed.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Feed from './Feed';
@@ -9,28 +10,50 @@ describe('Feed', () => {
         node: {
           fields: {
             slug: '/test_0',
-            categorySlug: '/test_0'
+            categorySlug: '/test_0',
+            tagSlugs: [
+              '/test-1',
+              '/test-2'
+            ]
           },
           frontmatter: {
             date: '2016-09-01',
             description: 'test_0',
             category: 'test_0',
+            tags: [
+              'test-1',
+              'test-2'
+            ],
             title: 'test_0'
-          }
+          },
+          id: 'test-123',
+          html: '<p>test</p>'
+
         }
       },
       {
         node: {
           fields: {
             slug: '/test_1',
-            categorySlug: '/test_1'
+            categorySlug: '/test_1',
+            tagSlugs: [
+              '/test-1',
+              '/test-2'
+            ]
           },
           frontmatter: {
             date: '2016-09-01',
             description: 'test_1',
             category: 'test_1',
+            tags: [
+              'test-1',
+              'test-2'
+            ],
             title: 'test_1'
-          }
+          },
+          id: 'test-321',
+          html: '<p>test</p>'
+
         }
       }
     ]

src/components/Feed/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Feed';

src/components/Icon/Icon.js

@@ -1,7 +1,15 @@
+// @flow
 import React from 'react';
 import styles from './Icon.module.scss';
 
-const Icon = ({ icon }) => (
+type Props = {
+  icon: {
+    viewBox?: string,
+    path?: string
+  }
+};
+
+const Icon = ({ icon }: Props) => (
   <svg className={styles['icon']} viewBox={icon.viewBox}>
     <path d={icon.path} />
   </svg>

src/components/Icon/Icon.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Icon from './Icon';

src/components/Icon/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Icon';

src/components/Layout/Layout.js

@@ -1,8 +1,16 @@
+// @flow
 import React from 'react';
 import Helmet from 'react-helmet';
+import type { Node as ReactNode } from 'react';
 import styles from './Layout.module.scss';
 
-const Layout = ({ children, title, description }) => (
+type Props = {
+  children: ReactNode,
+  title: string,
+  description?: string
+};
+
+const Layout = ({ children, title, description }: Props) => (
   <div className={styles.layout}>
     <Helmet>
       <html lang="en" />

src/components/Layout/Layout.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Layout from './Layout';

src/components/Layout/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Layout';

src/components/Page/Page.js

@@ -1,7 +1,12 @@
 import React, { useRef, useEffect } from 'react';
 import styles from './Page.module.scss';
 
-const Page = ({ title, children }) => {
+type Props = {
+  title?: string,
+  children: React.Node
+};
+
+const Page = ({ title, children }: Props) => {
   const pageRef = useRef();
 
   useEffect(() => {

src/components/Page/Page.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Page from './Page';

src/components/Page/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Page';

src/components/Pagination/Pagination.js

@@ -1,9 +1,17 @@
+// @flow
 import React from 'react';
 import classNames from 'classnames/bind';
 import { Link } from 'gatsby';
 import { PAGINATION } from '../../constants';
 import styles from './Pagination.module.scss';
 
+type Props = {
+  prevPagePath: string,
+  nextPagePath: string,
+  hasNextPage: boolean,
+  hasPrevPage: boolean
+};
+
 const cx = classNames.bind(styles);
 
 const Pagination = ({
@@ -11,7 +19,7 @@ const Pagination = ({
   nextPagePath,
   hasNextPage,
   hasPrevPage
-}) => {
+}: Props) => {
   const prevClassName = cx({
     'pagination__prev-link': true,
     'pagination__prev-link--disable': !hasPrevPage

src/components/Pagination/Pagination.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Pagination from './Pagination';

src/components/Pagination/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Pagination';

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

@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Author from './Author';
 import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Author', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/components/Post/Comments/Comments.js

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import ReactDisqusComments from 'react-disqus-comments';
 import { useSiteMetadata } from '../../../hooks';
 
-const Comments = ({ postTitle, postSlug }) => {
+type Props = {
+  postTitle: string,
+  postSlug: string
+};
+
+const Comments = ({ postTitle, postSlug }: Props) => {
   const { url, disqusShortname } = useSiteMetadata();
 
   if (!disqusShortname) {

src/components/Post/Comments/Comments.test.js

@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Comments from './Comments';
 import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Comments', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/components/Post/Comments/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Comments';

src/components/Post/Content/Content.js

@@ -1,7 +1,13 @@
+// @flow
 import React from 'react';
 import styles from './Content.module.scss';
 
-const Content = ({ body, title }) => (
+type Props = {
+  body: string,
+  title: string
+};
+
+const Content = ({ body, title }: Props) => (
   <div className={styles['content']}>
     <h1 className={styles['content__title']}>{title}</h1>
     <div className={styles['content__body']} dangerouslySetInnerHTML={{ __html: body }} />

src/components/Post/Content/Content.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Content from './Content';

src/components/Post/Content/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Content';

src/components/Post/Meta/Meta.js

@@ -1,8 +1,13 @@
+// @flow
 import React from 'react';
 import moment from 'moment';
 import styles from './Meta.module.scss';
 
-const Meta = ({ date }) => (
+type Props = {
+  date: string
+};
+
+const Meta = ({ date }: Props) => (
   <div className={styles['meta']}>
     <p className={styles['meta__date']}>Published {moment(date).format('D MMM YYYY')}</p>
   </div>

src/components/Post/Meta/Meta.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Meta from './Meta';

src/components/Post/Meta/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Meta';

src/components/Post/Post.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import Author from './Author';
@@ -6,8 +7,13 @@ import Content from './Content';
 import Meta from './Meta';
 import Tags from './Tags';
 import styles from './Post.module.scss';
+import type { Node } from '../../types';
 
-const Post = ({ post }) => {
+type Props = {
+  post: Node
+};
+
+const Post = ({ post }: Props) => {
   const { html } = post;
   const { tagSlugs, slug } = post.fields;
   const { tags, title, date } = post.frontmatter;
@@ -22,7 +28,7 @@ const Post = ({ post }) => {
 
       <div className={styles['post__footer']}>
         <Meta date={date} />
-        {tags && <Tags tags={tags} tagSlugs={tagSlugs} />}
+        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
         <Author />
       </div>
 

src/components/Post/Post.test.js

@@ -1,13 +1,15 @@
+// @flow
 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';
+import type { RenderCallback } from '../../types';
 
 describe('Post', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
@@ -16,8 +18,11 @@ describe('Post', () => {
 
   const props = {
     post: {
+      id: 'test-123',
       html: '<p>test</p>',
       fields: {
+        slug: '/test',
+        categorySlug: '/test-category',
         tagSlugs: [
           '/test_0',
           '/test_1'

src/components/Post/Tags/Tags.js

@@ -1,11 +1,17 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './Tags.module.scss';
 
-const Tags = ({ tags, tagSlugs }) => (
+type Props = {
+  tags: string[],
+  tagSlugs: string[]
+};
+
+const Tags = ({ tags, tagSlugs }: Props) => (
   <div className={styles['tags']}>
     <ul className={styles['tags__list']}>
-      {tagSlugs.map((slug, i) => (
+      {tagSlugs && tagSlugs.map((slug, i) => (
         <li className={styles['tags__list-item']} key={tags[i]}>
           <Link to={slug} className={styles['tags__list-item-link']}>
             {tags[i]}

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

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Tags from './Tags';

src/components/Post/Tags/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Tags';

src/components/Post/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Post';

src/components/Sidebar/Author/Author.js

@@ -1,8 +1,18 @@
+// @flow
 import React from 'react';
 import { withPrefix, Link } from 'gatsby';
 import styles from './Author.module.scss';
 
-const Author = ({ author, isIndex }) => (
+type Props = {
+  author: {
+    name: string,
+    bio: string,
+    photo: string
+  },
+  isIndex: ?boolean
+};
+
+const Author = ({ author, isIndex }: Props) => (
   <div className={styles['author']}>
     <Link to="/">
       <img

src/components/Sidebar/Author/Author.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Author from './Author';
@@ -8,7 +9,8 @@ describe('Author', () => {
       name: 'test',
       photo: '/photo.jpg',
       bio: 'test'
-    }
+    },
+    isIndex: false
   };
 
   it('renders correctly', () => {

src/components/Sidebar/Author/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Author';

src/components/Sidebar/Contacts/Contacts.js

@@ -4,11 +4,11 @@ import { getContactHref, getIcon } from '../../../utils';
 import Icon from '../../Icon';
 import styles from './Contacts.module.scss';
 
-type Props = {|
-  +contacts: {
+type Props = {
+  contacts: {
     [string]: string,
   },
-|};
+};
 
 const Contacts = ({ contacts }: Props) => (
   <div className={styles['contacts']}>

src/components/Sidebar/Contacts/Contacts.test.js

@@ -1,3 +1,5 @@
+
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Contacts from './Contacts';

src/components/Sidebar/Contacts/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Contacts';

src/components/Sidebar/Copyright/Copyright.js

@@ -1,7 +1,12 @@
+// @flow
 import React from 'react';
 import styles from './Copyright.module.scss';
 
-const Copyright = ({ copyright }) => (
+type Props = {
+  copyright: string
+};
+
+const Copyright = ({ copyright }: Props) => (
   <div className={styles['copyright']}>
     {copyright}
   </div>

src/components/Sidebar/Copyright/Copyright.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Copyright from './Copyright';

src/components/Sidebar/Copyright/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Copyright';

src/components/Sidebar/Menu/Menu.js

@@ -1,8 +1,16 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './Menu.module.scss';
 
-const Menu = ({ menu }) => (
+type Props = {
+  menu: {
+    label: string,
+    path: string
+  }[]
+};
+
+const Menu = ({ menu }: Props) => (
   <nav className={styles['menu']}>
     <ul className={styles['menu__list']}>
       {menu.map((item) => (

src/components/Sidebar/Menu/Menu.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Menu from './Menu';

src/components/Sidebar/Menu/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Menu';

src/components/Sidebar/Sidebar.js

@@ -8,7 +8,7 @@ import styles from './Sidebar.module.scss';
 import { useSiteMetadata } from '../../hooks';
 
 type Props = {
-  +isIndex: ?boolean,
+  isIndex?: boolean,
 };
 
 const Sidebar = ({ isIndex }: Props) => {

src/components/Sidebar/Sidebar.test.js

@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Sidebar from './Sidebar';
 import siteMetadata from '../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../types';
 
 describe('Sidebar', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/components/Sidebar/index.js

@@ -1 +1,2 @@
+// @flow
 export { default } from './Sidebar';

src/templates/categories-list-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import kebabCase from 'lodash/kebabCase';

src/templates/categories-list-template.test.js

@@ -1,9 +1,11 @@
+// @flow
 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';
+import type { RenderCallback } from '../types';
 
 describe('CategoriesListTemplate', () => {
   const props = {
@@ -13,7 +15,7 @@ describe('CategoriesListTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(props)
       ),
       useStaticQuery.mockReturnValue(props)

src/templates/category-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
@@ -6,8 +7,14 @@ import Feed from '../components/Feed';
 import Page from '../components/Page';
 import Pagination from '../components/Pagination';
 import { useSiteMetadata } from '../hooks';
+import type { PageContext, AllMarkdownRemark } from '../types';
 
-const CategoryTemplate = ({ data, pageContext }) => {
+type Props = {
+  data: AllMarkdownRemark,
+  pageContext: PageContext
+};
+
+const CategoryTemplate = ({ data, pageContext }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
 
   const {

src/templates/category-template.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
@@ -5,6 +6,7 @@ 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';
+import type { RenderCallback } from '../types';
 
 describe('CategoryTemplate', () => {
   const props = {
@@ -16,7 +18,7 @@ describe('CategoryTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/index-template.js

@@ -7,10 +7,11 @@ import Feed from '../components/Feed';
 import Page from '../components/Page';
 import Pagination from '../components/Pagination';
 import { useSiteMetadata } from '../hooks';
+import type { PageContext, AllMarkdownRemark } from '../types';
 
 type Props = {
-  +data: Object,
-  +pageContext: Object,
+  data: AllMarkdownRemark,
+  pageContext: PageContext
 };
 
 const IndexTemplate = ({ data, pageContext }: Props) => {
@@ -46,12 +47,6 @@ const IndexTemplate = ({ data, pageContext }: Props) => {
 
 export const query = graphql`
   query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
     allMarkdownRemark(
         limit: $postsLimit,
         skip: $postsOffset,

src/templates/index-template.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { StaticQuery, useStaticQuery } from 'gatsby';
@@ -5,6 +6,7 @@ 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';
+import type { RenderCallback } from '../types';
 
 describe('IndexTemplate', () => {
   const props = {
@@ -16,7 +18,7 @@ describe('IndexTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/not-found-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Sidebar from '../components/Sidebar';
 import Layout from '../components/Layout';

src/templates/not-found-template.test.js

@@ -1,13 +1,15 @@
+// @flow
 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';
+import type { RenderCallback } from '../types';
 
 describe('NotFoundTemplate', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/page-template.js

@@ -1,11 +1,19 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import Page from '../components/Page';
 import { useSiteMetadata } from '../hooks';
+import type { MarkdownRemark } from '../types';
 
-const PageTemplate = ({ data }) => {
+type Props = {
+  data: {
+    markdownRemark: MarkdownRemark
+  }
+};
+
+const PageTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
   const { html: pageBody } = data.markdownRemark;
   const { title: pageTitle, description: pageDescription } = data.markdownRemark.frontmatter;
@@ -23,12 +31,6 @@ const PageTemplate = ({ data }) => {
 
 export const query = graphql`
   query PageBySlug($slug: String!) {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html

src/templates/page-template.test.js

@@ -1,9 +1,11 @@
+// @flow
 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';
+import type { RenderCallback } from '../types';
 
 describe('PageTemplate', () => {
   const props = {
@@ -14,7 +16,7 @@ describe('PageTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/post-template.js

@@ -3,8 +3,13 @@ import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
 import Post from '../components/Post';
 import { useSiteMetadata } from '../hooks';
+import type { MarkdownRemark } from '../types';
 
-const PostTemplate = ({ data }) => {
+type Props = {
+  data: MarkdownRemark
+};
+
+const PostTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
   const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter;
   const metaDescription = postDescription !== null ? postDescription : siteSubtitle;

src/templates/post-template.test.js

@@ -1,9 +1,11 @@
+// @flow
 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';
+import type { RenderCallback } from '../types';
 
 describe('PostTemplate', () => {
   const props = {
@@ -14,7 +16,7 @@ describe('PostTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/tag-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
@@ -6,8 +7,14 @@ import Feed from '../components/Feed';
 import Page from '../components/Page';
 import Pagination from '../components/Pagination';
 import { useSiteMetadata } from '../hooks';
+import type { AllMarkdownRemark, PageContext } from '../types';
 
-const TagTemplate = ({ data, pageContext }) => {
+type Props = {
+  data: AllMarkdownRemark,
+  pageContext: PageContext
+};
+
+const TagTemplate = ({ data, pageContext }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
 
   const {

src/templates/tag-template.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
@@ -5,11 +6,12 @@ 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';
+import type { RenderCallback } from '../types';
 
 describe('TagTemplate', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)

src/templates/tags-list-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import kebabCase from 'lodash/kebabCase';

src/templates/tags-list-template.test.js

@@ -1,9 +1,11 @@
+// @flow
 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';
+import type { RenderCallback } from '../types';
 
 describe('TagsListTemplate', () => {
   const props = {
@@ -13,7 +15,7 @@ describe('TagsListTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(props)
       ),
       useStaticQuery.mockReturnValue(props)

src/types/index.js

@@ -0,0 +1,53 @@
+// @flow
+import type { Node as ReactNode } from 'react';
+
+export type RenderCallback = (data: any) => ReactNode;
+
+export type Entry = (string[]) => string;
+
+export type WidgetFor = (string) => string;
+
+export type PageContext = {
+  tag: string,
+  category: string,
+  currentPage: number,
+  prevPagePath: string,
+  nextPagePath: string,
+  hasPrevPage: boolean,
+  hasNextPage: boolean
+};
+
+export type Node = {
+  fields: {
+    slug: string,
+    categorySlug?: string,
+    tagSlugs?: string[]
+  },
+  frontmatter: {
+    date: string,
+    description?: string,
+    category?: string,
+    tags?: string[],
+    title: string,
+  },
+  html: string,
+  id: string
+};
+
+export type Edge = {
+  node: Node
+};
+
+export type Edges = Array<Edge>;
+
+export type AllMarkdownRemark = {
+  allMarkdownRemark: {
+    edges: Edges,
+  },
+  group: {
+    fieldValue: string,
+    totalCount: number
+  }[]
+};
+
+export type MarkdownRemark = Node;