From cce9ef7b601681addc2764ea215a7a16b1ca82ce Mon Sep 17 00:00:00 2001
From: tricinel <bogdan@bogdanlazar.com>
Date: Tue, 24 Oct 2017 18:49:29 +0200
Subject: [PATCH 1/9] Add flow types to components; realted to #24

---
 flow-typed/glamor.js                          | 10 ++++++++
 src/components/Flex/Flex.js                   | 17 ++++++++++++-
 .../LayoutFooter/ExternalFooterLink.js        | 12 +++++++++-
 src/components/LayoutFooter/Footer.js         |  3 ++-
 src/components/LayoutFooter/FooterLink.js     | 11 ++++++++-
 src/components/LayoutFooter/FooterNav.js      | 11 ++++++++-
 src/components/LayoutHeader/DocSearch.js      |  7 +++++-
 src/components/LayoutHeader/Header.js         |  3 ++-
 src/components/LayoutHeader/HeaderLink.js     |  9 ++++++-
 .../StickyResponsiveSidebar.js                | 24 +++++++++++++++----
 10 files changed, 95 insertions(+), 12 deletions(-)

diff --git a/flow-typed/glamor.js b/flow-typed/glamor.js
index 507ea4b7..1c87bfc2 100644
--- a/flow-typed/glamor.js
+++ b/flow-typed/glamor.js
@@ -5,3 +5,13 @@ declare module 'glamor' {
     },
   };
 }
+
+declare module 'glamor/react' {
+  declare module.exports: {
+    createElement: any,
+    dom: any,
+    vars: any,
+    makeTheme: any,
+    propMerge: Function,
+  };
+}
diff --git a/src/components/Flex/Flex.js b/src/components/Flex/Flex.js
index 6acc11e6..8784aa79 100644
--- a/src/components/Flex/Flex.js
+++ b/src/components/Flex/Flex.js
@@ -2,12 +2,27 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import {createElement} from 'glamor/react';
 
+import type {Node} from 'react';
+
+type Props = {
+  basis: string,
+  children: Node,
+  direction: string,
+  grow: number,
+  halign: string,
+  shrink: number,
+  type: string,
+  valign: string,
+  rest: Array<any>,
+};
+
 /**
  * Convenience component for declaring a flexbox layout.
  */
@@ -21,7 +36,7 @@ const Flex = ({
   type = 'div',
   valign = 'flex-start',
   ...rest
-}) =>
+}: Props) =>
   createElement(
     type,
     {
diff --git a/src/components/LayoutFooter/ExternalFooterLink.js b/src/components/LayoutFooter/ExternalFooterLink.js
index 04632fda..1d77ed6c 100644
--- a/src/components/LayoutFooter/ExternalFooterLink.js
+++ b/src/components/LayoutFooter/ExternalFooterLink.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,16 @@ import React from 'react';
 import {colors} from 'theme';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 
-const ExternalFooterLink = ({children, href, target, rel}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  href: string,
+  target?: string,
+  rel?: string,
+};
+
+const ExternalFooterLink = ({children, href, target, rel}: Props) => (
   <a
     css={{
       lineHeight: 2,
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 673534fe..34ad70e0 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -16,7 +17,7 @@ import {colors, media} from 'theme';
 
 import ossLogoPng from 'images/oss_logo.png';
 
-const Footer = ({layoutHasSidebar = false}) => (
+const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
     css={{
       backgroundColor: colors.darker,
diff --git a/src/components/LayoutFooter/FooterLink.js b/src/components/LayoutFooter/FooterLink.js
index 9969309e..1e54b75c 100644
--- a/src/components/LayoutFooter/FooterLink.js
+++ b/src/components/LayoutFooter/FooterLink.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,15 @@ import Link from 'gatsby-link';
 import React from 'react';
 import {colors} from 'theme';
 
-const FooterLink = ({children, target, to}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  target?: string,
+  to: string,
+};
+
+const FooterLink = ({children, target, to}: Props) => (
   <Link
     css={{
       lineHeight: 2,
diff --git a/src/components/LayoutFooter/FooterNav.js b/src/components/LayoutFooter/FooterNav.js
index b3861b42..914d8a6b 100644
--- a/src/components/LayoutFooter/FooterNav.js
+++ b/src/components/LayoutFooter/FooterNav.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -9,7 +10,15 @@
 import React from 'react';
 import {media} from 'theme';
 
-const FooterNav = ({children, title, layoutHasSidebar = false}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  title?: string,
+  layoutHasSidebar: boolean,
+};
+
+const FooterNav = ({children, title, layoutHasSidebar = false}: Props) => (
   <div
     css={{
       display: 'flex',
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index 8619e314..b3150591 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -2,12 +2,17 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 import React, {Component} from 'react';
 import {colors, media} from 'theme';
 
-class DocSearch extends Component {
+type State = {
+  enabled: boolean,
+};
+
+class DocSearch extends Component<{}, State> {
   state = {
     enabled: true,
   };
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 9b2d9560..09464456 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -17,7 +18,7 @@ import DocSearch from './DocSearch';
 
 import logoSvg from 'icons/logo.svg';
 
-const Header = ({location}) => (
+const Header = ({location}: {location: Location}) => (
   <header
     css={{
       backgroundColor: colors.darker,
diff --git a/src/components/LayoutHeader/HeaderLink.js b/src/components/LayoutHeader/HeaderLink.js
index 69d91423..7ef61f09 100644
--- a/src/components/LayoutHeader/HeaderLink.js
+++ b/src/components/LayoutHeader/HeaderLink.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,13 @@ import Link from 'gatsby-link';
 import React from 'react';
 import {colors, media} from 'theme';
 
-const HeaderLink = ({isActive, title, to}) => (
+type Props = {
+  isActive: boolean,
+  title: string,
+  to: string,
+};
+
+const HeaderLink = ({isActive, title, to}: Props) => (
   <Link css={[style, isActive && activeStyle]} to={to}>
     {title}
     {isActive && <span css={activeAfterStyle} />}
diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
index 13b2ec6c..f76d7ac8 100644
--- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
+++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -2,19 +2,32 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import Container from 'components/Container';
-import {Component, React} from 'react';
+import React, {Component} from 'react';
 import Sidebar from 'templates/components/Sidebar';
 import {colors, media} from 'theme';
 import ChevronSvg from 'templates/components/ChevronSvg';
 
-class StickyResponsiveSidebar extends Component {
-  constructor(props, context) {
-    super(props, context);
+type State = {
+  open: boolean,
+};
+
+type Props = {
+  enableScrollSync?: boolean,
+  createLink: Function, // TODO: Add better flow type once we Flow-type createLink
+  defaultActiveSection: string,
+  location: Location,
+  sectionList: Array<Object>, // TODO: Add better flow type once we have the Section component
+};
+
+class StickyResponsiveSidebar extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
 
     this.state = {
       open: false,
@@ -23,6 +36,9 @@ class StickyResponsiveSidebar extends Component {
     this._closeNavMenu = this._closeNavMenu.bind(this);
   }
 
+  _openNavMenu: Function;
+  _closeNavMenu: Function;
+
   _openNavMenu() {
     this.setState({open: !this.state.open});
   }

From cf2bd4c1713a73aa06ee6b0342e34a14b86567e1 Mon Sep 17 00:00:00 2001
From: tricinel <bogdan@bogdanlazar.com>
Date: Mon, 20 Nov 2017 16:33:32 +0100
Subject: [PATCH 2/9] Reorganise open/close navMenu functions

---
 .../StickyResponsiveSidebar.js                      | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
index f76d7ac8..d58a24d0 100644
--- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
+++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -32,20 +32,15 @@ class StickyResponsiveSidebar extends Component<Props, State> {
     this.state = {
       open: false,
     };
-    this._openNavMenu = this._openNavMenu.bind(this);
-    this._closeNavMenu = this._closeNavMenu.bind(this);
   }
 
-  _openNavMenu: Function;
-  _closeNavMenu: Function;
-
-  _openNavMenu() {
+  _openNavMenu = () => {
     this.setState({open: !this.state.open});
-  }
+  };
 
-  _closeNavMenu() {
+  _closeNavMenu = () => {
     this.setState({open: false});
-  }
+  };
 
   render() {
     const {open} = this.state;

From 232d15463dabfb8d2f03d659ad31c23136925642 Mon Sep 17 00:00:00 2001
From: tricinel <bogdan@bogdanlazar.com>
Date: Mon, 20 Nov 2017 17:57:36 +0100
Subject: [PATCH 3/9] Add flow types; related to #24

---
 flow-typed/glamor.js                        |  4 +++
 flow-typed/polyfills.js                     | 11 +++++++
 src/components/ErrorDecoder/ErrorDecoder.js | 35 ++++++++++++++-------
 src/layouts/index.js                        | 10 +++++-
 src/pages/docs/error-decoder.html.js        |  8 ++++-
 5 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 flow-typed/polyfills.js

diff --git a/flow-typed/glamor.js b/flow-typed/glamor.js
index 1c87bfc2..d6ae5ca4 100644
--- a/flow-typed/glamor.js
+++ b/flow-typed/glamor.js
@@ -15,3 +15,7 @@ declare module 'glamor/react' {
     propMerge: Function,
   };
 }
+
+declare module 'glamor/reset' {
+  declare module.exports: any;
+}
diff --git a/flow-typed/polyfills.js b/flow-typed/polyfills.js
new file mode 100644
index 00000000..9aa0daec
--- /dev/null
+++ b/flow-typed/polyfills.js
@@ -0,0 +1,11 @@
+declare module 'array-from' {
+  declare module.exports: any;
+}
+
+declare module 'string.prototype.includes' {
+  declare module.exports: any;
+}
+
+declare module 'string.prototype.repeat' {
+  declare module.exports: any;
+}
diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js
index 3e638d61..28bc7db7 100644
--- a/src/components/ErrorDecoder/ErrorDecoder.js
+++ b/src/components/ErrorDecoder/ErrorDecoder.js
@@ -2,14 +2,14 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
-function replaceArgs(msg, argList) {
+function replaceArgs(msg: string, argList: Array<any>): string {
   let argIdx = 0;
   return msg.replace(/%s/g, function() {
     const arg = argList[argIdx++];
@@ -17,7 +17,7 @@ function replaceArgs(msg, argList) {
   });
 }
 
-function urlify(str) {
+function urlify(str: string): Array<any> {
   const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
 
   const segments = str.split(urlRegex);
@@ -25,6 +25,7 @@ function urlify(str) {
   for (let i = 0; i < segments.length; i++) {
     if (i % 2 === 1) {
       segments[i] = (
+        // $FlowFixMe: We need to properly trace this error: React element 'a' inconsistent use of library definitions
         <a key={i} target="_blank" rel="noopener" href={segments[i]}>
           {segments[i]}
         </a>
@@ -36,7 +37,7 @@ function urlify(str) {
 }
 
 // ?invariant=123&args[]=foo&args[]=bar
-function parseQueryString(location) {
+function parseQueryString(location: Location): null | Array<any> {
   const rawQueryString = location.search.substring(1);
   if (!rawQueryString) {
     return null;
@@ -58,7 +59,12 @@ function parseQueryString(location) {
   return [code, args];
 }
 
-function ErrorResult(props) {
+type ErrorResultProps = {
+  code: mixed,
+  msg: string,
+};
+
+function ErrorResult(props: ErrorResultProps) {
   const code = props.code;
   const errorMsg = props.msg;
 
@@ -79,8 +85,18 @@ function ErrorResult(props) {
   );
 }
 
-class ErrorDecoder extends Component {
-  constructor(...args) {
+type ErrorDecoderProps = {
+  errorCodesString: string,
+  location: Location,
+};
+
+type State = {
+  code: mixed,
+  errorMsg: string,
+};
+
+class ErrorDecoder extends Component<ErrorDecoderProps, State> {
+  constructor(...args: Array<any>) {
     super(...args);
 
     this.state = {
@@ -109,9 +125,4 @@ class ErrorDecoder extends Component {
   }
 }
 
-ErrorDecoder.propTypes = {
-  errorCodesString: PropTypes.string.isRequired,
-  location: PropTypes.object.isRequired,
-};
-
 export default ErrorDecoder;
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 661a4ff4..5ef58119 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -2,10 +2,13 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
+// FIXME: I actually cannot figure out where this Template is used
+
 // Polyfills for IE
 import 'array-from';
 import 'string.prototype.includes';
@@ -23,7 +26,12 @@ import 'glamor/reset';
 import 'css/reset.css';
 import 'css/algolia.css';
 
-class Template extends Component {
+type Props = {
+  children: any, // I don't think this is a Node type
+  location: Location,
+};
+
+class Template extends Component<Props> {
   render() {
     const {children, location} = this.props;
 
diff --git a/src/pages/docs/error-decoder.html.js b/src/pages/docs/error-decoder.html.js
index 4022677a..d1b0e451 100644
--- a/src/pages/docs/error-decoder.html.js
+++ b/src/pages/docs/error-decoder.html.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -19,7 +20,12 @@ import {createLinkDocs} from 'utils/createLink';
 import findSectionForPath from 'utils/findSectionForPath';
 import {sectionListDocs} from 'utils/sectionList';
 
-const ErrorPage = ({data, location}) => (
+type Props = {
+  data: Object,
+  location: Location,
+};
+
+const ErrorPage = ({data, location}: Props) => (
   <Flex
     direction="column"
     grow="1"

From 990a13e2afd0364a51cc9cfdcf20bb87d7decd52 Mon Sep 17 00:00:00 2001
From: tricinel <bogdan@bogdanlazar.com>
Date: Tue, 28 Nov 2017 14:57:20 +0100
Subject: [PATCH 4/9] Handle case when author does not exist

According to the Edge type in allMarkdownRemarkData, the author in
frontmatter could be undefined.

related to #24
---
 src/pages/blog/all.html.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/blog/all.html.js b/src/pages/blog/all.html.js
index e0ccab69..4f6a6cf9 100644
--- a/src/pages/blog/all.html.js
+++ b/src/pages/blog/all.html.js
@@ -76,18 +76,22 @@ const AllBlogPosts = ({data}: Props) => (
                 </Link>
               </h2>
               <MetaTitle>{node.fields.date}</MetaTitle>
-              <div
-                css={{
-                  color: colors.subtle,
-                  marginTop: -5,
-                }}>
-                by{' '}
-                {toCommaSeparatedList(node.frontmatter.author, author => (
-                  <span key={author.frontmatter.name}>
-                    {author.frontmatter.name}
-                  </span>
-                ))}
-              </div>
+              {node.frontmatter.author ? (
+                <div
+                  css={{
+                    color: colors.subtle,
+                    marginTop: -5,
+                  }}>
+                  by{' '}
+                  {toCommaSeparatedList(node.frontmatter.author, author => (
+                    <span key={author.frontmatter.name}>
+                      {author.frontmatter.name}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <div />
+              )}
             </li>
           ))}
         </ul>

From 4bf2356e02f4a32cf3ae39078db1891eaf70082a Mon Sep 17 00:00:00 2001
From: tricinel <bogdan@bogdanlazar.com>
Date: Tue, 28 Nov 2017 15:00:19 +0100
Subject: [PATCH 5/9] Add flow types to utils

---
 flow-typed/slugify.js             |  3 +++
 src/utils/createLink.js           | 38 +++++++++++++++++++++++++++----
 src/utils/createOgUrl.js          |  3 ++-
 src/utils/findSectionForPath.js   | 16 ++++++++++++-
 src/utils/isItemActive.js         | 10 ++++++--
 src/utils/sectionList.js          |  8 +++++--
 src/utils/slugify.js              |  3 ++-
 src/utils/toCommaSeparatedList.js | 10 ++++++--
 8 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 flow-typed/slugify.js

diff --git a/flow-typed/slugify.js b/flow-typed/slugify.js
new file mode 100644
index 00000000..82a44ce4
--- /dev/null
+++ b/flow-typed/slugify.js
@@ -0,0 +1,3 @@
+declare module 'slugify' {
+  declare module.exports: any;
+}
diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index 98ee4039..9f6def70 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -12,7 +13,19 @@ import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 
-const createLinkBlog = ({isActive, item, section}) => {
+import type {Node} from 'react';
+
+type CreateLinkBaseProps = {
+  isActive: boolean,
+  item: Object,
+  section: Object,
+};
+
+const createLinkBlog = ({
+  isActive,
+  item,
+  section,
+}: CreateLinkBaseProps): Node => {
   return (
     <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
       {isActive && <span css={activeLinkBefore} />}
@@ -21,7 +34,11 @@ const createLinkBlog = ({isActive, item, section}) => {
   );
 };
 
-const createLinkCommunity = ({isActive, item, section}) => {
+const createLinkCommunity = ({
+  isActive,
+  item,
+  section,
+}: CreateLinkBaseProps): Node => {
   if (item.href) {
     return (
       <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
@@ -44,7 +61,11 @@ const createLinkCommunity = ({isActive, item, section}) => {
   });
 };
 
-const createLinkDocs = ({isActive, item, section}) => {
+const createLinkDocs = ({
+  isActive,
+  item,
+  section,
+}: CreateLinkBaseProps): Node => {
   return (
     <Link
       css={[linkCss, isActive && activeLinkCss]}
@@ -55,7 +76,16 @@ const createLinkDocs = ({isActive, item, section}) => {
   );
 };
 
-const createLinkTutorial = ({isActive, item, onLinkClick, section}) => {
+type CreateLinkTutorialProps = {
+  onLinkClick: Function,
+} & CreateLinkBaseProps;
+
+const createLinkTutorial = ({
+  isActive,
+  item,
+  onLinkClick,
+  section,
+}: CreateLinkTutorialProps): Node => {
   return (
     <Link
       css={[linkCss, isActive && activeLinkCss]}
diff --git a/src/utils/createOgUrl.js b/src/utils/createOgUrl.js
index e739aff0..b6c3ee82 100644
--- a/src/utils/createOgUrl.js
+++ b/src/utils/createOgUrl.js
@@ -2,11 +2,12 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import {urlRoot} from 'site-constants';
 
-export default slug =>
+export default (slug: string): string | null =>
   slug == null ? null : `${urlRoot}/${slug.replace(/^\//, '')}`;
diff --git a/src/utils/findSectionForPath.js b/src/utils/findSectionForPath.js
index 4526a7b8..cf02e67a 100644
--- a/src/utils/findSectionForPath.js
+++ b/src/utils/findSectionForPath.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -12,7 +13,20 @@ import slugify from './slugify';
  * Helper method to locate the section containing the current URL/path.
  * This method specifically works with the nav_*.yml format.
  */
-const findSectionForPath = (pathname, sections) => {
+
+type Item = {
+  id: string,
+  subitems: Array<Item>,
+};
+
+type Section = {
+  items: Array<Item>,
+};
+
+const findSectionForPath = (
+  pathname: string,
+  sections: Array<Section>,
+): Section | void => {
   let activeSection;
   const slugId = pathname.split('/').slice(-1)[0];
 
diff --git a/src/utils/isItemActive.js b/src/utils/isItemActive.js
index 65ee686e..fd766aea 100644
--- a/src/utils/isItemActive.js
+++ b/src/utils/isItemActive.js
@@ -2,13 +2,14 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import slugify from 'utils/slugify';
 
-const toAnchor = (href = '') => {
+const toAnchor = (href: string = ''): string => {
   const index = href.indexOf('#');
   return index >= 0 ? href.substr(index) : '';
 };
@@ -16,7 +17,12 @@ const toAnchor = (href = '') => {
 // TODO Account for redirect_from URLs somehow; they currently won't match.
 // This comment should not be true anymore since we're using 300 redirects
 
-const isItemActive = (location, item) => {
+type Item = {
+  id: string,
+  href: string,
+};
+
+const isItemActive = (location: Location, item: Item): boolean => {
   if (location.hash) {
     if (item.href) {
       return location.hash === toAnchor(item.href);
diff --git a/src/utils/sectionList.js b/src/utils/sectionList.js
index b7cb8ae4..f2ef5a39 100644
--- a/src/utils/sectionList.js
+++ b/src/utils/sectionList.js
@@ -2,20 +2,24 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
+// $FlowExpectedError
 import navCommunity from '../../content/community/nav.yml';
+// $FlowExpectedError
 import navDocs from '../../content/docs/nav.yml';
+// $FlowExpectedError
 import navTutorial from '../../content/tutorial/nav.yml';
 
-const sectionListDocs = navDocs.map(item => ({
+const sectionListDocs = navDocs.map((item: Object): Object => ({
   ...item,
   directory: 'docs',
 }));
 
-const sectionListCommunity = navCommunity.map(item => ({
+const sectionListCommunity = navCommunity.map((item: Object): Object => ({
   ...item,
   directory: 'community',
 }));
diff --git a/src/utils/slugify.js b/src/utils/slugify.js
index 9b509ec8..7ca42ad0 100644
--- a/src/utils/slugify.js
+++ b/src/utils/slugify.js
@@ -2,13 +2,14 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import slugify from 'slugify';
 
-export default (string, directory) => {
+export default (string: string, directory?: string): string => {
   const filename = slugify(string) + '.html';
 
   return directory ? `/${directory}/${filename}` : filename;
diff --git a/src/utils/toCommaSeparatedList.js b/src/utils/toCommaSeparatedList.js
index 96c6d9f7..319a5031 100644
--- a/src/utils/toCommaSeparatedList.js
+++ b/src/utils/toCommaSeparatedList.js
@@ -2,16 +2,22 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import React from 'react';
 
-const addString = (list, string) =>
+import type {Node} from 'react';
+
+const addString = (list: Array<Node>, string: string) =>
   list.push(<span key={`${list.length}-${string}`}>{string}</span>);
 
-const toCommaSeparatedList = (array, renderCallback) => {
+const toCommaSeparatedList = (
+  array: Array<any>,
+  renderCallback: Function,
+): Array<any> => {
   if (array.length <= 1) {
     return array.map(renderCallback);
   }

From f92249c8b74171ba213b8181055c8551bc8b14e6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 29 Nov 2017 13:20:22 -0800
Subject: [PATCH 6/9] Removed FIXME comment

---
 src/layouts/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/index.js b/src/layouts/index.js
index 5ef58119..7cb6abef 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -7,8 +7,6 @@
 
 'use strict';
 
-// FIXME: I actually cannot figure out where this Template is used
-
 // Polyfills for IE
 import 'array-from';
 import 'string.prototype.includes';

From 2a165e7e8896728c20a275b37c8eb45ec246ff23 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 29 Nov 2017 13:21:57 -0800
Subject: [PATCH 7/9] Fixed `children` Flow type for layout template

---
 src/layouts/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/index.js b/src/layouts/index.js
index 7cb6abef..3630653b 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -25,7 +25,7 @@ import 'css/reset.css';
 import 'css/algolia.css';
 
 type Props = {
-  children: any, // I don't think this is a Node type
+  children: Function,
   location: Location,
 };
 

From d2a9c9aed70452b58af8e89a511df970cffbd254 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 29 Nov 2017 13:26:06 -0800
Subject: [PATCH 8/9] Removed unnecessary empty <div> from conditional

---
 src/pages/blog/all.html.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/blog/all.html.js b/src/pages/blog/all.html.js
index 4f6a6cf9..9c97c0a7 100644
--- a/src/pages/blog/all.html.js
+++ b/src/pages/blog/all.html.js
@@ -90,7 +90,7 @@ const AllBlogPosts = ({data}: Props) => (
                   ))}
                 </div>
               ) : (
-                <div />
+                null
               )}
             </li>
           ))}

From 989cccee1024501b3fb9cec6af83bdb755012c81 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 29 Nov 2017 13:26:52 -0800
Subject: [PATCH 9/9] Prettier fix

---
 src/pages/blog/all.html.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/blog/all.html.js b/src/pages/blog/all.html.js
index 9c97c0a7..b7ba40bd 100644
--- a/src/pages/blog/all.html.js
+++ b/src/pages/blog/all.html.js
@@ -89,9 +89,7 @@ const AllBlogPosts = ({data}: Props) => (
                     </span>
                   ))}
                 </div>
-              ) : (
-                null
-              )}
+              ) : null}
             </li>
           ))}
         </ul>