Fix flow annotations to work on flow v0.66

17 files changed, 130 insertions, 111 deletions

diff --git a/app/components/Accordion.js b/app/components/Accordion.js
index 456a95fe05..cdc6a69515 100644
--- a/app/components/Accordion.js
+++ b/app/components/Accordion.js
@@ -1,25 +1,23 @@
 // @flow
-
-import React, { Component } from 'react';
+import * as React from 'react';
 
 export type AccordionProps = {
   height?: number | string,
   transitionStyle?: string,
-  children?: Array<React.Element<*>> | React.Element<*> // see https://github.com/facebook/flow/issues/1964
+  children?: React.Node
 };
 
-export type AccordionState = {
+type AccordionState = {
   computedHeight: ?number | ?string,
 };
 
-export default class Accordion extends Component {
-  props: AccordionProps;
-  static defaultProps: $Shape<AccordionProps> = {
+export default class Accordion extends React.Component<AccordionProps, AccordionState> {
+  static defaultProps = {
     height: 'auto',
     transitionStyle: 'height 0.25s ease-in-out'
   };
 
-  state: AccordionState = {
+  state = {
     computedHeight: null,
   };
 
@@ -93,7 +91,7 @@ export default class Accordion extends Component {
   // Sets initial height and delays transition until next runloop
   // to make sure CSS transitions properly kick in.
   // This method resolves immediately if the height is already set.
-  _warmupTransition() {
+  _warmupTransition(): Promise<void> {
     const contentElement = this._contentElement;
     if(!contentElement) {
       throw new Error('contentElement cannot be null');
diff --git a/app/components/AccountInput.js b/app/components/AccountInput.js
index 4ff99e13fd..21967d856a 100644
--- a/app/components/AccountInput.js
+++ b/app/components/AccountInput.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { formatAccount } from '../lib/formatters';
 
 // @TODO: move it into types.js
@@ -20,23 +20,21 @@ export type AccountInputProps = {
   onChange: ?((newValue: string) => void);
 };
 
-export type AccountInputState = {
+type AccountInputState = {
   value: string;
   selectionRange: SelectionRange;
 };
 
-export type SelectionRange = [number, number];
+type SelectionRange = [number, number];
 
-export default class AccountInput extends Component {
-  props: AccountInputProps;
-
-  static defaultProps: AccountInputProps = {
+export default class AccountInput extends React.Component<AccountInputProps, AccountInputState> {
+  static defaultProps = {
     value: '',
     onEnter: null,
     onChange: null
   };
 
-  state: AccountInputState = {
+  state = {
     value: '',
     selectionRange: [0, 0]
   };
@@ -297,7 +295,7 @@ export default class AccountInput extends Component {
     }
   }
 
-  onRef = (ref: HTMLInputElement) => {
+  onRef = (ref: ?HTMLInputElement) => {
     this._ref = ref;
     if(!ref) { return; }
 
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 602b9898e9..14e4879706 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { Button } from './styled';
 import { Layout, Container } from './Layout';
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 1c1a4bac1e..3408e40b8d 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,7 +1,7 @@
 // @flow
 
 import moment from 'moment';
-import React, { Component } from 'react';
+import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
 import { BackendError } from '../lib/backend';
 import Map from './Map';
@@ -29,14 +29,13 @@ type ConnectState = {
   mapOffset: [number, number],
 };
 
-export default class Connect extends Component {
-  props: ConnectProps;
-  state: ConnectState = {
+export default class Connect extends React.Component<ConnectProps, ConnectState> {
+  state = {
     showCopyIPMessage: false,
     mapOffset: [0, 0],
   };
 
-  _copyTimer: ?number;
+  _copyTimer: ?TimeoutID;
 
   shouldComponentUpdate(nextProps: ConnectProps, nextState: ConnectState) {
     const { connection: prevConnection, ...otherPrevProps } = this.props;
@@ -130,7 +129,7 @@ export default class Connect extends Component {
     }
   }
 
-  _updateMapOffset = (spinnerNode: HTMLElement) => {
+  _updateMapOffset = (spinnerNode: ?HTMLElement) => {
     if(spinnerNode) {
       // calculate the vertical offset from the center of the map
       // to shift the center of the map upwards to align the centers
diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js
index 69381f60cd..97c78f4ab9 100644
--- a/app/components/CustomScrollbars.js
+++ b/app/components/CustomScrollbars.js
@@ -1,5 +1,6 @@
 // @flow
-import React, { Component } from 'react';
+
+import * as React from 'react';
 
 type ScrollbarUpdateContext = {
   size: boolean,
@@ -8,13 +9,18 @@ type ScrollbarUpdateContext = {
 
 const AUTOHIDE_TIMEOUT = 1000;
 
-export default class CustomScrollbars extends Component {
-  props: {
-    autoHide: boolean,
-    thumbInset: { x: number, y: number },
-    children: ?React.Element<*>,
-  };
+type Props = {
+  autoHide: boolean,
+  thumbInset: { x: number, y: number },
+  children?: React.Node,
+};
+
+type State = {
+  canScroll: boolean,
+  showScrollIndicators: boolean,
+};
 
+export default class CustomScrollbars extends React.Component<Props, State> {
   static defaultProps = {
     autoHide: true,
     thumbInset: { x: 2, y: 2 },
@@ -27,7 +33,7 @@ export default class CustomScrollbars extends Component {
 
   _scrollableElement: ?HTMLElement;
   _thumbElement: ?HTMLElement;
-  _autoHideTimer: ?number;
+  _autoHideTimer: ?TimeoutID;
 
   componentDidMount() {
     this._updateScrollbarsHelper({
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 5c0e1f5bcb..51b135e8f5 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -1,14 +1,13 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import HeaderBar from './HeaderBar';
 
 import type { HeaderBarProps } from './HeaderBar';
 
-export class Header extends Component {
-  props: HeaderBarProps;
+export class Header extends React.Component<HeaderBarProps> {
   static defaultProps = HeaderBar.defaultProps;
 
-  render(): React.Element<*> {
+  render() {
     return (
       <div className="layout__header">
         <HeaderBar { ...this.props } />
@@ -17,12 +16,13 @@ export class Header extends Component {
   }
 }
 
-export class Container extends Component {
-  props: {
-    children: React.Element<*>
-  }
 
-  render(): React.Element<*> {
+type ContainerProps = {
+  children?: React.Element<*>
+};
+
+export class Container extends React.Component<ContainerProps> {
+  render() {
     return (
       <div className="layout__container">
         { this.props.children }
@@ -31,12 +31,12 @@ export class Container extends Component {
   }
 }
 
-export class Layout extends Component {
-  props: {
-    children: Array<React.Element<*>> | React.Element<*>
-  }
+type LayoutProps = {
+  children?: React.Node
+};
 
-  render(): React.Element<*> {
+export class Layout extends React.Component<LayoutProps> {
+  render() {
     return (
       <div className="layout">
         { this.props.children }
diff --git a/app/components/Login.js b/app/components/Login.js
index c133954eed..3231fc7710 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
 import AccountInput from './AccountInput';
 import { formatAccount } from '../lib/formatters';
@@ -20,8 +20,13 @@ export type LoginPropTypes = {
   onRemoveAccountTokenFromHistory: (accountToken: AccountToken) => void,
 };
 
-export default class Login extends Component {
-  props: LoginPropTypes;
+type State = {
+  notifyOnFirstChangeAfterFailure: boolean,
+  isActive: boolean,
+  dropdownHeight: number
+};
+
+export default class Login extends React.Component<LoginPropTypes, State> {
   state = {
     notifyOnFirstChangeAfterFailure: false,
     isActive: false,
@@ -293,13 +298,13 @@ export default class Login extends Component {
   }
 }
 
-class AccountDropdown extends Component {
-  props: {
-    items: Array<AccountToken>,
-    onSelect: ((value: AccountToken) => void),
-    onRemove: ((value: AccountToken) => void)
-  };
+type AccountDropdownProps = {
+  items: Array<AccountToken>,
+  onSelect: (value: AccountToken) => void,
+  onRemove: (value: AccountToken) => void,
+};
 
+class AccountDropdown extends React.Component<AccountDropdownProps> {
   render() {
     const uniqueItems = [...new Set(this.props.items)];
     return (
@@ -316,14 +321,14 @@ class AccountDropdown extends Component {
   }
 }
 
-class AccountDropdownItem extends Component {
-  props: {
-    label: string,
-    value: AccountToken,
-    onRemove: (value: AccountToken) => void,
-    onSelect: (value: AccountToken) => void
-  };
+type AccountDropdownItemProps = {
+  label: string,
+  value: AccountToken,
+  onRemove: (value: AccountToken) => void,
+  onSelect: (value: AccountToken) => void,
+};
 
+class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
   render() {
     return (
       <div className="login-form__account-dropdown__item">
diff --git a/app/components/Map.js b/app/components/Map.js
index d416b77961..3865e8975a 100644
--- a/app/components/Map.js
+++ b/app/components/Map.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import * as React from 'react';
 import { Component, View } from 'reactxp';
 
 import SvgMap from './SvgMap';
@@ -21,11 +21,8 @@ type MapState = {
   }
 };
 
-export default class Map extends Component {
-
-  props: MapProps;
-
-  state: MapState = {
+export default class Map extends Component<MapProps, MapState> {
+  state = {
     bounds: {
       width: 0,
       height: 0,
@@ -84,6 +81,8 @@ export default class Map extends Component {
     case 'high': return 1;
     case 'medium': return 20;
     case 'low': return 40;
+    default:
+      throw new Error(`Invalid enumeration type: ${variant}`);
     }
   }
 
@@ -93,6 +92,8 @@ export default class Map extends Component {
       return './assets/images/location-marker-secure.svg';
     case 'unsecure':
       return './assets/images/location-marker-unsecure.svg';
+    default:
+      throw new Error(`Invalid enumeration type: ${style}`);
     }
   }
 
diff --git a/app/components/PlatformWindow.js b/app/components/PlatformWindow.js
index 8b8e2c462f..b727cdd7b1 100644
--- a/app/components/PlatformWindow.js
+++ b/app/components/PlatformWindow.js
@@ -1,11 +1,12 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 
-export default class PlatformWindow extends Component {
-  props: {
-    children: Array<React.Element<*>> | React.Element<*>
-  }
-  render(): React.Element<*> {
+type Props = {
+  children?: React.Node
+};
+
+export default class PlatformWindow extends React.Component<Props> {
+  render() {
     const chromeClass = ['window-chrome', 'window-chrome--' + process.platform];
     return (
       <div className={ chromeClass.join(' ') }>
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 12cde94211..946a275146 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 
@@ -17,12 +17,15 @@ export type SelectLocationProps = {
   onSelect: (location: RelayLocation) => void;
 };
 
-export default class SelectLocation extends Component {
-  props: SelectLocationProps;
+type State = {
+  expanded: Array<string>
+};
+
+export default class SelectLocation extends React.Component<SelectLocationProps, State> {
   _selectedCell: ?HTMLElement;
 
   state = {
-    expanded: ([]: Array<string>),
+    expanded: [],
   };
 
   constructor(props: SelectLocationProps, context?: any) {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index cae2503127..642887cd9b 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,6 +1,6 @@
 // @flow
 import moment from 'moment';
-import React from 'react';
+import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { Button, CellButton, RedButton, Label, SubText} from './styled';
 import { Layout, Container } from './Layout';
@@ -24,10 +24,7 @@ export type SettingsProps = {
   onExternalLink: (type: string) => void,
 };
 
-export default class Settings extends Component {
-
-  props: SettingsProps;
-
+export default class Settings extends Component<SettingsProps> {
   render() {
     return (
       <Layout>
diff --git a/app/components/Support.js b/app/components/Support.js
index 80116bcc1b..ee1db73d96 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Component, Text, View, TextInput } from 'reactxp';
 import { Button, BlueButton, GreenButton, Label } from './styled';
 import { Layout, Container } from './Layout';
@@ -14,12 +14,13 @@ export type SupportReport = {
   savedReport: ?string,
 };
 
-export type SupportState = {
+type SupportState = {
   email: string,
   message: string,
   savedReport: ?string,
   sendState: 'INITIAL' | 'CONFIRM_NO_EMAIL' | 'LOADING' | 'SUCCESS' | 'FAILED',
 };
+
 export type SupportProps = {
   account: AccountReduxState,
   onClose: () => void;
@@ -28,14 +29,13 @@ export type SupportProps = {
   onSend: (email: string, message: string, savedReport: string) => void;
 };
 
-export default class Support extends Component {
-  props: SupportProps;
-  state: SupportState = {
+export default class Support extends Component<SupportProps, SupportState> {
+  state = {
     email: '',
     message: '',
     savedReport: null,
     sendState: 'INITIAL',
-  }
+  };
 
   validate() {
     return this.state.message.trim().length > 0;
@@ -57,7 +57,7 @@ export default class Support extends Component {
       });
   }
 
-  _getLog() {
+  _getLog(): Promise<string> {
     const toRedact = [];
     if (this.props.account.accountToken) {
       toRedact.push(this.props.account.accountToken.toString());
diff --git a/app/components/SvgMap.js b/app/components/SvgMap.js
index 2803f0c4ef..48288f9a8a 100644
--- a/app/components/SvgMap.js
+++ b/app/components/SvgMap.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import * as React from 'react';
 import { ComposableMap, ZoomableGroup, Geographies, Geography, Markers, Marker } from 'react-simple-maps';
 
 import { geoTimes } from 'd3-geo-projection';
@@ -44,9 +44,8 @@ type SvgMapState = {
 const MOVE_SPEED = 2000;
 
 // @TODO: Calculate zoom level based on (center + span) (aka MKCoordinateSpan)
-export default class SvgMap extends Component {
-  props: SvgMapProps;
-  state: SvgMapState = {
+export default class SvgMap extends React.Component<SvgMapProps, SvgMapState> {
+  state = {
     zoomCenter: [0, 0],
     zoomLevel: 1,
     visibleCities: [],
diff --git a/app/components/Switch.js b/app/components/Switch.js
index b3f2f58a58..9032065e9a 100644
--- a/app/components/Switch.js
+++ b/app/components/Switch.js
@@ -1,30 +1,36 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 
 const CLICK_TIMEOUT = 1000;
 const MOVE_THRESHOLD = 10;
 
 export type SwitchProps = {
+  className?: string;
   isOn: boolean;
   onChange: ?((isOn: boolean) => void);
 };
 
-export default class Switch extends Component {
-  props: SwitchProps;
+type State = {
+  ignoreChange: boolean,
+  initialPos: {x: number, y: number},
+  startTime: ?number,
+};
+
+export default class Switch extends React.Component<SwitchProps, State> {
   static defaultProps: SwitchProps = {
     isOn: false,
     onChange: null
-  }
-
-  isCapturingMouseEvents = false;
-  ref: ?HTMLInputElement;
-  onRef = (e: HTMLInputElement) => this.ref = e;
+  };
 
   state = {
     ignoreChange: false,
     initialPos: {x: 0, y: 0},
     startTime: (null: ?number)
-  }
+  };
+
+  isCapturingMouseEvents = false;
+  ref: ?HTMLInputElement;
+  onRef = (e: ?HTMLInputElement) => this.ref = e;
 
   handleMouseDown = (e: MouseEvent) => {
     const { clientX: x, clientY: y } = e;
@@ -124,9 +130,9 @@ export default class Switch extends Component {
     }
   }
 
-  render(): React.Element<*> {
+  render() {
     const { isOn, onChange, ...otherProps } = this.props; // eslint-disable-line no-unused-vars
-    let className = ('switch' + ' ' + (otherProps.className || '')).trim();
+    const className = ('switch ' + (otherProps.className || '')).trim();
     return (
       <input { ...otherProps }
         type="checkbox"
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index f868d33ce0..fdb6d35dfa 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
 import { colors } from '../../config';
@@ -76,7 +76,7 @@ export class Label extends Text {}
 
 class BaseButton extends Component {
   props: {
-    children: Array<React.Element<*>> | React.Element<*>,
+    children?: React.Node,
     disabled: boolean,
   };
 
diff --git a/app/components/styled/Button.js b/app/components/styled/Button.js
index 59d2371480..2fef7361e2 100644
--- a/app/components/styled/Button.js
+++ b/app/components/styled/Button.js
@@ -7,7 +7,12 @@ const defaultStyle = ReactXP.Styles.createViewStyle({
   cursor: 'default',
 });
 
-export function Button(props: *) {
+type Props = {
+  style?: Object | Array<any>;
+  cursor?: string;
+};
+
+export function Button(props: Props) {
   const { style, cursor, ...rest } = props;
 
   const concreteStyle = ReactXP.Styles.combine([defaultStyle, style]);
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index fe3042709a..064c28ca2c 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -1,5 +1,6 @@
 // @flow
-import React from 'react';
+
+import * as React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
 import { colors } from '../../config';
@@ -66,7 +67,7 @@ export class Label extends Text {}
 
 export default class CellButton extends Component {
   props: {
-    children: Array<React.Element<*>> | React.Element<*>,
+    children?: React.Node,
     disabled: boolean,
   };