flow

app/components/Button.js

@@ -155,6 +155,6 @@ function Button({
   );
 }
 
-export default React.forwardRef((props, ref) => (
+export default React.forwardRef<Props, typeof Button>((props, ref) => (
   <Button {...props} innerRef={ref} />
 ));

app/components/Checkbox.js

@@ -10,6 +10,7 @@ export type Props = {
   labelHidden?: boolean,
   className?: string,
   note?: string,
+  short?: boolean,
   small?: boolean,
 };
 

app/components/Editor.js

@@ -15,18 +15,21 @@ import { uploadFile } from "utils/uploadFile";
 const EMPTY_ARRAY = [];
 
 type Props = {
-  id: string,
+  id?: string,
   defaultValue?: string,
   readOnly?: boolean,
   grow?: boolean,
   disableEmbeds?: boolean,
-  history: RouterHistory,
+  ui?: UiStore,
+};
+
+type PropsWithRef = Props & {
   forwardedRef: React.Ref<RichMarkdownEditor>,
-  ui: UiStore,
+  history: RouterHistory,
 };
 
 @observer
-class Editor extends React.Component<Props> {
+class Editor extends React.Component<PropsWithRef> {
   @observable redirectTo: ?string;
 
   onUploadImage = async (file: File) => {
@@ -62,7 +65,9 @@ class Editor extends React.Component<Props> {
   };
 
   onShowToast = (message: string) => {
-    this.props.ui.showToast(message);
+    if (this.props.ui) {
+      this.props.ui.showToast(message);
+    }
   };
 
   render() {
@@ -120,6 +125,6 @@ const Span = styled.span`
 
 const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
 
-export default React.forwardRef((props, ref) => (
+export default React.forwardRef<Props, typeof Editor>((props, ref) => (
   <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
 ));

app/components/HoverPreview.js

@@ -31,7 +31,7 @@ function HoverPreview({ node, documents, onClose, event }: Props) {
   const [isVisible, setVisible] = React.useState(false);
   const timerClose = React.useRef();
   const timerOpen = React.useRef();
-  const cardRef = React.useRef();
+  const cardRef = React.useRef<?HTMLDivElement>();
 
   const startCloseTimer = () => {
     stopOpenTimer();
@@ -68,6 +68,8 @@ function HoverPreview({ node, documents, onClose, event }: Props) {
 
     if (cardRef.current) {
       cardRef.current.addEventListener("mouseenter", stopCloseTimer);
+    }
+    if (cardRef.current) {
       cardRef.current.addEventListener("mouseleave", startCloseTimer);
     }
 
@@ -82,6 +84,8 @@ function HoverPreview({ node, documents, onClose, event }: Props) {
 
       if (cardRef.current) {
         cardRef.current.removeEventListener("mouseenter", stopCloseTimer);
+      }
+      if (cardRef.current) {
         cardRef.current.removeEventListener("mouseleave", startCloseTimer);
       }
 

app/components/NudeButton.js

@@ -20,6 +20,6 @@ const Button = styled.button`
   }
 `;
 
-export default React.forwardRef((props, ref) => (
+export default React.forwardRef<any, typeof Button>((props, ref) => (
   <Button {...props} ref={ref} />
 ));

app/embeds/components/Frame.js

@@ -7,13 +7,16 @@ import styled from "styled-components";
 type Props = {
   src?: string,
   border?: boolean,
-  forwardedRef: *,
   width?: string,
   height?: string,
 };
 
+type PropsWithRef = Props & {
+  forwardedRef: React.Ref<typeof StyledIframe>,
+};
+
 @observer
-class Frame extends React.Component<Props> {
+class Frame extends React.Component<PropsWithRef> {
   mounted: boolean;
   @observable isLoaded: boolean = false;
 
@@ -79,6 +82,6 @@ const StyledIframe = styled(Iframe)`
   border-radius: 3px;
 `;
 
-export default React.forwardRef((props, ref) => (
+export default React.forwardRef<Props, typeof Frame>((props, ref) => (
   <Frame {...props} forwardedRef={ref} />
 ));

app/models/BaseModel.js

@@ -11,7 +11,7 @@ export default class BaseModel {
     this.store = store;
   }
 
-  save = async (params) => {
+  save = async (params: ?Object) => {
     this.isSaving = true;
 
     try {
@@ -27,7 +27,7 @@ export default class BaseModel {
     }
   };
 
-  fetch = (options: *) => {
+  fetch = (options?: any) => {
     return this.store.fetch(this.id, options);
   };
 
@@ -44,7 +44,7 @@ export default class BaseModel {
     }
   };
 
-  toJS = () => {
+  toJS = (): Object => {
     return { ...this };
   };
 }

app/scenes/Document/components/DataLoader.js

@@ -3,7 +3,7 @@ import invariant from "invariant";
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
-import type { Location, RouterHistory, Match } from "react-router-dom";
+import type { RouterHistory, Match } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -18,12 +18,13 @@ import DocumentComponent from "./Document";
 import HideSidebar from "./HideSidebar";
 import Loading from "./Loading";
 import SocketPresence from "./SocketPresence";
+import { type LocationWithState } from "types";
 import { NotFoundError, OfflineError } from "utils/errors";
 import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
 
 type Props = {|
   match: Match,
-  location: Location,
+  location: LocationWithState,
   shares: SharesStore,
   documents: DocumentsStore,
   policies: PoliciesStore,

app/scenes/Document/components/Editor.js

@@ -25,23 +25,23 @@ type Props = {
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  editor: ?Editor;
+  editor = React.createRef<typeof Editor>();
 
   focusAtStart = () => {
-    if (this.editor) {
-      this.editor.focusAtStart();
+    if (this.editor.current) {
+      this.editor.current.focusAtStart();
     }
   };
 
   focusAtEnd = () => {
-    if (this.editor) {
-      this.editor.focusAtEnd();
+    if (this.editor.current) {
+      this.editor.current.focusAtEnd();
     }
   };
 
   getHeadings = () => {
-    if (this.editor) {
-      return this.editor.getHeadings();
+    if (this.editor.current) {
+      return this.editor.current.getHeadings();
     }
 
     return [];
@@ -89,7 +89,7 @@ class DocumentEditor extends React.Component<Props> {
         />
         <DocumentMeta isDraft={isDraft} document={document} />
         <Editor
-          ref={(ref) => (this.editor = ref)}
+          ref={this.editor}
           autoFocus={title && !this.props.defaultValue}
           placeholder="…the rest is up to you"
           onHoverLink={this.handleLinkActive}

app/scenes/Document/components/Loading.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from "react";
-import type { Location } from "react-router-dom";
 import CenteredContent from "components/CenteredContent";
 import LoadingPlaceholder from "components/LoadingPlaceholder";
 import PageTitle from "components/PageTitle";
 import Container from "./Container";
+import type { LocationWithState } from "types";
 
 type Props = {|
-  location: Location,
+  location: LocationWithState,
 |};
 
 export default function Loading({ location }: Props) {

app/scenes/Search/Search.js

@@ -46,7 +46,7 @@ type Props = {
 
 @observer
 class Search extends React.Component<Props> {
-  firstDocument: ?DocumentPreview;
+  firstDocument: ?typeof DocumentPreview;
 
   @observable
   query: string = decodeURIComponent(this.props.match.params.term || "");

app/scenes/Settings/components/NotificationListItem.js

@@ -16,7 +16,6 @@ const NotificationListItem = ({
   setting,
   title,
   event,
-  enabled,
   onChange,
   disabled,
   description,

app/scenes/Settings/components/TokenListItem.js

@@ -6,7 +6,7 @@ import ListItem from "components/List/Item";
 
 type Props = {
   token: ApiKey,
-  onDelete: (tokenId: string) => void,
+  onDelete: (tokenId: string) => Promise<void>,
 };
 
 const TokenListItem = ({ token, onDelete }: Props) => {

app/types/index.js

@@ -1,6 +1,13 @@
 // @flow
+import { type Location } from "react-router-dom";
 import Document from "models/Document";
 
+export type LocationWithState = Location & {
+  state: {
+    [key: string]: string,
+  },
+};
+
 export type Toast = {
   id: string,
   createdAt: string,