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,22 +10,22 @@ 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);
+
-  }
+  React.useEffect(() => {
+    documents.fetchBacklinks(document.id);
+  }, [documents, document.id]);
 
-  render() {
-    const { documents, collections, document } = this.props;
   const backlinks = documents.getBacklinedDocuments(document.id);
   const collection = collections.get(document.collectionId);
   const children = collection
@@ -34,8 +34,7 @@ class References extends React.Component<Props> {
 
   const showBacklinks = !!backlinks.length;
   const showNestedDocuments = !!children.length;
-    const isBacklinksTab =
+  const isBacklinksTab = location.hash === "#backlinks" || !showNestedDocuments;
-      this.props.location.hash === "#backlinks" || !showNestedDocuments;
 
   return (
     (showBacklinks || showNestedDocuments) && (
@@ -78,7 +77,6 @@ class References extends React.Component<Props> {
       </Fade>
     )
   );
-  }
 }
 
-export default withRouter(inject("documents", "collections")(References));
+export default observer(References);