Flow for all the files

frontend/components/Alert/Alert.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { PropTypes } from 'react';
 import { Flex } from 'reflexbox';
 import classNames from 'classnames/bind';

frontend/components/Alert/index.js

@@ -1,2 +1,3 @@
+// @flow
 import Alert from './Alert';
 export default Alert;

frontend/components/AtlasPreview/AtlasPreview.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { observer } from 'mobx-react';
 import Link from 'react-router/lib/Link';

frontend/components/AtlasPreview/components/DocumentLink/DocumentLink.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { observer } from 'mobx-react';
 

frontend/components/AtlasPreview/components/DocumentLink/index.js

@@ -1,2 +1,3 @@
+// @flow
 import DocumentLink from './DocumentLink';
 export default DocumentLink;

frontend/components/AtlasPreview/index.js

@@ -1,2 +1,3 @@
+// @flow
 import AtlasPreview from './AtlasPreview';
 export default AtlasPreview;

frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled, { keyframes } from 'styled-components';

frontend/components/AtlasPreviewLoading/index.js

@@ -1,2 +1,3 @@
+// @flow
 import AtlasPreviewLoading from './AtlasPreviewLoading';
 export default AtlasPreviewLoading;

frontend/components/Button/index.js

@@ -1,2 +0,0 @@
-import Button from './Button';
-export default Button;

frontend/components/CenteredContent/CenteredContent.js

@@ -3,9 +3,9 @@ import React from 'react';
 import styles from './CenteredContent.scss';
 
 type Props = {
-  children: any,
-  style: Object,
-  maxWidth: string,
+  children?: React.Element<any>,
+  style?: Object,
+  maxWidth?: string,
 };
 
 const CenteredContent = (props: Props) => {

frontend/components/CenteredContent/index.js

@@ -1,2 +1,3 @@
+// @flow
 import CenteredContent from './CenteredContent';
 export default CenteredContent;

frontend/components/Divider/Divider.js

@@ -1,8 +1,9 @@
+// @flow
 import React from 'react';
 
 import styles from './Divider.scss';
 
-const Divider = props => {
+const Divider = () => {
   return <div className={styles.divider}><span /></div>;
 };
 

frontend/components/Divider/index.js

@@ -1,2 +1,3 @@
+// @flow
 import Divider from './Divider';
 export default Divider;

frontend/components/Document/components/DocumentHtml/DocumentHtml.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
@@ -18,9 +19,11 @@ import styles from './DocumentHtml.scss';
   };
 
   setExternalLinks = () => {
+    // $FlowFixMe
     const links = ReactDOM.findDOMNode(this).querySelectorAll('a');
     links.forEach(link => {
       if (link.hostname !== window.location.hostname) {
+        // $FlowFixMe
         link.target = '_blank'; // eslint-disable-line no-param-reassign
       }
     });

frontend/components/Document/components/DocumentHtml/index.js

@@ -1,2 +1,3 @@
+// @flow
 import DocumentHtml from './DocumentHtml';
 export default DocumentHtml;

frontend/components/Document/index.js

@@ -1,3 +1,4 @@
+// @flow
 import Document from './Document';
 import DocumentHtml from './components/DocumentHtml';
 

frontend/components/DocumentList/index.js

@@ -1,2 +1,3 @@
+// @flow
 import DocumentList from './DocumentList';
 export default DocumentList;

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { toJS } from 'mobx';
 import { Link } from 'react-router';

frontend/components/DocumentPreview/index.js

@@ -1,2 +1,3 @@
+// @flow
 import DocumentPreview from './DocumentPreview';
 export default DocumentPreview;

frontend/components/DropdownMenu/DropdownMenu.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { browserHistory } from 'react-router';
 

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 
 import styles from './MoreIcon.scss';

frontend/components/DropdownMenu/components/MoreIcon/index.js

@@ -1,2 +1,3 @@
+// @flow
 import MoreIcon from './MoreIcon';
 export default MoreIcon;

frontend/components/DropdownMenu/index.js

@@ -1,3 +1,4 @@
+// @flow
 import DropdownMenu, { MenuItem } from './DropdownMenu';
 import MoreIcon from './components/MoreIcon';
 export default DropdownMenu;

frontend/components/Layout/Layout.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { browserHistory, Link } from 'react-router';
 import Helmet from 'react-helmet';
@@ -10,24 +11,25 @@ import { Flex } from 'reflexbox';
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 
 import LoadingIndicator from 'components/LoadingIndicator';
+import UserStore from 'stores/UserStore';
 
 import styles from './Layout.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
 
-@inject('user')
-@observer
-class Layout extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    actions: React.PropTypes.node,
-    title: React.PropTypes.node,
-    titleText: React.PropTypes.node,
-    loading: React.PropTypes.bool,
-    user: React.PropTypes.object.isRequired,
-    search: React.PropTypes.bool,
-    notifications: React.PropTypes.node,
-  };
+type Props = {
+  children?: ?React.Element<any>,
+  actions?: ?React.Element<any>,
+  title?: ?React.Element<any>,
+  titleText?: string,
+  loading?: boolean,
+  user: UserStore,
+  search: ?boolean,
+  notifications?: React.Element<any>,
+};
+
+@observer class Layout extends React.Component {
+  props: Props;
 
   static defaultProps = {
     search: true,
@@ -114,4 +116,4 @@ const Avatar = styled.img`
   border-radius: 50%;
 `;
 
-export default Layout;
+export default inject('user')(Layout);

frontend/components/Layout/components/HeaderAction/HeaderAction.js

@@ -1,8 +1,11 @@
+// @flow
 import React from 'react';
 
 import styles from './HeaderAction.scss';
 
-const HeaderAction = props => {
+type Props = { onClick?: ?Function, children?: ?React.Element<any> };
+
+const HeaderAction = (props: Props) => {
   return (
     <div onClick={props.onClick} className={styles.container}>
       {props.children}
@@ -10,8 +13,4 @@ const HeaderAction = props => {
   );
 };
 
-HeaderAction.propTypes = {
-  onClick: React.PropTypes.func,
-};
-
 export default HeaderAction;

frontend/components/Layout/components/HeaderAction/index.js

@@ -1,2 +1,3 @@
+// @flow
 import HeaderAction from './HeaderAction';
 export default HeaderAction;

frontend/components/Layout/components/SaveAction/SaveAction.js

@@ -1,14 +1,17 @@
+// @flow
 import React from 'react';
 import { observer } from 'mobx-react';
 
-@observer class SaveAction extends React.Component {
-  static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool,
-    isNew: React.PropTypes.bool,
-  };
+type Props = {
+  onClick: Function,
+  disabled?: boolean,
+  isNew?: boolean,
+};
 
-  onClick = event => {
+@observer class SaveAction extends React.Component {
+  props: Props;
+
+  onClick = (event: MouseEvent) => {
     if (this.props.disabled) return;
 
     event.preventDefault();

frontend/components/Layout/components/SaveAction/index.js

@@ -1,2 +1,3 @@
+// @flow
 import SaveAction from './SaveAction';
 export default SaveAction;

frontend/components/Layout/components/Title/Title.js

@@ -4,9 +4,9 @@ import _ from 'lodash';
 import styled from 'styled-components';
 
 type Props = {
-  children: string,
+  content: string,
   truncate?: number,
-  placeholder: string,
+  placeholder?: ?string,
 };
 
 class Title extends React.Component {
@@ -15,9 +15,9 @@ class Title extends React.Component {
   render() {
     let title;
     if (this.props.truncate) {
-      title = _.truncate(this.props.children, this.props.truncate);
+      title = _.truncate(this.props.content, this.props.truncate);
     } else {
-      title = this.props.children;
+      title = this.props.content;
     }
 
     let usePlaceholder;
@@ -29,7 +29,7 @@ class Title extends React.Component {
     return (
       <span>
         {title && <span>&nbsp;/&nbsp;</span>}
-        <TitleText title={this.props.children} untitled={usePlaceholder}>
+        <TitleText title={this.props.content} untitled={usePlaceholder}>
           {title}
         </TitleText>
       </span>

frontend/components/Layout/index.js

@@ -1,3 +1,4 @@
+// @flow
 import Layout from './Layout';
 import Title from './components/Title';
 import HeaderAction from './components/HeaderAction';

frontend/components/LoadingIndicator/LoadingIndicator.js

@@ -1,8 +1,9 @@
+// @flow
 import React from 'react';
 
 import styles from './LoadingIndicator.scss';
 
-const LoadingIndicator = props => {
+const LoadingIndicator = () => {
   return (
     <div className={styles.loading}>
       <div className={styles.loader} />

frontend/components/LoadingIndicator/index.js

@@ -1,2 +1,3 @@
+// @flow
 import LoadingIndicator from './LoadingIndicator';
 export default LoadingIndicator;

frontend/components/MarkdownEditor/MarkdownEditor.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { observer } from 'mobx-react';
 import Codemirror from 'react-codemirror';
@@ -28,13 +29,13 @@ import { client } from 'utils/ApiClient';
     toggleUploadingIndicator: React.PropTypes.func,
   };
 
-  onChange = newText => {
+  onChange = (newText: string) => {
     if (newText !== this.props.text) {
       this.props.onChange(newText);
     }
   };
 
-  onDropAccepted = files => {
+  onDropAccepted = (files: Object[]) => {
     const file = files[0];
     const editor = this.getEditorInstance();
 
@@ -62,6 +63,7 @@ import { client } from 'utils/ApiClient';
         filename: file.name,
       })
       .then(response => {
+        // $FlowFixMe need to augment ApiClient
         const data = response.data;
         // Upload using FormData API
         const formData = new FormData();
@@ -77,7 +79,7 @@ import { client } from 'utils/ApiClient';
         }
 
         fetch(data.uploadUrl, {
-          method: 'post',
+          method: 'POST',
           body: formData,
         })
           .then(_s3Response => {

frontend/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js

@@ -1,8 +1,9 @@
+// @flow
 import React from 'react';
 
 import styles from './ClickablePadding.scss';
 
-const ClickablePadding = props => {
+const ClickablePadding = (props: { onClick: Function }) => {
   return <div className={styles.container} onClick={props.onClick}>&nbsp;</div>;
 };
 

frontend/components/MarkdownEditor/components/ClickablePadding/index.js

@@ -1,2 +1,3 @@
+// @flow
 import ClickablePadding from './ClickablePadding';
 export default ClickablePadding;

frontend/components/MarkdownEditor/index.js

@@ -1,2 +1,3 @@
+// @flow
 import MarkdownEditor from './MarkdownEditor';
 export default MarkdownEditor;

frontend/components/PublishingInfo/PublishingInfo.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { PropTypes } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';

frontend/components/PublishingInfo/index.js

@@ -1,2 +1,3 @@
+// @flow
 import PublishingInfo from './PublishingInfo';
 export default PublishingInfo;

frontend/components/SlackAuthLink/SlackAuthLink.js

@@ -3,15 +3,15 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import UserStore from 'stores/UserStore';
 
-@inject('user')
-@observer
-class SlackAuthLink extends React.Component {
-  props: {
-    children: any,
-    scopes: Array<string>,
-    user: UserStore,
-    redirectUri: string,
-  };
+type Props = {
+  children: React.Element<any>,
+  scopes?: Array<string>,
+  user: UserStore,
+  redirectUri: string,
+};
+
+@observer class SlackAuthLink extends React.Component {
+  props: Props;
 
   static defaultProps = {
     scopes: [
@@ -25,10 +25,8 @@ class SlackAuthLink extends React.Component {
   slackUrl = () => {
     const baseUrl = 'https://slack.com/oauth/authorize';
     const params = {
-      // $FlowIssue global variable
       client_id: SLACK_KEY,
-      scope: this.props.scopes.join(' '),
-      // $FlowIssue global variable
+      scope: this.props.scopes ? this.props.scopes.join(' ') : '',
       redirect_uri: this.props.redirectUri || SLACK_REDIRECT_URI,
       state: this.props.user.getOauthState(),
     };
@@ -47,4 +45,4 @@ class SlackAuthLink extends React.Component {
   }
 }
 
-export default SlackAuthLink;
+export default inject('user')(SlackAuthLink);

frontend/components/SlackAuthLink/index.js

@@ -1,2 +1,3 @@
+// @flow
 import SlackAuthLink from './SlackAuthLink';
 export default SlackAuthLink;

frontend/components/Tree/Node.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import history from 'utils/History';
 

frontend/components/Tree/Tree.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const Tree = require('js-tree');
 const proto = Tree.prototype;
 

frontend/components/Tree/UiTree.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const React = require('react');
 const Tree = require('./Tree');
 const Node = require('./Node');

frontend/components/Tree/index.js

@@ -1,2 +1,3 @@
+// @flow
 import UiTree from './UiTree';
 export default UiTree;