chore: Update syntax, improve more typing (#1439)

* chore: <React.Fragment> to <>

* flow types

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,
@@ -166,10 +167,10 @@ class DataLoader extends React.Component<Props> {
 
     if (!document) {
       return (
-        <React.Fragment>
+        <>
           <Loading location={location} />
           {this.isEditing && <HideSidebar ui={ui} />}
-        </React.Fragment>
+        </>
       );
     }
 

app/scenes/Document/components/Document.js

@@ -375,7 +375,7 @@ class DocumentScene extends React.Component<Props> {
 
           <Container justify="center" column auto>
             {!readOnly && (
-              <React.Fragment>
+              <>
                 <Prompt
                   when={this.isDirty && !this.isUploading}
                   message={DISCARD_CHANGES}
@@ -384,7 +384,7 @@ class DocumentScene extends React.Component<Props> {
                   when={this.isUploading && !this.isDirty}
                   message={UPLOADING_WARNING}
                 />
-              </React.Fragment>
+              </>
             )}
             {!isShare && (
               <Header
@@ -427,12 +427,12 @@ class DocumentScene extends React.Component<Props> {
                   Deleted by {document.updatedBy.name}{" "}
                   <Time dateTime={document.deletedAt} /> ago
                   {document.permanentlyDeletedAt && (
-                    <React.Fragment>
+                    <>
                       <br />
                       This {document.noun} will be permanently deleted in{" "}
                       <Time dateTime={document.permanentlyDeletedAt} /> unless
                       restored.
-                    </React.Fragment>
+                    </>
                   )}
                 </Notice>
               )}
@@ -473,12 +473,12 @@ class DocumentScene extends React.Component<Props> {
                 />
               </Flex>
               {readOnly && !isShare && !revision && (
-                <React.Fragment>
+                <>
                   <MarkAsViewed document={document} />
                   <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
                     <References document={document} />
                   </ReferencesWrapper>
-                </React.Fragment>
+                </>
               )}
             </MaxWidth>
           </Container>

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/Header.js

@@ -162,7 +162,7 @@ class Header extends React.Component<Props> {
         <BreadcrumbAndContents align="center" justify="flex-start">
           <Breadcrumb document={document} />
           {!isEditing && (
-            <React.Fragment>
+            <>
               <Slash />
               <Tooltip
                 tooltip={ui.tocVisible ? "Hide contents" : "Show contents"}
@@ -183,7 +183,7 @@ class Header extends React.Component<Props> {
                   small
                 />
               </Tooltip>
-            </React.Fragment>
+            </>
           )}
         </BreadcrumbAndContents>
         {this.isScrolled && (
@@ -216,10 +216,10 @@ class Header extends React.Component<Props> {
               <Tooltip
                 tooltip={
                   isPubliclyShared ? (
-                    <React.Fragment>
+                    <>
                       Anyone with the link <br />
                       can view this document
-                    </React.Fragment>
+                    </>
                   ) : (
                     ""
                   )
@@ -239,7 +239,7 @@ class Header extends React.Component<Props> {
             </Action>
           )}
           {isEditing && (
-            <React.Fragment>
+            <>
               <Action>
                 <Tooltip
                   tooltip="Save"
@@ -258,7 +258,7 @@ class Header extends React.Component<Props> {
                   </Button>
                 </Tooltip>
               </Action>
-            </React.Fragment>
+            </>
           )}
           {canEdit && (
             <Action>
@@ -330,7 +330,7 @@ class Header extends React.Component<Props> {
             </Action>
           )}
           {!isEditing && (
-            <React.Fragment>
+            <>
               <Separator />
               <Action>
                 <DocumentMenu
@@ -340,7 +340,7 @@ class Header extends React.Component<Props> {
                   showPrint
                 />
               </Action>
-            </React.Fragment>
+            </>
           )}
         </Wrapper>
       </Actions>

app/scenes/Document/components/KeyboardShortcutsButton.js

@@ -26,7 +26,7 @@ class KeyboardShortcutsButton extends React.Component<Props> {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Modal
           isOpen={this.keyboardShortcutsOpen}
           onRequestClose={this.handleCloseKeyboardShortcuts}
@@ -44,7 +44,7 @@ class KeyboardShortcutsButton extends React.Component<Props> {
             <KeyboardIcon />
           </Button>
         </Tooltip>
-      </React.Fragment>
+      </>
     );
   }
 }

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) {