chore: Upgrade babel

.babelrc

@@ -1,18 +1,26 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-flow",
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
   "plugins": [
     "lodash",
     "styled-components",
-    "transform-decorators-legacy",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread",
-    "transform-regenerator",
-    "transform-class-properties",
-    "syntax-dynamic-import"
-  ],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
+    "@babel/plugin-transform-flow-strip-types",
+    [
+      "@babel/plugin-proposal-decorators",
+      { "legacy": true }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      { "loose": true }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-regenerator",
+    "react-hot-loader/babel"
+  ]
 }

app/components/Button.js

@@ -5,7 +5,7 @@ import { darken, lighten } from 'polished';
 import { ExpandedIcon } from 'outline-icons';
 
 const RealButton = styled.button`
-  display: inline-block;
+  display: inline-flex;
   margin: 0;
   padding: 0;
   border: 0;

app/components/DocumentHistory/DocumentHistory.js

@@ -4,7 +4,7 @@ import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import type { RouterHistory } from 'react-router-dom';
 import styled from 'styled-components';
-import Waypoint from 'react-waypoint';
+import { Waypoint } from 'react-waypoint';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 
 import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
@@ -42,9 +42,9 @@ class DocumentHistory extends React.Component<Props> {
     this.selectFirstRevision();
   }
 
-  async componentWillReceiveProps(nextProps) {
-    const document = nextProps.documents.getByUrl(
-      nextProps.match.params.documentSlug
+  async componentDidUpdate(nextProps) {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
     );
     if (!this.document && document) {
       this.document = document;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -3,15 +3,23 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 type Props = {
+  to?: string | Object,
   onClick?: (SyntheticEvent<>) => void | Promise<void>,
   children?: React.Node,
   disabled?: boolean,
 };
 
-const DropdownMenuItem = ({ onClick, children, disabled, ...rest }: Props) => {
+const DropdownMenuItem = ({
+  onClick,
+  to,
+  children,
+  disabled,
+  ...rest
+}: Props) => {
   return (
     <MenuItem
       onClick={disabled ? undefined : onClick}
+      to={disabled ? undefined : to}
       disabled={disabled}
       role="menuitem"
       tabIndex="-1"

app/components/Layout.js

@@ -45,12 +45,13 @@ class Layout extends React.Component<Props> {
   @observable redirectTo: ?string;
   @observable keyboardShortcutsOpen: boolean = false;
 
-  componentWillMount() {
-    this.updateBackground();
+  constructor(props) {
+    super();
+    this.updateBackground(props);
   }
 
   componentDidUpdate() {
-    this.updateBackground();
+    this.updateBackground(this.props);
 
     if (this.redirectTo) {
       this.redirectTo = undefined;
@@ -66,9 +67,9 @@ class Layout extends React.Component<Props> {
     this.keyboardShortcutsOpen = false;
   };
 
-  updateBackground() {
+  updateBackground(props) {
     // ensure the wider page color always matches the theme
-    window.document.body.style.background = this.props.theme.background;
+    window.document.body.style.background = props.theme.background;
   }
 
   @keydown(['/', 't', 'meta+k'])

app/components/Mask.js

@@ -13,12 +13,13 @@ type Props = {
 class Mask extends React.Component<Props> {
   width: number;
 
-  shouldComponentUpdate() {
-    return false;
+  constructor() {
+    super();
+    this.width = randomInteger(75, 100);
   }
 
-  componentWillMount() {
-    this.width = randomInteger(75, 100);
+  shouldComponentUpdate() {
+    return false;
   }
 
   render() {

app/components/Modals.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { observer } from 'mobx-react';
+import { observer, Observer } from 'mobx-react';
 import BaseModal from 'components/Modal';
 import UiStore from 'stores/UiStore';
 import CollectionNew from 'scenes/CollectionNew';
@@ -13,29 +13,32 @@ import DocumentShare from 'scenes/DocumentShare';
 type Props = {
   ui: UiStore,
 };
+
 @observer
 class Modals extends React.Component<Props> {
   handleClose = () => {
     this.props.ui.clearActiveModal();
   };
 
   render() {
-    const { activeModalName, activeModalProps } = this.props.ui;
-
     const Modal = ({ name, children, ...rest }) => {
       return (
-        <BaseModal
-          isOpen={activeModalName === name}
-          onRequestClose={this.handleClose}
-          {...rest}
-        >
-          {React.cloneElement(children, activeModalProps)}
-        </BaseModal>
+        <Observer>
+          {() => (
+            <BaseModal
+              isOpen={this.props.ui.activeModalName === name}
+              onRequestClose={this.handleClose}
+              {...rest}
+            >
+              {React.cloneElement(children, this.props.ui.activeModalProps)}
+            </BaseModal>
+          )}
+        </Observer>
       );
     };
 
     return (
-      <span>
+      <React.Fragment>
         <Modal name="collection-new" title="Create a collection">
           <CollectionNew onSubmit={this.handleClose} />
         </Modal>
@@ -54,7 +57,7 @@ class Modals extends React.Component<Props> {
         <Modal name="document-delete" title="Delete document">
           <DocumentDelete onSubmit={this.handleClose} />
         </Modal>
-      </span>
+      </React.Fragment>
     );
   }
 }

app/components/PaginatedDocumentList.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
-import Waypoint from 'react-waypoint';
+import { Waypoint } from 'react-waypoint';
 
 import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
 import Document from 'models/Document';

app/components/PaginatedList.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
-import Waypoint from 'react-waypoint';
+import { Waypoint } from 'react-waypoint';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 
 import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';

app/components/Sidebar/Main.js

@@ -44,11 +44,13 @@ class MainSidebar extends React.Component<Props> {
     this.props.documents.fetchDrafts();
   }
 
-  handleCreateCollection = () => {
+  handleCreateCollection = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
     this.props.ui.setActiveModal('collection-new');
   };
 
-  handleInviteModalOpen = () => {
+  handleInviteModalOpen = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
     this.inviteModalOpen = true;
   };
 
@@ -130,6 +132,7 @@ class MainSidebar extends React.Component<Props> {
               />
               {can.invite && (
                 <SidebarLink
+                  to="/settings/people"
                   onClick={this.handleInviteModalOpen}
                   icon={<PlusIcon />}
                   label="Invite people…"

app/components/Sidebar/Sidebar.js

@@ -20,8 +20,8 @@ type Props = {
 
 @observer
 class Sidebar extends React.Component<Props> {
-  componentWillReceiveProps = (nextProps: Props) => {
-    if (this.props.location !== nextProps.location) {
+  componentDidUpdate = (prevProps: Props) => {
+    if (this.props.location !== prevProps.location) {
       this.props.ui.hideMobileSidebar();
     }
   };

app/components/Sidebar/components/Collections.js

@@ -66,6 +66,7 @@ class Collections extends React.Component<Props> {
           />
         ))}
         <SidebarLink
+          to="/dashboard"
           onClick={this.props.onCreateCollection}
           icon={<PlusIcon />}
           label="New collection…"

app/components/Sidebar/components/SidebarLink.js

@@ -32,9 +32,9 @@ class SidebarLink extends React.Component<Props> {
     paddingLeft: `${(this.props.depth || 0) * 16 + 16}px`,
   };
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.expanded !== undefined) {
-      this.expanded = nextProps.expanded;
+  componentDidUpdate() {
+    if (this.props.expanded !== undefined) {
+      this.expanded = this.props.expanded;
     }
   }
 

app/index.js

@@ -1,5 +1,7 @@
 // @flow
+import 'react-hot-loader';
 import * as React from 'react';
+import { hot } from 'react-hot-loader/root';
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -11,34 +13,31 @@ import Toasts from 'components/Toasts';
 import Theme from 'components/Theme';
 import Routes from './routes';
 
-let DevTools;
-if (__DEV__) {
-  DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require
-}
-
 const element = document.getElementById('root');
 
-if (element) {
-  render(
-    <React.Fragment>
-      <ErrorBoundary>
-        <Provider {...stores}>
-          <Theme>
-            <Router>
-              <React.Fragment>
-                <ScrollToTop>
-                  <Routes />
-                </ScrollToTop>
-                <Toasts />
-              </React.Fragment>
-            </Router>
-          </Theme>
-        </Provider>
-      </ErrorBoundary>
-      {DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}
-    </React.Fragment>,
-    element
+const App = () => {
+  return (
+    <ErrorBoundary>
+      <Provider {...stores}>
+        <Theme>
+          <Router>
+            <React.Fragment>
+              <ScrollToTop>
+                <Routes />
+              </ScrollToTop>
+              <Toasts />
+            </React.Fragment>
+          </Router>
+        </Theme>
+      </Provider>
+    </ErrorBoundary>
   );
+};
+
+const AppContainer = hot(App);
+
+if (element) {
+  render(<AppContainer />, element);
 }
 
 window.addEventListener('load', async () => {

app/menus/DocumentMenu.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { Redirect } from 'react-router-dom';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 import { inject, observer } from 'mobx-react';
 
 import Document from 'models/Document';
@@ -42,6 +42,7 @@ class DocumentMenu extends React.Component<Props> {
     this.redirectTo = undefined;
   }
 
+  @action
   handleNewChild = (ev: SyntheticEvent<>) => {
     const { document } = this.props;
     this.redirectTo = newDocumentUrl(document.collectionId, document.id);
@@ -52,6 +53,7 @@ class DocumentMenu extends React.Component<Props> {
     this.props.ui.setActiveModal('document-delete', { document });
   };
 
+  @action
   handleDocumentHistory = () => {
     if (this.props.isRevision) {
       this.redirectTo = documentUrl(this.props.document);
@@ -60,14 +62,17 @@ class DocumentMenu extends React.Component<Props> {
     }
   };
 
+  @action
   handleMove = (ev: SyntheticEvent<>) => {
     this.redirectTo = documentMoveUrl(this.props.document);
   };
 
+  @action
   handleEdit = (ev: SyntheticEvent<>) => {
     this.redirectTo = documentEditUrl(this.props.document);
   };
 
+  @action
   handleDuplicate = async (ev: SyntheticEvent<>) => {
     const duped = await this.props.document.duplicate();