chore: Refactor two components away from withRouter

app/components/ScrollToTop.js

@@ -1,31 +1,29 @@
 // @flow
 // based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
 import * as React from "react";
-import { withRouter } from "react-router-dom";
+import { useLocation } from "react-router-dom";
-import type { Location } from "react-router-dom";
+import usePrevious from "hooks/usePrevious";
 
-type Props = {
+type Props = {|
-  location: Location,
   children: React.Node,
-};
+|};
 
-class ScrollToTop extends React.Component<Props> {
+export default function ScrollToTop({ children }: Props) {
-  componentDidUpdate(prevProps) {
+  const location = useLocation();
-    if (this.props.location.pathname === prevProps.location.pathname) return;
+  const previousLocationPathname = usePrevious(location.pathname);
+
+  React.useEffect(() => {
+    if (location.pathname === previousLocationPathname) return;
 
     // exception for when entering or exiting document edit, scroll position should not reset
     if (
-      this.props.location.pathname.match(/\/edit\/?$/) ||
+      location.pathname.match(/\/edit\/?$/) ||
-      prevProps.location.pathname.match(/\/edit\/?$/)
+      previousLocationPathname?.match(/\/edit\/?$/)
     )
       return;
 
     window.scrollTo(0, 0);
-  }
+  }, [location.pathname, previousLocationPathname]);
 
-  render() {
+  return children;
-    return this.props.children;
-  }
 }
-
-export default withRouter(ScrollToTop);

app/scenes/Document/components/References.js

@@ -1,8 +1,8 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans } from "react-i18next";
-import { withRouter, type Location } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import CollectionsStore from "stores/CollectionsStore";
 import DocumentsStore from "stores/DocumentsStore";
 import Document from "models/Document";
@@ -10,75 +10,73 @@ import Fade from "components/Fade";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import ReferenceListItem from "./ReferenceListItem";
+import useStores from "hooks/useStores";
 
 type Props = {
   document: Document,
   documents: DocumentsStore,
   collections: CollectionsStore,
-  location: Location,
 };
 
-@observer
+function References({ document }: Props) {
-class References extends React.Component<Props> {
+  const { collections, documents } = useStores();
-  componentDidMount() {
+  const location = useLocation();
-    this.props.documents.fetchBacklinks(this.props.document.id);
-  }
 
-  render() {
+  React.useEffect(() => {
-    const { documents, collections, document } = this.props;
+    documents.fetchBacklinks(document.id);
-    const backlinks = documents.getBacklinedDocuments(document.id);
+  }, [documents, document.id]);
-    const collection = collections.get(document.collectionId);
-    const children = collection
-      ? collection.getDocumentChildren(document.id)
-      : [];
 
-    const showBacklinks = !!backlinks.length;
+  const backlinks = documents.getBacklinedDocuments(document.id);
-    const showNestedDocuments = !!children.length;
+  const collection = collections.get(document.collectionId);
-    const isBacklinksTab =
+  const children = collection
-      this.props.location.hash === "#backlinks" || !showNestedDocuments;
+    ? collection.getDocumentChildren(document.id)
+    : [];
 
-    return (
+  const showBacklinks = !!backlinks.length;
-      (showBacklinks || showNestedDocuments) && (
+  const showNestedDocuments = !!children.length;
-        <Fade>
+  const isBacklinksTab = location.hash === "#backlinks" || !showNestedDocuments;
-          <Tabs>
+
-            {showNestedDocuments && (
+  return (
-              <Tab to="#children" isActive={() => !isBacklinksTab}>
+    (showBacklinks || showNestedDocuments) && (
-                <Trans>Nested documents</Trans>
+      <Fade>
-              </Tab>
+        <Tabs>
-            )}
+          {showNestedDocuments && (
-            {showBacklinks && (
+            <Tab to="#children" isActive={() => !isBacklinksTab}>
-              <Tab to="#backlinks" isActive={() => isBacklinksTab}>
+              <Trans>Nested documents</Trans>
-                <Trans>Referenced by</Trans>
+            </Tab>
-              </Tab>
+          )}
-            )}
+          {showBacklinks && (
-          </Tabs>
+            <Tab to="#backlinks" isActive={() => isBacklinksTab}>
-          {isBacklinksTab
+              <Trans>Referenced by</Trans>
-            ? backlinks.map((backlinkedDocument) => (
+            </Tab>
+          )}
+        </Tabs>
+        {isBacklinksTab
+          ? backlinks.map((backlinkedDocument) => (
+              <ReferenceListItem
+                anchor={document.urlId}
+                key={backlinkedDocument.id}
+                document={backlinkedDocument}
+                showCollection={
+                  backlinkedDocument.collectionId !== document.collectionId
+                }
+              />
+            ))
+          : children.map((node) => {
+              // If we have the document in the store already then use it to get the extra
+              // contextual info, otherwise the collection node will do (only has title and id)
+              const document = documents.get(node.id);
+              return (
                 <ReferenceListItem
-                  anchor={document.urlId}
+                  key={node.id}
-                  key={backlinkedDocument.id}
+                  document={document || node}
-                  document={backlinkedDocument}
+                  showCollection={false}
-                  showCollection={
-                    backlinkedDocument.collectionId !== document.collectionId
-                  }
                 />
-              ))
+              );
-            : children.map((node) => {
+            })}
-                // If we have the document in the store already then use it to get the extra
+      </Fade>
-                // contextual info, otherwise the collection node will do (only has title and id)
+    )
-                const document = documents.get(node.id);
+  );
-                return (
-                  <ReferenceListItem
-                    key={node.id}
-                    document={document || node}
-                    showCollection={false}
-                  />
-                );
-              })}
-        </Fade>
-      )
-    );
-  }
 }
 
-export default withRouter(inject("documents", "collections")(References));
+export default observer(References);