From e2bd03494d0856ef97f4844149dbc99c53ab486e Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 9 Aug 2020 09:48:04 -0700
Subject: [PATCH] chore: Update syntax, improve more typing (#1439)

* chore: <React.Fragment> to <>

* flow types
---
 app/components/Avatar/AvatarWithPresence.js   |   4 +-
 app/components/Breadcrumb.js                  |  24 ++---
 app/components/Button.js                      |   2 +-
 app/components/Checkbox.js                    |   5 +-
 app/components/DocumentMeta.js                |   4 +-
 app/components/DropdownMenu/DropdownMenu.js   |   4 +-
 .../DropdownMenu/DropdownMenuItem.js          |   4 +-
 app/components/Editor.js                      |  17 +--
 app/components/GroupListItem.js               |   8 +-
 app/components/HoverPreview.js                |   6 +-
 app/components/InputRich.js                   |   4 +-
 app/components/Modal.js                       |   4 +-
 app/components/NudeButton.js                  |   2 +-
 app/components/PaginatedList.js               |   8 +-
 .../Sidebar/components/Collections.js         |   4 +-
 app/components/Sidebar/components/Version.js  |   4 +-
 app/components/Theme.js                       |   4 +-
 app/components/Tooltip.js                     |   4 +-
 app/embeds/components/Frame.js                |   9 +-
 app/index.js                                  |   8 +-
 app/menus/AccountMenu.js                      |   4 +-
 app/menus/CollectionMenu.js                   |   8 +-
 app/menus/DocumentMenu.js                     |  12 +--
 app/menus/GroupMenu.js                        |   8 +-
 app/models/BaseModel.js                       |   6 +-
 app/scenes/Collection.js                      |  20 ++--
 .../CollectionMembers/CollectionMembers.js    |   8 +-
 .../CollectionGroupMemberListItem.js          |   4 +-
 .../components/MemberListItem.js              |   8 +-
 .../components/UserListItem.js                |   8 +-
 app/scenes/Document/components/DataLoader.js  |   9 +-
 app/scenes/Document/components/Document.js    |  12 +--
 app/scenes/Document/components/Editor.js      |  16 +--
 app/scenes/Document/components/Header.js      |  16 +--
 .../components/KeyboardShortcutsButton.js     |   4 +-
 app/scenes/Document/components/Loading.js     |   4 +-
 app/scenes/DocumentShare.js                   |   4 +-
 app/scenes/GroupMembers/GroupMembers.js       |   4 +-
 .../components/GroupMemberListItem.js         |   8 +-
 .../GroupMembers/components/UserListItem.js   |   8 +-
 app/scenes/GroupNew.js                        |   4 +-
 app/scenes/Invite.js                          |   4 +-
 app/scenes/Login/Notices.js                   |   4 +-
 app/scenes/Login/Service.js                   |   4 +-
 app/scenes/Login/index.js                     |   4 +-
 app/scenes/Search/Search.js                   |   2 +-
 app/scenes/Settings/Details.js                |   4 +-
 app/scenes/Settings/Events.js                 |   4 +-
 app/scenes/Settings/People.js                 |   4 +-
 .../Settings/components/EventListItem.js      | 100 +++++++++---------
 .../components/NotificationListItem.js        |   1 -
 .../Settings/components/ShareListItem.js      |   4 +-
 .../Settings/components/TokenListItem.js      |   2 +-
 .../Settings/components/UserListItem.js       |  12 +--
 app/types/index.js                            |   7 ++
 55 files changed, 239 insertions(+), 221 deletions(-)

diff --git a/app/components/Avatar/AvatarWithPresence.js b/app/components/Avatar/AvatarWithPresence.js
index c93f4e72..0f1e97b8 100644
--- a/app/components/Avatar/AvatarWithPresence.js
+++ b/app/components/Avatar/AvatarWithPresence.js
@@ -40,7 +40,7 @@ class AvatarWithPresence extends React.Component<Props> {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Tooltip
           tooltip={
             <Centered>
@@ -69,7 +69,7 @@ class AvatarWithPresence extends React.Component<Props> {
           isOpen={this.isOpen}
           onRequestClose={this.handleCloseProfile}
         />
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/components/Breadcrumb.js b/app/components/Breadcrumb.js
index ee2ecbd1..08cc104e 100644
--- a/app/components/Breadcrumb.js
+++ b/app/components/Breadcrumb.js
@@ -33,11 +33,11 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
 
   if (onlyText === true) {
     return (
-      <React.Fragment>
+      <>
         {collection.private && (
-          <React.Fragment>
+          <>
             <SmallPadlockIcon color="currentColor" size={16} />{" "}
-          </React.Fragment>
+          </>
         )}
         {collection.name}
         {path.map((n) => (
@@ -46,7 +46,7 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
             {n.title}
           </React.Fragment>
         ))}
-      </React.Fragment>
+      </>
     );
   }
 
@@ -59,24 +59,24 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
   return (
     <Wrapper justify="flex-start" align="center">
       {isTemplate && (
-        <React.Fragment>
+        <>
           <CollectionName to="/templates">
             <ShapesIcon color="currentColor" />
             &nbsp;
             <span>Templates</span>
           </CollectionName>
           <Slash />
-        </React.Fragment>
+        </>
       )}
       {isDraft && (
-        <React.Fragment>
+        <>
           <CollectionName to="/drafts">
             <EditIcon color="currentColor" />
             &nbsp;
             <span>Drafts</span>
           </CollectionName>
           <Slash />
-        </React.Fragment>
+        </>
       )}
       <CollectionName to={collectionUrl(collection.id)}>
         <CollectionIcon collection={collection} expanded />
@@ -84,17 +84,17 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
         <span>{collection.name}</span>
       </CollectionName>
       {isNestedDocument && (
-        <React.Fragment>
+        <>
           <Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
-        </React.Fragment>
+        </>
       )}
       {lastPath && (
-        <React.Fragment>
+        <>
           <Slash />{" "}
           <Crumb to={lastPath.url} title={lastPath.title}>
             {lastPath.title}
           </Crumb>
-        </React.Fragment>
+        </>
       )}
     </Wrapper>
   );
diff --git a/app/components/Button.js b/app/components/Button.js
index 6142d29c..ba18085f 100644
--- a/app/components/Button.js
+++ b/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} />
 ));
diff --git a/app/components/Checkbox.js b/app/components/Checkbox.js
index cbf361c3..85efc12a 100644
--- a/app/components/Checkbox.js
+++ b/app/components/Checkbox.js
@@ -10,6 +10,7 @@ export type Props = {
   labelHidden?: boolean,
   className?: string,
   note?: string,
+  short?: boolean,
   small?: boolean,
 };
 
@@ -42,7 +43,7 @@ export default function Checkbox({
   const wrappedLabel = <LabelText small={small}>{label}</LabelText>;
 
   return (
-    <React.Fragment>
+    <>
       <Wrapper small={small}>
         <Label>
           <input type="checkbox" {...rest} />
@@ -55,6 +56,6 @@ export default function Checkbox({
         </Label>
         {note && <HelpText small>{note}</HelpText>}
       </Wrapper>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/app/components/DocumentMeta.js b/app/components/DocumentMeta.js
index f1d33184..88afc0b8 100644
--- a/app/components/DocumentMeta.js
+++ b/app/components/DocumentMeta.js
@@ -18,10 +18,10 @@ function DocumentMeta({ views, isDraft, document }: Props) {
   return (
     <Meta document={document}>
       {totalViews && !isDraft ? (
-        <React.Fragment>
+        <>
           &nbsp;&middot; Viewed{" "}
           {totalViews === 1 ? "once" : `${totalViews} times`}
-        </React.Fragment>
+        </>
       ) : null}
     </Meta>
   );
diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index 47d9dde4..7b064b9a 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -161,7 +161,7 @@ class DropdownMenu extends React.Component<Props> {
           closeOnEsc
         >
           {({ closePortal, openPortal, isOpen, portal }) => (
-            <React.Fragment>
+            <>
               <Label
                 onMouseMove={hover ? this.clearCloseTimeout : undefined}
                 onMouseOut={
@@ -220,7 +220,7 @@ class DropdownMenu extends React.Component<Props> {
                   </Menu>
                 </Position>
               )}
-            </React.Fragment>
+            </>
           )}
         </PortalWithState>
       </div>
diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js
index c981b966..88e599a2 100644
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -26,12 +26,12 @@ const DropdownMenuItem = ({
       {...rest}
     >
       {selected !== undefined && (
-        <React.Fragment>
+        <>
           <CheckmarkIcon
             color={selected === false ? "transparent" : undefined}
           />
           &nbsp;
-        </React.Fragment>
+        </>
       )}
       {children}
     </MenuItem>
diff --git a/app/components/Editor.js b/app/components/Editor.js
index b9bd5c47..15f112c0 100644
--- a/app/components/Editor.js
+++ b/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} />
 ));
diff --git a/app/components/GroupListItem.js b/app/components/GroupListItem.js
index 7314a15e..7687265e 100644
--- a/app/components/GroupListItem.js
+++ b/app/components/GroupListItem.js
@@ -46,15 +46,15 @@ class GroupListItem extends React.Component<Props> {
     const overflow = memberCount - users.length;
 
     return (
-      <React.Fragment>
+      <>
         <ListItem
           title={
             <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
           }
           subtitle={
-            <React.Fragment>
+            <>
               {memberCount} member{memberCount === 1 ? "" : "s"}
-            </React.Fragment>
+            </>
           }
           actions={
             <Flex align="center">
@@ -79,7 +79,7 @@ class GroupListItem extends React.Component<Props> {
         >
           <GroupMembers group={group} onSubmit={this.handleMembersModalClose} />
         </Modal>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/components/HoverPreview.js b/app/components/HoverPreview.js
index 89ae0559..38c719ba 100644
--- a/app/components/HoverPreview.js
+++ b/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);
       }
 
diff --git a/app/components/InputRich.js b/app/components/InputRich.js
index 19e9bebe..22ae5ae2 100644
--- a/app/components/InputRich.js
+++ b/app/components/InputRich.js
@@ -48,7 +48,7 @@ class InputRich extends React.Component<Props> {
     const Editor = this.editorComponent;
 
     return (
-      <React.Fragment>
+      <>
         <LabelText>{label}</LabelText>
 
         <StyledOutline
@@ -67,7 +67,7 @@ class InputRich extends React.Component<Props> {
             "Loading…"
           )}
         </StyledOutline>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/components/Modal.js b/app/components/Modal.js
index 4b727fd8..c4fe93df 100644
--- a/app/components/Modal.js
+++ b/app/components/Modal.js
@@ -64,7 +64,7 @@ const Modal = ({
   if (!isOpen) return null;
 
   return (
-    <React.Fragment>
+    <>
       <GlobalStyles />
       <StyledModal
         contentLabel={title}
@@ -85,7 +85,7 @@ const Modal = ({
           <CloseIcon size={32} color="currentColor" />
         </Close>
       </StyledModal>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/app/components/NudeButton.js b/app/components/NudeButton.js
index 9c8f0b10..dd483bdb 100644
--- a/app/components/NudeButton.js
+++ b/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} />
 ));
diff --git a/app/components/PaginatedList.js b/app/components/PaginatedList.js
index b3ee31bf..c02abb76 100644
--- a/app/components/PaginatedList.js
+++ b/app/components/PaginatedList.js
@@ -106,10 +106,10 @@ class PaginatedList extends React.Component<Props> {
       (this.isLoaded || this.isInitiallyLoaded) && !showLoading && !showEmpty;
 
     return (
-      <React.Fragment>
+      <>
         {showEmpty && empty}
         {showList && (
-          <React.Fragment>
+          <>
             {heading}
             <ArrowKeyNavigation
               mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -120,10 +120,10 @@ class PaginatedList extends React.Component<Props> {
             {this.allowLoadMore && (
               <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
             )}
-          </React.Fragment>
+          </>
         )}
         {showLoading && <ListPlaceholder count={5} />}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/components/Sidebar/components/Collections.js b/app/components/Sidebar/components/Collections.js
index deba56db..1d3d6a9a 100644
--- a/app/components/Sidebar/components/Collections.js
+++ b/app/components/Sidebar/components/Collections.js
@@ -55,7 +55,7 @@ class Collections extends React.Component<Props> {
     const { collections, ui, documents } = this.props;
 
     const content = (
-      <React.Fragment>
+      <>
         {collections.orderedData.map((collection) => (
           <CollectionLink
             key={collection.id}
@@ -73,7 +73,7 @@ class Collections extends React.Component<Props> {
           label="New collection…"
           exact
         />
-      </React.Fragment>
+      </>
     );
 
     return (
diff --git a/app/components/Sidebar/components/Version.js b/app/components/Sidebar/components/Version.js
index 4bf565aa..f7af29f4 100644
--- a/app/components/Sidebar/components/Version.js
+++ b/app/components/Sidebar/components/Version.js
@@ -30,7 +30,7 @@ export default function Version() {
     <SidebarLink
       href="https://github.com/outline/outline/releases"
       label={
-        <React.Fragment>
+        <>
           v{version}
           <br />
           <LilBadge>
@@ -40,7 +40,7 @@ export default function Version() {
                   releasesBehind === 1 ? "" : "s"
                 } behind`}
           </LilBadge>
-        </React.Fragment>
+        </>
       }
     />
   );
diff --git a/app/components/Theme.js b/app/components/Theme.js
index 63fe1e9c..fa47ffd3 100644
--- a/app/components/Theme.js
+++ b/app/components/Theme.js
@@ -14,10 +14,10 @@ type Props = {
 function Theme({ children, ui }: Props) {
   return (
     <ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
-      <React.Fragment>
+      <>
         <GlobalStyles />
         {children}
-      </React.Fragment>
+      </>
     </ThemeProvider>
   );
 }
diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js
index 9125d2e4..ce86b0d0 100644
--- a/app/components/Tooltip.js
+++ b/app/components/Tooltip.js
@@ -24,9 +24,9 @@ class Tooltip extends React.Component<Props> {
 
     if (shortcut) {
       content = (
-        <React.Fragment>
+        <>
           {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
-        </React.Fragment>
+        </>
       );
     }
 
diff --git a/app/embeds/components/Frame.js b/app/embeds/components/Frame.js
index 202637a3..e80ccb52 100644
--- a/app/embeds/components/Frame.js
+++ b/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} />
 ));
diff --git a/app/index.js b/app/index.js
index e45e8c73..8c2d3ad1 100644
--- a/app/index.js
+++ b/app/index.js
@@ -21,23 +21,23 @@ 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
   );
 }
diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js
index 3e22a90b..5e4a5880 100644
--- a/app/menus/AccountMenu.js
+++ b/app/menus/AccountMenu.js
@@ -45,7 +45,7 @@ class AccountMenu extends React.Component<Props> {
     const { ui } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <Modal
           isOpen={this.keyboardShortcutsOpen}
           onRequestClose={this.handleCloseKeyboardShortcuts}
@@ -118,7 +118,7 @@ class AccountMenu extends React.Component<Props> {
             Log out
           </DropdownMenuItem>
         </DropdownMenu>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js
index 9c37344b..f872e5d9 100644
--- a/app/menus/CollectionMenu.js
+++ b/app/menus/CollectionMenu.js
@@ -93,7 +93,7 @@ class CollectionMenu extends React.Component<Props> {
     const can = policies.abilities(collection.id);
 
     return (
-      <React.Fragment>
+      <>
         <VisuallyHidden>
           <input
             type="file"
@@ -117,7 +117,7 @@ class CollectionMenu extends React.Component<Props> {
         </Modal>
         <DropdownMenu onOpen={onOpen} onClose={onClose} position={position}>
           {collection && (
-            <React.Fragment>
+            <>
               {can.update && (
                 <DropdownMenuItem onClick={this.onNewDocument}>
                   New document
@@ -142,13 +142,13 @@ class CollectionMenu extends React.Component<Props> {
                   Export…
                 </DropdownMenuItem>
               )}
-            </React.Fragment>
+            </>
           )}
           {can.delete && (
             <DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
           )}
         </DropdownMenu>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/menus/DocumentMenu.js b/app/menus/DocumentMenu.js
index 3b104752..fdab4a43 100644
--- a/app/menus/DocumentMenu.js
+++ b/app/menus/DocumentMenu.js
@@ -153,7 +153,7 @@ class DocumentMenu extends React.Component<Props> {
     const canViewHistory = can.read && !can.restore;
 
     return (
-      <React.Fragment>
+      <>
         <DropdownMenu
           className={className}
           position={position}
@@ -197,7 +197,7 @@ class DocumentMenu extends React.Component<Props> {
             </DropdownMenuItem>
           )}
           {showToggleEmbeds && (
-            <React.Fragment>
+            <>
               {document.embedsDisabled ? (
                 <DropdownMenuItem onClick={document.enableEmbeds}>
                   Enable embeds
@@ -207,7 +207,7 @@ class DocumentMenu extends React.Component<Props> {
                   Disable embeds
                 </DropdownMenuItem>
               )}
-            </React.Fragment>
+            </>
           )}
           {!can.restore && <hr />}
 
@@ -247,11 +247,11 @@ class DocumentMenu extends React.Component<Props> {
           )}
           <hr />
           {canViewHistory && (
-            <React.Fragment>
+            <>
               <DropdownMenuItem onClick={this.handleDocumentHistory}>
                 History
               </DropdownMenuItem>
-            </React.Fragment>
+            </>
           )}
           {can.download && (
             <DropdownMenuItem onClick={this.handleExport}>
@@ -282,7 +282,7 @@ class DocumentMenu extends React.Component<Props> {
             onSubmit={this.handleCloseTemplateModal}
           />
         </Modal>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/menus/GroupMenu.js b/app/menus/GroupMenu.js
index 233df881..f37d56dc 100644
--- a/app/menus/GroupMenu.js
+++ b/app/menus/GroupMenu.js
@@ -50,7 +50,7 @@ class GroupMenu extends React.Component<Props> {
     const can = policies.abilities(group.id);
 
     return (
-      <React.Fragment>
+      <>
         <Modal
           title="Edit group"
           onRequestClose={this.handleEditModalClose}
@@ -75,7 +75,7 @@ class GroupMenu extends React.Component<Props> {
 
         <DropdownMenu onOpen={onOpen} onClose={onClose}>
           {group && (
-            <React.Fragment>
+            <>
               <DropdownMenuItem onClick={this.props.onMembers}>
                 Members…
               </DropdownMenuItem>
@@ -91,10 +91,10 @@ class GroupMenu extends React.Component<Props> {
                   Delete…
                 </DropdownMenuItem>
               )}
-            </React.Fragment>
+            </>
           )}
         </DropdownMenu>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/models/BaseModel.js b/app/models/BaseModel.js
index aad634fe..7ff62515 100644
--- a/app/models/BaseModel.js
+++ b/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 };
   };
 }
diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js
index 90553047..256bffdd 100644
--- a/app/scenes/Collection.js
+++ b/app/scenes/Collection.js
@@ -121,7 +121,7 @@ class CollectionScene extends React.Component<Props> {
     return (
       <Actions align="center" justify="flex-end">
         {can.update && (
-          <React.Fragment>
+          <>
             <Action>
               <InputSearch
                 placeholder="Search in collection…"
@@ -141,7 +141,7 @@ class CollectionScene extends React.Component<Props> {
               </Tooltip>
             </Action>
             <Separator />
-          </React.Fragment>
+          </>
         )}
         <Action>
           <CollectionMenu collection={this.collection} />
@@ -165,7 +165,7 @@ class CollectionScene extends React.Component<Props> {
     return (
       <CenteredContent>
         {collection ? (
-          <React.Fragment>
+          <>
             <PageTitle title={collection.name} />
             {collection.isEmpty ? (
               <Centered column>
@@ -211,7 +211,7 @@ class CollectionScene extends React.Component<Props> {
                 </Modal>
               </Centered>
             ) : (
-              <React.Fragment>
+              <>
                 <Heading>
                   <CollectionIcon collection={collection} size={40} expanded />{" "}
                   {collection.name}
@@ -228,12 +228,12 @@ class CollectionScene extends React.Component<Props> {
                 )}
 
                 {hasPinnedDocuments && (
-                  <React.Fragment>
+                  <>
                     <Subheading>
                       <TinyPinIcon size={18} /> Pinned
                     </Subheading>
                     <DocumentList documents={pinnedDocuments} showPin />
-                  </React.Fragment>
+                  </>
                 )}
 
                 <Tabs>
@@ -296,18 +296,18 @@ class CollectionScene extends React.Component<Props> {
                     />
                   </Route>
                 </Switch>
-              </React.Fragment>
+              </>
             )}
 
             {this.renderActions()}
-          </React.Fragment>
+          </>
         ) : (
-          <React.Fragment>
+          <>
             <Heading>
               <Mask height={35} />
             </Heading>
             <ListPlaceholder count={5} />
-          </React.Fragment>
+          </>
         )}
       </CenteredContent>
     );
diff --git a/app/scenes/CollectionMembers/CollectionMembers.js b/app/scenes/CollectionMembers/CollectionMembers.js
index 1af82d49..3a0a991a 100644
--- a/app/scenes/CollectionMembers/CollectionMembers.js
+++ b/app/scenes/CollectionMembers/CollectionMembers.js
@@ -125,7 +125,7 @@ class CollectionMembers extends React.Component<Props> {
     return (
       <Flex column>
         {collection.private ? (
-          <React.Fragment>
+          <>
             <HelpText>
               Choose which groups and team members have access to view and edit
               documents in the private <strong>{collection.name}</strong>{" "}
@@ -146,7 +146,7 @@ class CollectionMembers extends React.Component<Props> {
                 Add groups
               </Button>
             </span>
-          </React.Fragment>
+          </>
         ) : (
           <HelpText>
             The <strong>{collection.name}</strong> collection is accessible by
@@ -195,7 +195,7 @@ class CollectionMembers extends React.Component<Props> {
           </GroupsWrap>
         )}
         {collection.private ? (
-          <React.Fragment>
+          <>
             <span>
               <Button
                 type="button"
@@ -208,7 +208,7 @@ class CollectionMembers extends React.Component<Props> {
             </span>
 
             <Subheading>Individual Members</Subheading>
-          </React.Fragment>
+          </>
         ) : (
           <Subheading>Members</Subheading>
         )}
diff --git a/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js b/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
index a533c405..404b6c08 100644
--- a/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
+++ b/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
@@ -30,7 +30,7 @@ const MemberListItem = ({
       onRemove={onRemove}
       onUpdate={onUpdate}
       renderActions={({ openMembersModal }) => (
-        <React.Fragment>
+        <>
           <Select
             label="Permissions"
             options={PERMISSIONS}
@@ -51,7 +51,7 @@ const MemberListItem = ({
               <DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
             </DropdownMenu>
           </ButtonWrap>
-        </React.Fragment>
+        </>
       )}
     />
   );
diff --git a/app/scenes/CollectionMembers/components/MemberListItem.js b/app/scenes/CollectionMembers/components/MemberListItem.js
index 7677e506..dd9cd4f5 100644
--- a/app/scenes/CollectionMembers/components/MemberListItem.js
+++ b/app/scenes/CollectionMembers/components/MemberListItem.js
@@ -37,17 +37,17 @@ const MemberListItem = ({
     <ListItem
       title={user.name}
       subtitle={
-        <React.Fragment>
+        <>
           {user.lastActiveAt ? (
-            <React.Fragment>
+            <>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </React.Fragment>
+            </>
           ) : (
             "Never signed in"
           )}
           {!user.lastActiveAt && <Badge>Invited</Badge>}
           {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
-        </React.Fragment>
+        </>
       }
       image={<Avatar src={user.avatarUrl} size={40} />}
       actions={
diff --git a/app/scenes/CollectionMembers/components/UserListItem.js b/app/scenes/CollectionMembers/components/UserListItem.js
index df313cac..94d0d873 100644
--- a/app/scenes/CollectionMembers/components/UserListItem.js
+++ b/app/scenes/CollectionMembers/components/UserListItem.js
@@ -20,17 +20,17 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
       title={user.name}
       image={<Avatar src={user.avatarUrl} size={40} />}
       subtitle={
-        <React.Fragment>
+        <>
           {user.lastActiveAt ? (
-            <React.Fragment>
+            <>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </React.Fragment>
+            </>
           ) : (
             "Never signed in"
           )}
           {!user.lastActiveAt && <Badge>Invited</Badge>}
           {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
-        </React.Fragment>
+        </>
       }
       actions={
         canEdit ? (
diff --git a/app/scenes/Document/components/DataLoader.js b/app/scenes/Document/components/DataLoader.js
index af91b3d1..68ae196f 100644
--- a/app/scenes/Document/components/DataLoader.js
+++ b/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>
+        </>
       );
     }
 
diff --git a/app/scenes/Document/components/Document.js b/app/scenes/Document/components/Document.js
index 364537ac..d344a1b8 100644
--- a/app/scenes/Document/components/Document.js
+++ b/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>
diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js
index d21baddb..35d959f2 100644
--- a/app/scenes/Document/components/Editor.js
+++ b/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}
diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js
index d51a0e9d..f1898e3c 100644
--- a/app/scenes/Document/components/Header.js
+++ b/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>
diff --git a/app/scenes/Document/components/KeyboardShortcutsButton.js b/app/scenes/Document/components/KeyboardShortcutsButton.js
index 2b5a1c8e..a55af958 100644
--- a/app/scenes/Document/components/KeyboardShortcutsButton.js
+++ b/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>
+      </>
     );
   }
 }
diff --git a/app/scenes/Document/components/Loading.js b/app/scenes/Document/components/Loading.js
index 2b000562..a98ebfc2 100644
--- a/app/scenes/Document/components/Loading.js
+++ b/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) {
diff --git a/app/scenes/DocumentShare.js b/app/scenes/DocumentShare.js
index 820adea9..1e911bb7 100644
--- a/app/scenes/DocumentShare.js
+++ b/app/scenes/DocumentShare.js
@@ -80,7 +80,7 @@ class DocumentShare extends React.Component<Props> {
           .
         </HelpText>
         {canPublish && (
-          <React.Fragment>
+          <>
             <Switch
               id="published"
               label="Publish to internet"
@@ -96,7 +96,7 @@ class DocumentShare extends React.Component<Props> {
                   : "Only team members with access can view this document"}
               </PrivacyText>
             </Privacy>
-          </React.Fragment>
+          </>
         )}
         <br />
         <Input
diff --git a/app/scenes/GroupMembers/GroupMembers.js b/app/scenes/GroupMembers/GroupMembers.js
index f51b4069..4838f440 100644
--- a/app/scenes/GroupMembers/GroupMembers.js
+++ b/app/scenes/GroupMembers/GroupMembers.js
@@ -62,7 +62,7 @@ class GroupMembers extends React.Component<Props> {
     return (
       <Flex column>
         {can.update ? (
-          <React.Fragment>
+          <>
             <HelpText>
               Add and remove team members in the <strong>{group.name}</strong>{" "}
               group. Adding people to the group will give them access to any
@@ -78,7 +78,7 @@ class GroupMembers extends React.Component<Props> {
                 Add people…
               </Button>
             </span>
-          </React.Fragment>
+          </>
         ) : (
           <HelpText>
             Listing team members in the <strong>{group.name}</strong> group.
diff --git a/app/scenes/GroupMembers/components/GroupMemberListItem.js b/app/scenes/GroupMembers/components/GroupMemberListItem.js
index 72e1937d..f5fc97c1 100644
--- a/app/scenes/GroupMembers/components/GroupMemberListItem.js
+++ b/app/scenes/GroupMembers/components/GroupMemberListItem.js
@@ -27,17 +27,17 @@ const GroupMemberListItem = ({
     <ListItem
       title={user.name}
       subtitle={
-        <React.Fragment>
+        <>
           {user.lastActiveAt ? (
-            <React.Fragment>
+            <>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </React.Fragment>
+            </>
           ) : (
             "Never signed in"
           )}
           {!user.lastActiveAt && <Badge>Invited</Badge>}
           {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
-        </React.Fragment>
+        </>
       }
       image={<Avatar src={user.avatarUrl} size={40} />}
       actions={
diff --git a/app/scenes/GroupMembers/components/UserListItem.js b/app/scenes/GroupMembers/components/UserListItem.js
index 7bc94060..321368c2 100644
--- a/app/scenes/GroupMembers/components/UserListItem.js
+++ b/app/scenes/GroupMembers/components/UserListItem.js
@@ -20,17 +20,17 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
       title={user.name}
       image={<Avatar src={user.avatarUrl} size={32} />}
       subtitle={
-        <React.Fragment>
+        <>
           {user.lastActiveAt ? (
-            <React.Fragment>
+            <>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </React.Fragment>
+            </>
           ) : (
             "Never signed in"
           )}
           {!user.lastActiveAt && <Badge>Invited</Badge>}
           {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
-        </React.Fragment>
+        </>
       }
       actions={
         canEdit ? (
diff --git a/app/scenes/GroupNew.js b/app/scenes/GroupNew.js
index 95299426..20763196 100644
--- a/app/scenes/GroupNew.js
+++ b/app/scenes/GroupNew.js
@@ -51,7 +51,7 @@ class GroupNew extends React.Component<Props> {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
             Groups are for organizing your team. They work best when centered
@@ -82,7 +82,7 @@ class GroupNew extends React.Component<Props> {
         >
           <GroupMembers group={this.group} />
         </Modal>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/app/scenes/Invite.js b/app/scenes/Invite.js
index ac1a54d5..dda540b1 100644
--- a/app/scenes/Invite.js
+++ b/app/scenes/Invite.js
@@ -111,10 +111,10 @@ class Invite extends React.Component<Props> {
             Invite team members to join your knowledge base. They will need to
             sign in with {team.signinMethods}.{" "}
             {can.update && (
-              <React.Fragment>
+              <>
                 As an admin you can also{" "}
                 <Link to="/settings/security">enable email sign-in</Link>.
-              </React.Fragment>
+              </>
             )}
           </HelpText>
         )}
diff --git a/app/scenes/Login/Notices.js b/app/scenes/Login/Notices.js
index 504deb5a..bef63de2 100644
--- a/app/scenes/Login/Notices.js
+++ b/app/scenes/Login/Notices.js
@@ -8,7 +8,7 @@ type Props = {
 
 export default function Notices({ notice }: Props) {
   return (
-    <React.Fragment>
+    <>
       {notice === "google-hd" && (
         <NoticeAlert>
           Sorry, Google sign in cannot be used with a personal email. Please try
@@ -51,6 +51,6 @@ export default function Notices({ notice }: Props) {
           please contact a team admin.
         </NoticeAlert>
       )}
-    </React.Fragment>
+    </>
   );
 }
diff --git a/app/scenes/Login/Service.js b/app/scenes/Login/Service.js
index 8001a8d2..633ffcb1 100644
--- a/app/scenes/Login/Service.js
+++ b/app/scenes/Login/Service.js
@@ -72,7 +72,7 @@ class Service extends React.Component<Props, State> {
             onSubmit={this.handleSubmitEmail}
           >
             {this.state.showEmailSignin ? (
-              <React.Fragment>
+              <>
                 <InputLarge
                   type="email"
                   name="email"
@@ -87,7 +87,7 @@ class Service extends React.Component<Props, State> {
                 <ButtonLarge type="submit" disabled={this.state.isSubmitting}>
                   Sign In →
                 </ButtonLarge>
-              </React.Fragment>
+              </>
             ) : (
               <ButtonLarge type="submit" icon={<EmailIcon />} fullwidth>
                 Continue with Email
diff --git a/app/scenes/Login/index.js b/app/scenes/Login/index.js
index 3a5a498b..9769071d 100644
--- a/app/scenes/Login/index.js
+++ b/app/scenes/Login/index.js
@@ -125,12 +125,12 @@ class Login extends React.Component<Props, State> {
                 {...defaultService}
               />
               {hasMultipleServices && (
-                <React.Fragment>
+                <>
                   <Note>
                     You signed in with {defaultService.name} last time.
                   </Note>
                   <Or />
-                </React.Fragment>
+                </>
               )}
             </React.Fragment>
           )}
diff --git a/app/scenes/Search/Search.js b/app/scenes/Search/Search.js
index 003772e0..d10fe357 100644
--- a/app/scenes/Search/Search.js
+++ b/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 || "");
diff --git a/app/scenes/Settings/Details.js b/app/scenes/Settings/Details.js
index 65122a3a..a7cf92f6 100644
--- a/app/scenes/Settings/Details.js
+++ b/app/scenes/Settings/Details.js
@@ -117,7 +117,7 @@ class Details extends React.Component<Props> {
             short
           />
           {env.SUBDOMAINS_ENABLED && (
-            <React.Fragment>
+            <>
               <Input
                 label="Subdomain"
                 name="subdomain"
@@ -134,7 +134,7 @@ class Details extends React.Component<Props> {
                   <strong>{this.subdomain}.getoutline.com</strong>
                 </HelpText>
               )}
-            </React.Fragment>
+            </>
           )}
           <Button type="submit" disabled={isSaving || !this.isValid}>
             {isSaving ? "Saving…" : "Save"}
diff --git a/app/scenes/Settings/Events.js b/app/scenes/Settings/Events.js
index 3599e685..1e1d3b4a 100644
--- a/app/scenes/Settings/Events.js
+++ b/app/scenes/Settings/Events.js
@@ -84,14 +84,14 @@ class Events extends React.Component<Props> {
           {showLoading ? (
             <ListPlaceholder count={5} />
           ) : (
-            <React.Fragment>
+            <>
               {events.orderedData.map((event) => (
                 <EventListItem event={event} />
               ))}
               {this.allowLoadMore && (
                 <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
               )}
-            </React.Fragment>
+            </>
           )}
         </List>
       </CenteredContent>
diff --git a/app/scenes/Settings/People.js b/app/scenes/Settings/People.js
index ba2f534a..93936714 100644
--- a/app/scenes/Settings/People.js
+++ b/app/scenes/Settings/People.js
@@ -104,12 +104,12 @@ class People extends React.Component<Props> {
           </Tab>
 
           {can.invite && (
-            <React.Fragment>
+            <>
               <Separator />
               <Tab to="/settings/people/invited" exact>
                 Invited
               </Tab>
-            </React.Fragment>
+            </>
           )}
         </Tabs>
         <PaginatedList
diff --git a/app/scenes/Settings/components/EventListItem.js b/app/scenes/Settings/components/EventListItem.js
index 106e07a7..cf2edd0a 100644
--- a/app/scenes/Settings/components/EventListItem.js
+++ b/app/scenes/Settings/components/EventListItem.js
@@ -16,121 +16,119 @@ const description = (event) => {
   switch (event.name) {
     case "api_keys.create":
       return (
-        <React.Fragment>
+        <>
           Created the API token <strong>{event.data.name}</strong>
-        </React.Fragment>
+        </>
       );
     case "api_keys.delete":
       return (
-        <React.Fragment>
+        <>
           Revoked the API token <strong>{event.data.name}</strong>
-        </React.Fragment>
+        </>
       );
     case "teams.create":
       return "Created the team";
     case "shares.create":
     case "shares.revoke":
       return (
-        <React.Fragment>
+        <>
           {capitalize(event.verbPastTense)} a{" "}
           <Link to={`/share/${event.modelId || ""}`}>share link</Link> to the{" "}
           <Link to={`/doc/${event.documentId}`}>{event.data.name}</Link>{" "}
           document
-        </React.Fragment>
+        </>
       );
     case "shares.update":
       return (
-        <React.Fragment>
+        <>
           {event.data.published ? (
-            <React.Fragment>
+            <>
               Published a document{" "}
               <Link to={`/share/${event.modelId || ""}`}>share link</Link>
-            </React.Fragment>
+            </>
           ) : (
-            <React.Fragment>
+            <>
               Unpublished a document{" "}
               <Link to={`/share/${event.modelId || ""}`}>share link</Link>
-            </React.Fragment>
+            </>
           )}
-        </React.Fragment>
+        </>
       );
     case "users.create":
-      return (
-        <React.Fragment>{event.data.name} created an account</React.Fragment>
-      );
+      return <>{event.data.name} created an account</>;
     case "users.invite":
       return (
-        <React.Fragment>
+        <>
           {capitalize(event.verbPastTense)} {event.data.name} (
           <a href={`mailto:${event.data.email || ""}`}>
             {event.data.email || ""}
           </a>
           )
-        </React.Fragment>
+        </>
       );
     case "users.suspend":
       return (
-        <React.Fragment>
+        <>
           Suspended <strong>{event.data.name}’s</strong> account
-        </React.Fragment>
+        </>
       );
     case "users.activate":
       return (
-        <React.Fragment>
+        <>
           Unsuspended <strong>{event.data.name}’s</strong> account
-        </React.Fragment>
+        </>
       );
     case "users.promote":
       return (
-        <React.Fragment>
+        <>
           Made <strong>{event.data.name}</strong> an admin
-        </React.Fragment>
+        </>
       );
     case "users.demote":
       return (
-        <React.Fragment>
+        <>
           Made <strong>{event.data.name}</strong> a member
-        </React.Fragment>
+        </>
       );
     case "users.delete":
       return "Deleted their account";
     case "groups.create":
       return (
-        <React.Fragment>
+        <>
           Created the group <strong>{event.data.name}</strong>
-        </React.Fragment>
+        </>
       );
     case "groups.update":
       return (
-        <React.Fragment>
+        <>
           Update the group <strong>{event.data.name}</strong>
-        </React.Fragment>
+        </>
       );
     case "groups.delete":
       return (
-        <React.Fragment>
+        <>
           Deleted the group <strong>{event.data.name}</strong>
-        </React.Fragment>
+        </>
       );
     case "collections.add_user":
     case "collections.add_group":
       return (
-        <React.Fragment>
+        <>
           Granted <strong>{event.data.name}</strong> access to a{" "}
           <Link to={`/collections/${event.collectionId || ""}`}>
             collection
           </Link>
-        </React.Fragment>
+        </>
       );
     case "collections.remove_user":
     case "collections.remove_group":
       return (
-        <React.Fragment>
+        <>
           Revoked <strong>{event.data.name}</strong> access to a{" "}
           <Link to={`/collections/${event.collectionId || ""}`}>
             collection
           </Link>
-        </React.Fragment>
+        </>
       );
     default:
   }
@@ -138,60 +136,60 @@ const description = (event) => {
   if (event.documentId) {
     if (event.name === "documents.delete") {
       return (
-        <React.Fragment>
+        <>
           Deleted the <strong>{event.data.title}</strong> document
-        </React.Fragment>
+        </>
       );
     }
     if (event.name === "documents.create") {
       return (
-        <React.Fragment>
+        <>
           {capitalize(event.verbPastTense)} the{" "}
           <Link to={`/doc/${event.documentId}`}>
             {event.data.title || "Untitled"}
           </Link>{" "}
           document{" "}
           {event.data.templateId && (
-            <React.Fragment>
+            <>
               from a <Link to={`/doc/${event.data.templateId}`}>template</Link>
-            </React.Fragment>
+            </>
           )}
-        </React.Fragment>
+        </>
       );
     }
     return (
-      <React.Fragment>
+      <>
         {capitalize(event.verbPastTense)} the{" "}
         <Link to={`/doc/${event.documentId}`}>
           {event.data.title || "Untitled"}
         </Link>{" "}
         document
-      </React.Fragment>
+      </>
     );
   }
   if (event.collectionId) {
     if (event.name === "collections.delete") {
       return (
-        <React.Fragment>
+        <>
           Deleted the <strong>{event.data.name}</strong> collection
-        </React.Fragment>
+        </>
       );
     }
     return (
-      <React.Fragment>
+      <>
         {capitalize(event.verbPastTense)} the{" "}
         <Link to={`/collections/${event.collectionId || ""}`}>
           {event.data.name}
         </Link>{" "}
         collection
-      </React.Fragment>
+      </>
     );
   }
   if (event.userId) {
     return (
-      <React.Fragment>
+      <>
         {capitalize(event.verbPastTense)} the user {event.data.name}
-      </React.Fragment>
+      </>
     );
   }
   return "";
@@ -204,10 +202,10 @@ const EventListItem = ({ event }: Props) => {
       title={event.actor.name}
       image={<Avatar src={event.actor.avatarUrl} size={32} />}
       subtitle={
-        <React.Fragment>
+        <>
           {description(event)} <Time dateTime={event.createdAt} /> ago &middot;{" "}
           <strong>{event.name}</strong>
-        </React.Fragment>
+        </>
       }
       actions={
         event.actorIpAddress ? (
diff --git a/app/scenes/Settings/components/NotificationListItem.js b/app/scenes/Settings/components/NotificationListItem.js
index c654e9d6..970ecdc3 100644
--- a/app/scenes/Settings/components/NotificationListItem.js
+++ b/app/scenes/Settings/components/NotificationListItem.js
@@ -16,7 +16,6 @@ const NotificationListItem = ({
   setting,
   title,
   event,
-  enabled,
   onChange,
   disabled,
   description,
diff --git a/app/scenes/Settings/components/ShareListItem.js b/app/scenes/Settings/components/ShareListItem.js
index cea8f285..78cb7b5a 100644
--- a/app/scenes/Settings/components/ShareListItem.js
+++ b/app/scenes/Settings/components/ShareListItem.js
@@ -15,10 +15,10 @@ const ShareListItem = ({ share }: Props) => {
       key={share.id}
       title={share.documentTitle}
       subtitle={
-        <React.Fragment>
+        <>
           Shared <Time dateTime={share.createdAt} /> ago by{" "}
           {share.createdBy.name}
-        </React.Fragment>
+        </>
       }
       actions={<ShareMenu share={share} />}
     />
diff --git a/app/scenes/Settings/components/TokenListItem.js b/app/scenes/Settings/components/TokenListItem.js
index 148c3773..5f0a9660 100644
--- a/app/scenes/Settings/components/TokenListItem.js
+++ b/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) => {
diff --git a/app/scenes/Settings/components/UserListItem.js b/app/scenes/Settings/components/UserListItem.js
index ead3af57..765dfba5 100644
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@@ -35,7 +35,7 @@ class UserListItem extends React.Component<Props> {
       <ListItem
         title={<Title onClick={this.handleOpenProfile}>{user.name}</Title>}
         image={
-          <React.Fragment>
+          <>
             <Avatar
               src={user.avatarUrl}
               size={40}
@@ -46,21 +46,21 @@ class UserListItem extends React.Component<Props> {
               isOpen={this.profileOpen}
               onRequestClose={this.handleCloseProfile}
             />
-          </React.Fragment>
+          </>
         }
         subtitle={
-          <React.Fragment>
+          <>
             {user.email ? `${user.email} · ` : undefined}
             {user.lastActiveAt ? (
-              <React.Fragment>
+              <>
                 Active <Time dateTime={user.lastActiveAt} /> ago
-              </React.Fragment>
+              </>
             ) : (
               "Invited"
             )}
             {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
             {user.isSuspended && <Badge>Suspended</Badge>}
-          </React.Fragment>
+          </>
         }
         actions={showMenu ? <UserMenu user={user} /> : undefined}
       />
diff --git a/app/types/index.js b/app/types/index.js
index 4fa9c1af..8d8b0444 100644
--- a/app/types/index.js
+++ b/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,