Admin UI: moved no-lists-found display to a better location, fixed a …

…warning (#2982)
keystonejs · May 18, 2020 · da8ca88 · da8ca88
1 parent fdfb014
commit da8ca88
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 27 deletions.
diff --git a/.changeset/hungry-fans-exist.md b/.changeset/hungry-fans-exist.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Fixed an issue with the no-lists-defined display.
diff --git a/packages/app-admin-ui/client/components/PageError.js b/packages/app-admin-ui/client/components/PageError.js
@@ -5,7 +5,7 @@ import { StopIcon } from '@arch-ui/icons';
 import { colors } from '@arch-ui/theme';
 import { Container } from '@arch-ui/layout';
 
-export default function PageError({ children, Icon = StopIcon, ...props }) {
+export default function PageError({ children, icon: Icon = StopIcon, ...props }) {
   return (
     <Container>
       <div

diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js
@@ -1,11 +1,12 @@
-import React, { Suspense, useMemo } from 'react';
+import React, { Fragment, Suspense, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from '@apollo/react-hooks';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
 import { Global } from '@emotion/core';
 
 import { globalStyles } from '@arch-ui/theme';
+import { InfoIcon } from '@arch-ui/icons';
 
 import { initApolloClient } from './apolloClient';
 import Nav from './components/Nav';
@@ -14,6 +15,8 @@ import ConnectivityListener from './components/ConnectivityListener';
 import KeyboardShortcuts from './components/KeyboardShortcuts';
 import PageLoading from './components/PageLoading';
 import ToastContainer from './components/ToastContainer';
+import DocTitle from './components/DocTitle';
+import PageError from './components/PageError';
 import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta';
 import { ListProvider } from './providers/List';
 import { HooksProvider } from './providers/Hooks';
@@ -27,6 +30,7 @@ import SignoutPage from './pages/Signout';
 
 export const KeystoneAdminUI = () => {
   const {
+    listKeys,
     getListByPath,
     adminPath,
     signinPath,
@@ -54,7 +58,25 @@ export const KeystoneAdminUI = () => {
       }),
     {
       path: `${adminPath}`,
-      component: () => <HomePage />,
+      component: () => {
+        if (listKeys.length === 0) {
+          return (
+            <Fragment>
+              <DocTitle title="Home" />
+              <PageError icon={InfoIcon}>
+                <p>
+                  No lists defined.{' '}
+                  <a target="_blank" href="https://keystonejs.com/tutorials/add-lists">
+                    Get started by creating your first list.
+                  </a>
+                </p>
+              </PageError>
+            </Fragment>
+          );
+        }
+
+        return <HomePage />;
+      },
       exact: true,
     },
     {

diff --git a/packages/app-admin-ui/client/pages/Home/index.js b/packages/app-admin-ui/client/pages/Home/index.js
@@ -1,6 +1,5 @@
 import React, { Fragment, useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/react-hooks';
 
 import { Container, Grid, Cell } from '@arch-ui/layout';
 import { PageTitle } from '@arch-ui/typography';
@@ -32,7 +31,7 @@ const Homepage = () => {
   // TODO: A permission query to limit which lists are visible
   const lists = listKeys.map(key => getListByKey(key));
 
-  const [getLists, { data, error, called }] = useLazyQuery(getCountQuery(lists), {
+  const { data, error } = useQuery(getCountQuery(lists), {
     fetchPolicy: 'cache-and-network',
     errorPolicy: 'all',
   });
@@ -52,26 +51,6 @@ const Homepage = () => {
     },
   });
 
-  if (lists.length === 0) {
-    return (
-      <Fragment>
-        <DocTitle title="Home" />
-        <PageError>
-          <p>
-            No lists defined.{' '}
-            <Link href="https://keystonejs.com/tutorials/add-lists">
-              Get started by creating your first list.
-            </Link>
-          </p>
-        </PageError>
-      </Fragment>
-    );
-  }
-
-  if (!called) {
-    getLists();
-  }
-
   let allowedLists = lists;
 
   if (error) {

diff --git a/packages/app-admin-ui/client/pages/ListNotFound.js b/packages/app-admin-ui/client/pages/ListNotFound.js
@@ -10,7 +10,7 @@ const ListNotFoundPage = ({ listKey }) => {
   const { adminPath } = useAdminMeta();
 
   return (
-    <PageError Icon={IssueOpenedIcon}>
+    <PageError icon={IssueOpenedIcon}>
       <p>
         The list &ldquo;
         {listKey}