Update flow typings for new flow

Author: Ives van Hoorne

src/app/components/ConfirmLink.js

@@ -1,14 +1,13 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 type Props = {
   enabled: boolean,
   message: string,
 };
 
-export default class ConfirmLink extends React.PureComponent {
-  props: Props;
+export default class ConfirmLink extends React.PureComponent<Props> {
   confirm = (e: Event) => {
     const { enabled, message } = this.props;
 

src/app/components/Portal.js

@@ -1,13 +1,12 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 type Props = {
-  children: React.Element<*>,
+  children: React.Element<any>,
 };
 
-export default class Portal extends React.Component {
-  props: Props;
+export default class Portal extends React.Component<Props> {
   popup: Element;
 
   componentDidMount() {

src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import CodeMirror from 'codemirror';
 import styled, { keyframes } from 'styled-components';
 import type { Preferences, ModuleError } from 'common/types';
@@ -185,9 +185,7 @@ const handleError = (
   }
 };
 
-export default class CodeEditor extends React.PureComponent {
-  props: Props;
-
+export default class CodeEditor extends React.PureComponent<Props> {
   shouldComponentUpdate(nextProps: Props) {
     return (
       nextProps.id !== this.props.id ||

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { debounce } from 'lodash';
 import type { Preferences, ModuleError, Module, Directory } from 'common/types';
@@ -150,9 +150,7 @@ const handleError = (
   }
 };
 
-export default class CodeEditor extends React.PureComponent {
-  props: Props;
-
+export default class CodeEditor extends React.PureComponent<Props> {
   syntaxWorker: ServiceWorker;
   lintWorker: ServiceWorker;
   typingsFetcherWorker: ServiceWorker;

src/app/components/sandbox/DeleteSandboxButton.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import DeleteIcon from 'react-icons/lib/md/delete';
 import Tooltip from 'app/components/Tooltip';
@@ -27,9 +27,9 @@ type Props = {
   id: string,
 };
 
-export default class DeleteSandboxButtonContainer extends React.PureComponent {
-  props: Props;
-
+export default class DeleteSandboxButtonContainer extends React.PureComponent<
+  Props,
+> {
   deleteSandbox = () => {
     this.props.onDelete(this.props.id);
   };

src/app/components/sandbox/Preview/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { debounce } from 'lodash';
@@ -55,7 +55,7 @@ type State = {
   urlInAddressBar: string,
 };
 
-export default class Preview extends React.PureComponent {
+export default class Preview extends React.PureComponent<Props, State> {
   initialPath: string;
   frames: Array<HTMLFrameElement>;
 
@@ -320,8 +320,6 @@ export default class Preview extends React.PureComponent {
     setProjectView(sandboxId, !isInProjectView);
   };
 
-  props: Props;
-  state: State;
   element: ?Element;
   proxy: ?Object;
   rootInstance: ?Object;

src/app/components/sandbox/SandboxList.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import moment from 'moment';
 import { Link } from 'react-router-dom';

src/app/components/sandbox/Tags/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import Margin from 'app/components/spacing/Margin';

src/app/containers/ContextMenu.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { spring, Motion } from 'react-motion';
 import styled from 'styled-components';
@@ -45,7 +45,8 @@ const Item = styled.div`
   &:hover {
     color: ${props => (props.color ? props.color : theme.secondary())};
     background-color: ${() => theme.background2.lighten(0.3)()};
-    border-left-color: ${props => (props.color ? props.color : theme.secondary())};
+    border-left-color: ${props =>
+      props.color ? props.color : theme.secondary()};
   }
 `;
 
@@ -60,9 +61,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   contextMenuActions: bindActionCreators(contextMenuActionCreators, dispatch),
 });
-class ContextMenu extends React.PureComponent {
+class ContextMenu extends React.PureComponent<Props> {
   interval: number;
-  props: Props;
 
   setup = el => {
     this.mousedown = window.addEventListener('mousedown', event => {
@@ -111,7 +111,7 @@ class ContextMenu extends React.PureComponent {
                 opacity: spring(1),
               }}
             >
-              {({ size, opacity }) => (
+              {({ size, opacity }) =>
                 <Container
                   style={{
                     left: contextMenu.x + 10,
@@ -121,19 +121,18 @@ class ContextMenu extends React.PureComponent {
                   }}
                 >
                   <div>
-                    {contextMenu.items.map(item => (
+                    {contextMenu.items.map(item =>
                       <Item
                         key={item.title}
                         color={item.color}
                         onClick={() => item.action() && this.close()}
                       >
                         {item.icon && <item.icon />}
                         {item.title}
-                      </Item>
-                    ))}
+                      </Item>,
+                    )}
                   </div>
-                </Container>
-              )}
+                </Container>}
             </Motion>}
         </div>
       </Portal>

src/app/containers/Navigation/index.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -78,9 +78,7 @@ const mapStateToProps = state => ({
   hasLogin: !!jwtSelector(state),
   isPatron: isPatronSelector(state),
 });
-class Navigation extends React.PureComponent {
-  props: Props;
-
+class Navigation extends React.PureComponent<Props> {
   render() {
     const { title, hasLogin, isPatron } = this.props;