;
};
diff --git a/frontend/components/Divider/index.js b/frontend/components/Divider/index.js
index 26c6df9ef..6d4a0889a 100644
--- a/frontend/components/Divider/index.js
+++ b/frontend/components/Divider/index.js
@@ -1,2 +1,3 @@
+// @flow
import Divider from './Divider';
export default Divider;
diff --git a/frontend/components/Document/Document.js b/frontend/components/Document/Document.js
index fbe505d88..eaf68c1a9 100644
--- a/frontend/components/Document/Document.js
+++ b/frontend/components/Document/Document.js
@@ -2,11 +2,13 @@
import React from 'react';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
-import type { Document as DocumentType } from 'types';
+
import PublishingInfo from '../PublishingInfo';
import styles from './Document.scss';
import DocumentHtml from './components/DocumentHtml';
+import type { Document as DocumentType } from 'types';
+
@observer class Document extends React.Component {
props: {
document: DocumentType,
diff --git a/frontend/components/Document/components/DocumentHtml/DocumentHtml.js b/frontend/components/Document/components/DocumentHtml/DocumentHtml.js
index 4b872f8e4..5fe4abb05 100644
--- a/frontend/components/Document/components/DocumentHtml/DocumentHtml.js
+++ b/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
}
});
diff --git a/frontend/components/Document/components/DocumentHtml/index.js b/frontend/components/Document/components/DocumentHtml/index.js
index 8c1e31ed2..c8cf49926 100644
--- a/frontend/components/Document/components/DocumentHtml/index.js
+++ b/frontend/components/Document/components/DocumentHtml/index.js
@@ -1,2 +1,3 @@
+// @flow
import DocumentHtml from './DocumentHtml';
export default DocumentHtml;
diff --git a/frontend/components/Document/index.js b/frontend/components/Document/index.js
index 29ee3ad74..1fb24bb8f 100644
--- a/frontend/components/Document/index.js
+++ b/frontend/components/Document/index.js
@@ -1,3 +1,4 @@
+// @flow
import Document from './Document';
import DocumentHtml from './components/DocumentHtml';
diff --git a/frontend/components/DocumentList/index.js b/frontend/components/DocumentList/index.js
index afe66f557..35fb670b4 100644
--- a/frontend/components/DocumentList/index.js
+++ b/frontend/components/DocumentList/index.js
@@ -1,2 +1,3 @@
+// @flow
import DocumentList from './DocumentList';
export default DocumentList;
diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js
index a609800d4..0e0777da0 100644
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -1,12 +1,12 @@
+// @flow
import React from 'react';
import { toJS } from 'mobx';
-
import { Link } from 'react-router';
-import PublishingInfo from 'components/PublishingInfo';
-
import styles from './DocumentPreview.scss';
+import PublishingInfo from 'components/PublishingInfo';
+
class Document extends React.Component {
static propTypes = {
document: React.PropTypes.object.isRequired,
diff --git a/frontend/components/DocumentPreview/index.js b/frontend/components/DocumentPreview/index.js
index c5569f97b..a5a2b1af8 100644
--- a/frontend/components/DocumentPreview/index.js
+++ b/frontend/components/DocumentPreview/index.js
@@ -1,2 +1,3 @@
+// @flow
import DocumentPreview from './DocumentPreview';
export default DocumentPreview;
diff --git a/frontend/components/DropdownMenu/DropdownMenu.js b/frontend/components/DropdownMenu/DropdownMenu.js
index 0726e468c..3455ab3cb 100644
--- a/frontend/components/DropdownMenu/DropdownMenu.js
+++ b/frontend/components/DropdownMenu/DropdownMenu.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { browserHistory } from 'react-router';
diff --git a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js b/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js
index ab1a2ed38..29c7af452 100644
--- a/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js
+++ b/frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js
@@ -1,9 +1,16 @@
+// @flow
import React from 'react';
import styles from './MoreIcon.scss';
-const MoreIcon = props => {
- return
})
;
+const MoreIcon = () => {
+ return (
+
+ );
};
export default MoreIcon;
diff --git a/frontend/components/DropdownMenu/components/MoreIcon/index.js b/frontend/components/DropdownMenu/components/MoreIcon/index.js
index 4f33b4852..a4d1358e6 100644
--- a/frontend/components/DropdownMenu/components/MoreIcon/index.js
+++ b/frontend/components/DropdownMenu/components/MoreIcon/index.js
@@ -1,2 +1,3 @@
+// @flow
import MoreIcon from './MoreIcon';
export default MoreIcon;
diff --git a/frontend/components/DropdownMenu/index.js b/frontend/components/DropdownMenu/index.js
index ff7e3b3c2..8197d76c6 100644
--- a/frontend/components/DropdownMenu/index.js
+++ b/frontend/components/DropdownMenu/index.js
@@ -1,3 +1,4 @@
+// @flow
import DropdownMenu, { MenuItem } from './DropdownMenu';
import MoreIcon from './components/MoreIcon';
export default DropdownMenu;
diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 8238d40f1..95caadec8 100644
--- a/frontend/components/Layout/Layout.js
+++ b/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';
@@ -5,29 +6,30 @@ import styled from 'styled-components';
import { observer, inject } from 'mobx-react';
import keydown from 'react-keydown';
import _ from 'lodash';
+import { Flex } from 'reflexbox';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
-import { Flex } from 'reflexbox';
+
import LoadingIndicator from 'components/LoadingIndicator';
-import Alert from 'components/Alert';
+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
{props.children}
@@ -10,8 +13,4 @@ const HeaderAction = props => {
);
};
-HeaderAction.propTypes = {
- onClick: React.PropTypes.func,
-};
-
export default HeaderAction;
diff --git a/frontend/components/Layout/components/HeaderAction/index.js b/frontend/components/Layout/components/HeaderAction/index.js
index c25a3530f..e231db11a 100644
--- a/frontend/components/Layout/components/HeaderAction/index.js
+++ b/frontend/components/Layout/components/HeaderAction/index.js
@@ -1,2 +1,3 @@
+// @flow
import HeaderAction from './HeaderAction';
export default HeaderAction;
diff --git a/frontend/components/Layout/components/SaveAction/SaveAction.js b/frontend/components/Layout/components/SaveAction/SaveAction.js
index 306ed37b0..b37cce08a 100644
--- a/frontend/components/Layout/components/SaveAction/SaveAction.js
+++ b/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();
diff --git a/frontend/components/Layout/components/SaveAction/index.js b/frontend/components/Layout/components/SaveAction/index.js
index a3a71d8e6..524f5da74 100644
--- a/frontend/components/Layout/components/SaveAction/index.js
+++ b/frontend/components/Layout/components/SaveAction/index.js
@@ -1,2 +1,3 @@
+// @flow
import SaveAction from './SaveAction';
export default SaveAction;
diff --git a/frontend/components/Layout/components/Title/Title.js b/frontend/components/Layout/components/Title/Title.js
index 7dea7d387..f85548e41 100644
--- a/frontend/components/Layout/components/Title/Title.js
+++ b/frontend/components/Layout/components/Title/Title.js
@@ -1,23 +1,23 @@
+// @flow
import React from 'react';
import _ from 'lodash';
+import styled from 'styled-components';
-import styles from './Title.scss';
-import classNames from 'classnames/bind';
-const cx = classNames.bind(styles);
+type Props = {
+ content: string,
+ truncate?: number,
+ placeholder?: ?string,
+};
class Title extends React.Component {
- static propTypes = {
- children: React.PropTypes.string,
- truncate: React.PropTypes.number,
- placeholder: React.PropTypes.string,
- };
+ props: Props;
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,15 +29,16 @@ class Title extends React.Component {
return (
{title && / }
-
+
{title}
-
+
);
}
}
+const TitleText = styled.span`
+ opacity: ${props => (props.untitled ? 0.5 : 1)};
+`;
+
export default Title;
diff --git a/frontend/components/Layout/components/Title/Title.scss b/frontend/components/Layout/components/Title/Title.scss
deleted file mode 100644
index 6a51ea94c..000000000
--- a/frontend/components/Layout/components/Title/Title.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.title {
-
-}
-
-.untitled {
- color: #ccc;
-}
\ No newline at end of file
diff --git a/frontend/components/Layout/components/Title/index.js b/frontend/components/Layout/components/Title/index.js
index 8b8e12dde..8dffbce84 100644
--- a/frontend/components/Layout/components/Title/index.js
+++ b/frontend/components/Layout/components/Title/index.js
@@ -1,2 +1,3 @@
+// @flow
import Title from './Title';
export default Title;
diff --git a/frontend/components/Layout/index.js b/frontend/components/Layout/index.js
index 8abf597f9..7956f3e97 100644
--- a/frontend/components/Layout/index.js
+++ b/frontend/components/Layout/index.js
@@ -1,3 +1,4 @@
+// @flow
import Layout from './Layout';
import Title from './components/Title';
import HeaderAction from './components/HeaderAction';
diff --git a/frontend/components/LoadingIndicator/LoadingIndicator.js b/frontend/components/LoadingIndicator/LoadingIndicator.js
index 5413887c9..a82a85abd 100644
--- a/frontend/components/LoadingIndicator/LoadingIndicator.js
+++ b/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 (
{collection.name} ;
+ title =
- {this.store.title}
-
+ placeholder={!this.store.isFetching ? 'Untitled document' : null}
+ content={this.store.title}
+ />
);
const titleText = this.store.title;
diff --git a/frontend/scenes/DocumentEdit/DocumentEditStore.js b/frontend/scenes/DocumentEdit/DocumentEditStore.js
index fe0109df4..b5d13d4e4 100644
--- a/frontend/scenes/DocumentEdit/DocumentEditStore.js
+++ b/frontend/scenes/DocumentEdit/DocumentEditStore.js
@@ -1,7 +1,10 @@
+// @flow
import { observable, action, toJS, autorun } from 'mobx';
-import { client } from 'utils/ApiClient';
import { browserHistory } from 'react-router';
+import invariant from 'invariant';
+import { client } from 'utils/ApiClient';
import emojify from 'utils/emojify';
+import type { Document } from 'types';
const DOCUMENT_EDIT_SETTINGS = 'DOCUMENT_EDIT_SETTINGS';
@@ -22,17 +25,17 @@ const parseHeader = text => {
class DocumentEditStore {
@observable documentId = null;
@observable collectionId = null;
- @observable parentDocument;
- @observable title;
- @observable text;
+ @observable parentDocument: ?Document;
+ @observable title: string;
+ @observable text: string;
@observable hasPendingChanges = false;
- @observable newDocument;
- @observable newChildDocument;
+ @observable newDocument: ?boolean;
+ @observable newChildDocument: ?boolean;
- @observable preview;
- @observable isFetching;
- @observable isSaving;
- @observable isUploading;
+ @observable preview: ?boolean = false;
+ @observable isFetching: boolean = false;
+ @observable isSaving: boolean = false;
+ @observable isUploading: boolean = false;
/* Actions */
@@ -40,17 +43,18 @@ class DocumentEditStore {
this.isFetching = true;
try {
- const data = await client.get(
+ const res = await client.get(
'/documents.info',
{
id: this.documentId,
},
{ cache: true }
);
+ invariant(res && res.data, 'Data shoule be available');
if (this.newChildDocument) {
- this.parentDocument = data.data;
+ this.parentDocument = res.data;
} else {
- const { title, text } = data.data;
+ const { title, text } = res.data;
this.title = title;
this.text = text;
}
@@ -66,17 +70,19 @@ class DocumentEditStore {
this.isSaving = true;
try {
- const data = await client.post(
+ const res = await client.post(
'/documents.create',
{
parentDocument: this.parentDocument && this.parentDocument.id,
+ // $FlowFixMe this logic will probably get rewritten soon anyway
collection: this.collectionId || this.parentDocument.collection.id,
title: this.title || 'Untitled document',
text: this.text,
},
{ cache: true }
);
- const { url } = data.data;
+ invariant(res && res.data, 'Data shoule be available');
+ const { url } = res.data;
this.hasPendingChanges = false;
browserHistory.push(url);
@@ -92,7 +98,7 @@ class DocumentEditStore {
this.isSaving = true;
try {
- const data = await client.post(
+ const res = await client.post(
'/documents.update',
{
id: this.documentId,
@@ -101,7 +107,8 @@ class DocumentEditStore {
},
{ cache: true }
);
- const { url } = data.data;
+ invariant(res && res.data, 'Data shoule be available');
+ const { url } = res.data;
this.hasPendingChanges = false;
browserHistory.push(url);
@@ -111,17 +118,17 @@ class DocumentEditStore {
this.isSaving = false;
};
- @action updateText = text => {
+ @action updateText = (text: string) => {
this.text = text;
this.title = parseHeader(text);
this.hasPendingChanges = true;
};
- @action updateTitle = title => {
+ @action updateTitle = (title: string) => {
this.title = title;
};
- @action replaceText = args => {
+ @action replaceText = (args: { original: string, new: string }) => {
this.text = this.text.replace(args.original, args.new);
this.hasPendingChanges = true;
};
@@ -147,7 +154,7 @@ class DocumentEditStore {
});
};
- constructor(settings) {
+ constructor(settings: { preview: ?boolean }) {
// Rehydrate settings
this.preview = settings.preview;
diff --git a/frontend/scenes/DocumentEdit/components/Editor.js b/frontend/scenes/DocumentEdit/components/Editor.js
index 34d93d9a6..5634a8ffe 100644
--- a/frontend/scenes/DocumentEdit/components/Editor.js
+++ b/frontend/scenes/DocumentEdit/components/Editor.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { observer } from 'mobx-react';
import { convertToMarkdown } from 'utils/markdown';
diff --git a/frontend/scenes/DocumentEdit/components/EditorLoader.js b/frontend/scenes/DocumentEdit/components/EditorLoader.js
index 9969107a8..4305c2dcf 100644
--- a/frontend/scenes/DocumentEdit/components/EditorLoader.js
+++ b/frontend/scenes/DocumentEdit/components/EditorLoader.js
@@ -1,5 +1,7 @@
+// @flow
export default () => {
return new Promise(resolve => {
+ // $FlowIssue this is available with webpack
require.ensure([], () => {
resolve({
Editor: require('./Editor').default,
diff --git a/frontend/scenes/DocumentEdit/components/EditorPane.js b/frontend/scenes/DocumentEdit/components/EditorPane.js
index 16ade5c07..f001e2ccf 100644
--- a/frontend/scenes/DocumentEdit/components/EditorPane.js
+++ b/frontend/scenes/DocumentEdit/components/EditorPane.js
@@ -1,18 +1,21 @@
+// @flow
import React from 'react';
import styles from '../DocumentEdit.scss';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
-class EditorPane extends React.Component {
- static propTypes = {
- children: React.PropTypes.node.isRequired,
- onScroll: React.PropTypes.func.isRequired,
- scrollTop: React.PropTypes.number,
- fullWidth: React.PropTypes.bool,
- };
+type Props = {
+ children?: ?React.Element,
+ onScroll?: Function,
+ scrollTop?: ?number,
+ fullWidth?: ?boolean,
+};
- componentWillReceiveProps = nextProps => {
+class EditorPane extends React.Component {
+ props: Props;
+
+ componentWillReceiveProps = (nextProps: Props) => {
if (nextProps.scrollTop) {
this.scrollToPosition(nextProps.scrollTop);
}
@@ -26,15 +29,16 @@ class EditorPane extends React.Component {
this.refs.pane.removeEventListener('scroll', this.handleScroll);
};
- handleScroll = e => {
+ handleScroll = (e: Event) => {
setTimeout(() => {
const element = this.refs.pane;
const contentEl = this.refs.content;
- this.props.onScroll(element.scrollTop / contentEl.offsetHeight);
+ this.props.onScroll &&
+ this.props.onScroll(element.scrollTop / contentEl.offsetHeight);
}, 50);
};
- scrollToPosition = percentage => {
+ scrollToPosition = (percentage: number) => {
const contentEl = this.refs.content;
// Push to edges
diff --git a/frontend/scenes/DocumentEdit/components/Preview/Preview.js b/frontend/scenes/DocumentEdit/components/Preview/Preview.js
index ceb80dd3c..1d5168be1 100644
--- a/frontend/scenes/DocumentEdit/components/Preview/Preview.js
+++ b/frontend/scenes/DocumentEdit/components/Preview/Preview.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { DocumentHtml } from 'components/Document';
@@ -6,7 +7,11 @@ import styles from './Preview.scss';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
-const Preview = props => {
+type Props = {
+ html: ?string,
+};
+
+const Preview = (props: Props) => {
return (
{title}} titleText={title} search={false}>
+
diff --git a/frontend/scenes/Flatpage/index.js b/frontend/scenes/Flatpage/index.js
index e43db4108..55cdbb815 100644
--- a/frontend/scenes/Flatpage/index.js
+++ b/frontend/scenes/Flatpage/index.js
@@ -1,2 +1,3 @@
+// @flow
import Flatpage from './Flatpage';
export default Flatpage;
diff --git a/frontend/scenes/Home/Home.js b/frontend/scenes/Home/Home.js
index 4d185a0b3..f54ac6d93 100644
--- a/frontend/scenes/Home/Home.js
+++ b/frontend/scenes/Home/Home.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { observer, inject } from 'mobx-react';
import { browserHistory } from 'react-router';
@@ -24,7 +25,7 @@ export default class Home extends React.Component {
}
};
- get notifications() {
+ get notifications(): React.Element[] {
const notifications = [];
const { state } = this.props.location;
@@ -54,7 +55,7 @@ export default class Home extends React.Component {
}
diff --git a/frontend/components/LoadingIndicator/index.js b/frontend/components/LoadingIndicator/index.js
index 42f308527..df904e0a9 100644
--- a/frontend/components/LoadingIndicator/index.js
+++ b/frontend/components/LoadingIndicator/index.js
@@ -1,2 +1,3 @@
+// @flow
import LoadingIndicator from './LoadingIndicator';
export default LoadingIndicator;
diff --git a/frontend/components/MarkdownEditor/MarkdownEditor.js b/frontend/components/MarkdownEditor/MarkdownEditor.js
index 2927377a6..2b670eba5 100644
--- a/frontend/components/MarkdownEditor/MarkdownEditor.js
+++ b/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 => {
diff --git a/frontend/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js b/frontend/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js
index 4c95410eb..d4464f519 100644
--- a/frontend/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.js
+++ b/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 ;
};
diff --git a/frontend/components/MarkdownEditor/components/ClickablePadding/index.js b/frontend/components/MarkdownEditor/components/ClickablePadding/index.js
index 28973be3a..76c2ddada 100644
--- a/frontend/components/MarkdownEditor/components/ClickablePadding/index.js
+++ b/frontend/components/MarkdownEditor/components/ClickablePadding/index.js
@@ -1,2 +1,3 @@
+// @flow
import ClickablePadding from './ClickablePadding';
export default ClickablePadding;
diff --git a/frontend/components/MarkdownEditor/index.js b/frontend/components/MarkdownEditor/index.js
index b4ab100ed..cdd528e49 100644
--- a/frontend/components/MarkdownEditor/index.js
+++ b/frontend/components/MarkdownEditor/index.js
@@ -1,2 +1,3 @@
+// @flow
import MarkdownEditor from './MarkdownEditor';
export default MarkdownEditor;
diff --git a/frontend/components/PublishingInfo/PublishingInfo.js b/frontend/components/PublishingInfo/PublishingInfo.js
index 865aff6c0..ddf87e170 100644
--- a/frontend/components/PublishingInfo/PublishingInfo.js
+++ b/frontend/components/PublishingInfo/PublishingInfo.js
@@ -1,3 +1,4 @@
+// @flow
import React, { PropTypes } from 'react';
import moment from 'moment';
import styled from 'styled-components';
diff --git a/frontend/components/PublishingInfo/index.js b/frontend/components/PublishingInfo/index.js
index bf607ecb9..fb57b45fb 100644
--- a/frontend/components/PublishingInfo/index.js
+++ b/frontend/components/PublishingInfo/index.js
@@ -1,2 +1,3 @@
+// @flow
import PublishingInfo from './PublishingInfo';
export default PublishingInfo;
diff --git a/frontend/components/SlackAuthLink/SlackAuthLink.js b/frontend/components/SlackAuthLink/SlackAuthLink.js
index 0fe8e6b81..69348e2b5 100644
--- a/frontend/components/SlackAuthLink/SlackAuthLink.js
+++ b/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,
- user: UserStore,
- redirectUri: string,
- };
+type Props = {
+ children: React.Element,
+ scopes?: Array,
+ 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);
diff --git a/frontend/components/SlackAuthLink/index.js b/frontend/components/SlackAuthLink/index.js
index 5dd283ab0..5984174e7 100644
--- a/frontend/components/SlackAuthLink/index.js
+++ b/frontend/components/SlackAuthLink/index.js
@@ -1,2 +1,3 @@
+// @flow
import SlackAuthLink from './SlackAuthLink';
export default SlackAuthLink;
diff --git a/frontend/components/Tree/Node.js b/frontend/components/Tree/Node.js
index 92c91a77f..d8fe634e0 100644
--- a/frontend/components/Tree/Node.js
+++ b/frontend/components/Tree/Node.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
import React from 'react';
import history from 'utils/History';
@@ -25,7 +26,7 @@ class Node extends React.Component {
}}
onClick={this.handleCollapse}
>
- })
+
);
}
@@ -82,7 +83,6 @@ class Node extends React.Component {
};
render() {
- const tree = this.props.tree;
const index = this.props.index;
const dragging = this.props.dragging;
const node = index.node;
diff --git a/frontend/components/Tree/Tree.js b/frontend/components/Tree/Tree.js
index c0cd0be2c..7296da9a9 100644
--- a/frontend/components/Tree/Tree.js
+++ b/frontend/components/Tree/Tree.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
const Tree = require('js-tree');
const proto = Tree.prototype;
diff --git a/frontend/components/Tree/UiTree.js b/frontend/components/Tree/UiTree.js
index 4b9a9dc5a..c0c97bc0c 100644
--- a/frontend/components/Tree/UiTree.js
+++ b/frontend/components/Tree/UiTree.js
@@ -1,10 +1,11 @@
+/* eslint-disable */
const React = require('react');
const Tree = require('./Tree');
const Node = require('./Node');
import styles from './Tree.scss';
-module.exports = React.createClass({
+export default React.createClass({
displayName: 'UITree',
propTypes: {
@@ -175,14 +176,14 @@ module.exports = React.createClass({
} else if (diffY > dragging.h) {
// down
if (index.next) {
- var below = tree.getIndex(index.next);
+ let below = tree.getIndex(index.next);
if (below.children && below.children.length && !below.node.collapsed) {
newIndex = tree.move(index.id, index.next, 'prepend');
} else {
newIndex = tree.move(index.id, index.next, 'after');
}
} else {
- var below = tree.getNodeByTop(index.top + index.height);
+ let below = tree.getNodeByTop(index.top + index.height);
if (below && below.parent !== index.id) {
if (below.children && below.children.length) {
newIndex = tree.move(index.id, below.id, 'prepend');
diff --git a/frontend/components/Tree/index.js b/frontend/components/Tree/index.js
index 2a932bd6b..fe1ac2eeb 100644
--- a/frontend/components/Tree/index.js
+++ b/frontend/components/Tree/index.js
@@ -1,2 +1,3 @@
+// @flow
import UiTree from './UiTree';
export default UiTree;
diff --git a/frontend/index.js b/frontend/index.js
index 975ddf006..5da45b0f4 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
@@ -115,7 +116,7 @@ render(
- {__DEV__ &&
,
document.getElementById('root')
);
diff --git a/frontend/scenes/Application.js b/frontend/scenes/Application.js
index 6715daf24..92210e37f 100644
--- a/frontend/scenes/Application.js
+++ b/frontend/scenes/Application.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { observer } from 'mobx-react';
import Helmet from 'react-helmet';
diff --git a/frontend/scenes/Atlas/Atlas.js b/frontend/scenes/Atlas/Atlas.js
index 8c8579a3f..ee2940956 100644
--- a/frontend/scenes/Atlas/Atlas.js
+++ b/frontend/scenes/Atlas/Atlas.js
@@ -1,10 +1,12 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React from 'react';
import { observer } from 'mobx-react';
import { browserHistory } from 'react-router';
import keydown from 'react-keydown';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import _ from 'lodash';
+// TODO move here argh
import store from './AtlasStore';
import Layout, { Title } from 'components/Layout';
@@ -17,12 +19,15 @@ import { Flex } from 'reflexbox';
import styles from './Atlas.scss';
+type Props = {
+ params: Object,
+ keydown: Object,
+};
+
@keydown(['c'])
@observer
class Atlas extends React.Component {
- static propTypes = {
- params: PropTypes.object.isRequired,
- };
+ props: Props;
componentDidMount = () => {
const { id } = this.props.params;
@@ -34,7 +39,7 @@ class Atlas extends React.Component {
});
};
- componentWillReceiveProps = nextProps => {
+ componentWillReceiveProps = (nextProps: Props) => {
const key = nextProps.keydown.event;
if (key) {
if (key.key === 'c') {
@@ -43,9 +48,9 @@ class Atlas extends React.Component {
}
};
- onCreate = event => {
+ onCreate = (event: Event) => {
if (event) event.preventDefault();
- browserHistory.push(`${store.collection.url}/new`);
+ store.collection && browserHistory.push(`${store.collection.url}/new`);
};
render() {
@@ -65,7 +70,7 @@ class Atlas extends React.Component {
);
- title =
+
);
}
@@ -82,7 +83,6 @@ class Node extends React.Component {
};
render() {
- const tree = this.props.tree;
const index = this.props.index;
const dragging = this.props.dragging;
const node = index.node;
diff --git a/frontend/components/Tree/Tree.js b/frontend/components/Tree/Tree.js
index c0cd0be2c..7296da9a9 100644
--- a/frontend/components/Tree/Tree.js
+++ b/frontend/components/Tree/Tree.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
const Tree = require('js-tree');
const proto = Tree.prototype;
diff --git a/frontend/components/Tree/UiTree.js b/frontend/components/Tree/UiTree.js
index 4b9a9dc5a..c0c97bc0c 100644
--- a/frontend/components/Tree/UiTree.js
+++ b/frontend/components/Tree/UiTree.js
@@ -1,10 +1,11 @@
+/* eslint-disable */
const React = require('react');
const Tree = require('./Tree');
const Node = require('./Node');
import styles from './Tree.scss';
-module.exports = React.createClass({
+export default React.createClass({
displayName: 'UITree',
propTypes: {
@@ -175,14 +176,14 @@ module.exports = React.createClass({
} else if (diffY > dragging.h) {
// down
if (index.next) {
- var below = tree.getIndex(index.next);
+ let below = tree.getIndex(index.next);
if (below.children && below.children.length && !below.node.collapsed) {
newIndex = tree.move(index.id, index.next, 'prepend');
} else {
newIndex = tree.move(index.id, index.next, 'after');
}
} else {
- var below = tree.getNodeByTop(index.top + index.height);
+ let below = tree.getNodeByTop(index.top + index.height);
if (below && below.parent !== index.id) {
if (below.children && below.children.length) {
newIndex = tree.move(index.id, below.id, 'prepend');
diff --git a/frontend/components/Tree/index.js b/frontend/components/Tree/index.js
index 2a932bd6b..fe1ac2eeb 100644
--- a/frontend/components/Tree/index.js
+++ b/frontend/components/Tree/index.js
@@ -1,2 +1,3 @@
+// @flow
import UiTree from './UiTree';
export default UiTree;
diff --git a/frontend/index.js b/frontend/index.js
index 975ddf006..5da45b0f4 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,3 +1,4 @@
+// @flow
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
@@ -115,7 +116,7 @@ render(
- {__DEV__ &&
-
}
diff --git a/frontend/scenes/Atlas/AtlasStore.js b/frontend/scenes/Atlas/AtlasStore.js
index 8f7d1e495..9d6067af3 100644
--- a/frontend/scenes/Atlas/AtlasStore.js
+++ b/frontend/scenes/Atlas/AtlasStore.js
@@ -1,19 +1,29 @@
-import { observable, action } from 'mobx';
+// @flow
+import { observable, action, computed } from 'mobx';
+import invariant from 'invariant';
import { client } from 'utils/ApiClient';
+import type { Collection } from 'types';
const store = new class AtlasStore {
- @observable collection;
+ @observable collection: ?(Collection & { recentDocuments?: Object[] });
@observable isFetching = true;
+ /* Computed */
+
+ @computed get isLoaded(): boolean {
+ return !this.isFetching && !!this.collection;
+ }
+
/* Actions */
- @action fetchCollection = async (id, successCallback) => {
+ @action fetchCollection = async (id: string, successCallback: Function) => {
this.isFetching = true;
this.collection = null;
try {
const res = await client.get('/collections.info', { id });
+ invariant(res && res.data, 'Data should be available');
const { data } = res;
this.collection = data;
successCallback(data);
diff --git a/frontend/scenes/Atlas/index.js b/frontend/scenes/Atlas/index.js
index dd00ddccd..f28d358e0 100644
--- a/frontend/scenes/Atlas/index.js
+++ b/frontend/scenes/Atlas/index.js
@@ -1,2 +1,3 @@
+// @flow
import Atlas from './Atlas';
export default Atlas;
diff --git a/frontend/scenes/Dashboard/DashboardStore.js b/frontend/scenes/Dashboard/DashboardStore.js
index 474816a4b..2f57b31ec 100644
--- a/frontend/scenes/Dashboard/DashboardStore.js
+++ b/frontend/scenes/Dashboard/DashboardStore.js
@@ -1,5 +1,6 @@
// @flow
import { observable, action, runInAction } from 'mobx';
+import invariant from 'invariant';
import { client } from 'utils/ApiClient';
import type { Pagination, Collection } from 'types';
@@ -23,6 +24,10 @@ class DashboardStore {
try {
const res = await client.post('/collections.list', { id: this.team.id });
+ invariant(
+ res && res.data && res.pagination,
+ 'API response should be available'
+ );
const { data, pagination } = res;
runInAction('fetchCollections', () => {
this.collections = data;
diff --git a/frontend/scenes/Dashboard/index.js b/frontend/scenes/Dashboard/index.js
index e5cb98c3e..d204b5e43 100644
--- a/frontend/scenes/Dashboard/index.js
+++ b/frontend/scenes/Dashboard/index.js
@@ -1,2 +1,3 @@
+// @flow
import Dashboard from './Dashboard';
export default Dashboard;
diff --git a/frontend/scenes/DocumentEdit/DocumentEdit.js b/frontend/scenes/DocumentEdit/DocumentEdit.js
index 43e8fefe1..8a85fb7bd 100644
--- a/frontend/scenes/DocumentEdit/DocumentEdit.js
+++ b/frontend/scenes/DocumentEdit/DocumentEdit.js
@@ -1,21 +1,29 @@
+// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { browserHistory, withRouter } from 'react-router';
import keydown from 'react-keydown';
+import { Flex } from 'reflexbox';
import DocumentEditStore, { DOCUMENT_EDIT_SETTINGS } from './DocumentEditStore';
+import EditorLoader from './components/EditorLoader';
import Layout, { Title, HeaderAction, SaveAction } from 'components/Layout';
-import { Flex } from 'reflexbox';
+
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
import CenteredContent from 'components/CenteredContent';
import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
-import EditorLoader from './components/EditorLoader';
-
const DISREGARD_CHANGES = `You have unsaved changes.
Are you sure you want to disgard them?`;
+type Props = {
+ route: Object,
+ router: Object,
+ params: Object,
+ keydown: Object,
+};
+
@keydown([
'cmd+enter',
'ctrl+enter',
@@ -27,13 +35,10 @@ Are you sure you want to disgard them?`;
@withRouter
@observer
class DocumentEdit extends Component {
- static propTypes = {
- route: React.PropTypes.object.isRequired,
- router: React.PropTypes.object.isRequired,
- params: React.PropTypes.object,
- };
+ store: DocumentEditStore;
+ props: Props;
- constructor(props) {
+ constructor(props: Props) {
super(props);
this.store = new DocumentEditStore(
JSON.parse(localStorage[DOCUMENT_EDIT_SETTINGS] || '{}')
@@ -60,6 +65,7 @@ class DocumentEdit extends Component {
// Load editor async
EditorLoader().then(({ Editor }) => {
+ // $FlowIssue we can remove after moving to new editor
this.setState({ Editor });
});
@@ -72,7 +78,7 @@ class DocumentEdit extends Component {
});
};
- componentWillReceiveProps = nextProps => {
+ componentWillReceiveProps = (nextProps: Props) => {
const key = nextProps.keydown.event;
if (key) {
@@ -109,7 +115,7 @@ class DocumentEdit extends Component {
browserHistory.goBack();
};
- onScroll = scrollTop => {
+ onScroll = (scrollTop: number) => {
this.setState({
scrollTop,
});
@@ -119,10 +125,9 @@ class DocumentEdit extends Component {
const title = (
-
+ : collection &&
+ {collection.name}
-- {collection.description} --
+
}
+
+
- {collection.name}
++ {collection.description} ++
-
+
![Sign in with Slack]()
frames.push(node);
-const E = props => {
- return (
-
- {props.children}
-
- );
-};
-
-const line1 =
- {line1}
- {line2}
- {line3}
- {line4}
- {line5}
- {line6}
- {line7}
- {line8}
- {line9}
- {line10}
- {line11}
-
-);
-
-// Hmms leaving this here for now, would be nice to something
-
-export default frames;
diff --git a/frontend/scenes/Home/index.js b/frontend/scenes/Home/index.js
index e8f97a0c9..6726c7545 100644
--- a/frontend/scenes/Home/index.js
+++ b/frontend/scenes/Home/index.js
@@ -1,2 +1,3 @@
+// @flow
import Home from './Home';
export default Home;
diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js
index e5ed8afd6..b8839db25 100644
--- a/frontend/scenes/Search/Search.js
+++ b/frontend/scenes/Search/Search.js
@@ -1,24 +1,27 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React from 'react';
import { observer } from 'mobx-react';
import _ from 'lodash';
-
import { Flex } from 'reflexbox';
-import Layout, { Title } from 'components/Layout';
-import CenteredContent from 'components/CenteredContent';
+
import SearchField from './components/SearchField';
-import DocumentPreview from 'components/DocumentPreview';
-
import styles from './Search.scss';
-
import SearchStore from './SearchStore';
-@observer class Search extends React.Component {
- static propTypes = {
- route: PropTypes.object.isRequired,
- routeParams: PropTypes.object.isRequired,
- };
+import Layout, { Title } from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
+import DocumentPreview from 'components/DocumentPreview';
- constructor(props) {
+type Props = {
+ route: Object,
+ routeParams: Object,
+};
+
+@observer class Search extends React.Component {
+ props: Props;
+ store: SearchStore;
+
+ constructor(props: Props) {
super(props);
this.store = new SearchStore();
}
@@ -32,7 +35,7 @@ import SearchStore from './SearchStore';
}
};
- get viewNotFound() {
+ get viewNotFound(): boolean {
const { sceneType } = this.props.route;
return sceneType === 'notFound';
}
@@ -41,11 +44,7 @@ import SearchStore from './SearchStore';
const search = _.debounce(searchTerm => {
this.store.search(searchTerm);
}, 250);
- const title = (
-
- Search
-
- );
+ const title = {
+ @action search = async (query: string) => {
this.searchTerm = query;
this.isFetching = true;
if (query) {
try {
const res = await client.get('/documents.search', { query });
+ invariant(res && res.data && res.pagination, 'API response');
const { data, pagination } = res;
runInAction('search document', () => {
this.documents = data;
diff --git a/frontend/scenes/Search/components/SearchField/SearchField.js b/frontend/scenes/Search/components/SearchField/SearchField.js
index b3f04c6f4..0061cb9a2 100644
--- a/frontend/scenes/Search/components/SearchField/SearchField.js
+++ b/frontend/scenes/Search/components/SearchField/SearchField.js
@@ -1,3 +1,4 @@
+// @flow
import React, { PropTypes } from 'react';
import { observer } from 'mobx-react';
@@ -8,8 +9,8 @@ import styles from './SearchField.scss';
onChange: PropTypes.func,
};
- onChange = event => {
- this.props.onChange(event.currentTarget.value);
+ onChange = (event: SyntheticEvent) => {
+ event.currentTarget.value && this.props.onChange(event.currentTarget.value);
};
render() {
diff --git a/frontend/scenes/Search/components/SearchField/index.js b/frontend/scenes/Search/components/SearchField/index.js
index 9f46c79b7..a45be6bf8 100644
--- a/frontend/scenes/Search/components/SearchField/index.js
+++ b/frontend/scenes/Search/components/SearchField/index.js
@@ -1,2 +1,3 @@
+// @flow
import SearchField from './SearchField';
export default SearchField;
diff --git a/frontend/scenes/Search/index.js b/frontend/scenes/Search/index.js
index ac515625d..cab602514 100644
--- a/frontend/scenes/Search/index.js
+++ b/frontend/scenes/Search/index.js
@@ -1,2 +1,3 @@
+// @flow
import Search from './Search';
export default Search;
diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js
index 7b0516629..49df4a974 100644
--- a/frontend/scenes/Settings/Settings.js
+++ b/frontend/scenes/Settings/Settings.js
@@ -13,7 +13,7 @@ import CenteredContent from 'components/CenteredContent';
import SlackAuthLink from 'components/SlackAuthLink';
@observer class Settings extends React.Component {
- store = SettingsStore;
+ store: SettingsStore;
constructor() {
super();
@@ -21,13 +21,7 @@ import SlackAuthLink from 'components/SlackAuthLink';
}
render() {
- const title = (
-
- Settings
-
- );
-
- // $FlowIssue global variable
+ const title =
![Add to Slack]()
- {this.store.apiKeys.map(key => (
-
Hi there,
; -const line2 =We're excited to share what we’re building.
; -const line3 =We **love** Markdown,
; -const line4 =but we also get that it's not for everyone.
; -const line5 =Together with you,
; -const line6 =we want to build the best place to
; -const line7 =share ideas,
; -const line8 =tell stories,
; -const line9 =and build knowledge.
; -const line10 =We're just getting started.
; -const line11 =Welcome to Atlas.
; - -p( -