Add flow types to utils

Author: tricinel

flow-typed/slugify.js

@@ -0,0 +1,3 @@
+declare module 'slugify' {
+  declare module.exports: any;
+}

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]}

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(/^\//, '')}`;

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];
 

src/utils/isItemActive.js

@@ -2,21 +2,27 @@
  * 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) : '';
 };
 
 // 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);

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',
 }));

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;

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);
   }