Merge branch 'master' into all-contributors/add-mbrodt

.changeset/funny-mayflies-juggle.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Converted ScrolToTop component to a custom hook.

docs/guides/deployment.md

@@ -1,17 +1,13 @@
 <!--[meta]
 section: guides
-title: Deployment recommendations
+title: Docker
 subSection: deployment
 [meta]-->
 
-# Deployment recommendations
-
-## General
+# Docker
 
 Keystone files need to be built with `keystone build` before running in production mode.
 
-## Docker
-
 Keystone can be easily built as a Docker container image, suitable for deploying on Kubernetes or other environments.
 
 Recommended guides:

packages/app-admin-ui/client/components/ScrollToTop.js

@@ -1,14 +1,10 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-const ScrollToTop = ({ children }) => {
+export const useScrollToTop = () => {
   const location = useLocation();
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [location]);
-
-  return children;
 };
-
-export default ScrollToTop;

packages/app-admin-ui/client/index.js

@@ -9,7 +9,7 @@ import { globalStyles } from '@arch-ui/theme';
 
 import { initApolloClient } from './apolloClient';
 import Nav from './components/Nav';
-import ScrollToTop from './components/ScrollToTop';
+import { useScrollToTop } from './components/ScrollToTop';
 import ConnectivityListener from './components/ConnectivityListener';
 import KeyboardShortcuts from './components/KeyboardShortcuts';
 import PageLoading from './components/PageLoading';
@@ -61,6 +61,8 @@ const ListPageWrapper = () => {
 const MainPageWrapper = () => {
   const { adminPath, pages } = useAdminMeta();
 
+  useScrollToTop();
+
   const customRoutes = [
     ...pages
       .filter(({ path }) => typeof path === 'string')
@@ -71,19 +73,17 @@ const MainPageWrapper = () => {
   ];
 
   return (
-    <ScrollToTop>
-      <Nav>
-        <Suspense fallback={<PageLoading />}>
-          <Switch>
-            {customRoutes.map(({ path, children }) => (
-              <Route exact key={path} path={path} children={children} />
-            ))}
-            <Route exact path={adminPath} children={<HomePageWrapper />} />
-            <Route path={`${adminPath}/:listKey`} children={<ListPageWrapper />} />
-          </Switch>
-        </Suspense>
-      </Nav>
-    </ScrollToTop>
+    <Nav>
+      <Suspense fallback={<PageLoading />}>
+        <Switch>
+          {customRoutes.map(({ path, children }) => (
+            <Route exact key={path} path={path} children={children} />
+          ))}
+          <Route exact path={adminPath} children={<HomePageWrapper />} />
+          <Route path={`${adminPath}/:listKey`} children={<ListPageWrapper />} />
+        </Switch>
+      </Suspense>
+    </Nav>
   );
 };