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 type { Location } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import usePrevious from "hooks/usePrevious";
 
-type Props = {
-  location: Location,
+type Props = {|
   children: React.Node,
-};
+|};
 
-class ScrollToTop extends React.Component<Props> {
-  componentDidUpdate(prevProps) {
-    if (this.props.location.pathname === prevProps.location.pathname) return;
+export default function ScrollToTop({ children }: Props) {
+  const location = useLocation();
+  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\/?$/) ||
-      prevProps.location.pathname.match(/\/edit\/?$/)
+      location.pathname.match(/\/edit\/?$/) ||
+      previousLocationPathname?.match(/\/edit\/?$/)
     )
       return;
 
     window.scrollTo(0, 0);
-  }
+  }, [location.pathname, previousLocationPathname]);
 
-  render() {
-    return this.props.children;
-  }
+  return children;
 }
-
-export default withRouter(ScrollToTop);