From b0bdd9027b85bdb00e496e7a139d6c37bb60ae24 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 8 Jul 2022 15:36:59 +0800
Subject: [PATCH] fix(console): hide demo-app from topbar get-started progress
 if it is deleted

---
 .../components/GetStartedProgress/index.tsx   |   2 +-
 packages/console/src/pages/GetStarted/hook.ts | 154 ++++++++++--------
 .../console/src/pages/GetStarted/index.tsx    |  39 ++---
 3 files changed, 102 insertions(+), 93 deletions(-)

diff --git a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
index 91bbf3918..c4ffc662a 100644
--- a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
+++ b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
@@ -22,7 +22,7 @@ const GetStartedProgress = () => {
   const Icon = theme === AppearanceMode.LightMode ? Tada : TadaDark;
   const anchorRef = useRef<HTMLDivElement>(null);
   const [showDropDown, setShowDropdown] = useState(false);
-  const { data, completedCount, totalCount } = useGetStartedMetadata({ checkDemoAppExists: false });
+  const { data, completedCount, totalCount } = useGetStartedMetadata();
 
   if (getStartedHidden) {
     return null;
diff --git a/packages/console/src/pages/GetStarted/hook.ts b/packages/console/src/pages/GetStarted/hook.ts
index 553b5c2b9..604c51266 100644
--- a/packages/console/src/pages/GetStarted/hook.ts
+++ b/packages/console/src/pages/GetStarted/hook.ts
@@ -1,6 +1,7 @@
 import { AdminConsoleKey, I18nKey } from '@logto/phrases';
 import { AppearanceMode, Application } from '@logto/schemas';
 import { demoAppApplicationId } from '@logto/schemas/lib/seeds';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 
@@ -31,16 +32,12 @@ type GetStartedMetadata = {
   onClick: () => void;
 };
 
-type Props = {
-  checkDemoAppExists: boolean;
-};
-
-const useGetStartedMetadata = ({ checkDemoAppExists }: Props) => {
+const useGetStartedMetadata = () => {
   const { settings, updateSettings } = useSettings();
   const theme = useTheme();
   const isLightMode = theme === AppearanceMode.LightMode;
   const { data: demoApp, error } = useSWR<Application, RequestError>(
-    checkDemoAppExists && `/api/applications/${demoAppApplicationId}`,
+    `/api/applications/${demoAppApplicationId}`,
     {
       shouldRetryOnError: (error: unknown) => {
         if (error instanceof RequestError) {
@@ -55,77 +52,92 @@ const useGetStartedMetadata = ({ checkDemoAppExists }: Props) => {
   const isLoadingDemoApp = !demoApp && !error;
   const hideDemo = error?.status === 404;
 
-  const data: GetStartedMetadata[] = [
-    {
-      id: 'checkDemo',
-      title: 'get_started.card1_title',
-      subtitle: 'get_started.card1_subtitle',
-      icon: isLightMode ? CheckDemo : CheckDemoDark,
-      buttonText: 'admin_console.general.check_out',
-      isComplete: settings?.demoChecked,
-      isHidden: hideDemo,
-      onClick: async () => {
-        void updateSettings({ demoChecked: true });
-        window.open('/demo-app', '_blank');
+  const data = useMemo(() => {
+    const metadataItems: GetStartedMetadata[] = [
+      {
+        id: 'checkDemo',
+        title: 'get_started.card1_title',
+        subtitle: 'get_started.card1_subtitle',
+        icon: isLightMode ? CheckDemo : CheckDemoDark,
+        buttonText: 'admin_console.general.check_out',
+        isComplete: settings?.demoChecked,
+        isHidden: hideDemo,
+        onClick: async () => {
+          void updateSettings({ demoChecked: true });
+          window.open('/demo-app', '_blank');
+        },
       },
-    },
-    {
-      id: 'createApplication',
-      title: 'get_started.card2_title',
-      subtitle: 'get_started.card2_subtitle',
-      icon: isLightMode ? CreateApp : CreateAppDark,
-      buttonText: 'admin_console.general.create',
-      isComplete: settings?.applicationCreated,
-      onClick: () => {
-        navigate('/applications/create');
+      {
+        id: 'createApplication',
+        title: 'get_started.card2_title',
+        subtitle: 'get_started.card2_subtitle',
+        icon: isLightMode ? CreateApp : CreateAppDark,
+        buttonText: 'admin_console.general.create',
+        isComplete: settings?.applicationCreated,
+        onClick: () => {
+          navigate('/applications/create');
+        },
       },
-    },
-    {
-      id: 'customizeSignInExperience',
-      title: 'get_started.card3_title',
-      subtitle: 'get_started.card3_subtitle',
-      icon: isLightMode ? Customize : CustomizeDark,
-      buttonText: 'admin_console.general.customize',
-      isComplete: settings?.signInExperienceCustomized,
-      onClick: () => {
-        navigate('/sign-in-experience');
+      {
+        id: 'customizeSignInExperience',
+        title: 'get_started.card3_title',
+        subtitle: 'get_started.card3_subtitle',
+        icon: isLightMode ? Customize : CustomizeDark,
+        buttonText: 'admin_console.general.customize',
+        isComplete: settings?.signInExperienceCustomized,
+        onClick: () => {
+          navigate('/sign-in-experience');
+        },
       },
-    },
-    {
-      id: 'configurePasswordless',
-      title: 'get_started.card4_title',
-      subtitle: 'get_started.card4_subtitle',
-      icon: isLightMode ? Passwordless : PasswordlessDark,
-      buttonText: 'admin_console.general.set_up',
-      isComplete: settings?.passwordlessConfigured,
-      onClick: () => {
-        navigate('/connectors');
+      {
+        id: 'configurePasswordless',
+        title: 'get_started.card4_title',
+        subtitle: 'get_started.card4_subtitle',
+        icon: isLightMode ? Passwordless : PasswordlessDark,
+        buttonText: 'admin_console.general.set_up',
+        isComplete: settings?.passwordlessConfigured,
+        onClick: () => {
+          navigate('/connectors');
+        },
       },
-    },
-    {
-      id: 'configureSocialSignIn',
-      title: 'get_started.card5_title',
-      subtitle: 'get_started.card5_subtitle',
-      icon: isLightMode ? OneClick : OneClickDark,
-      buttonText: 'admin_console.general.add',
-      isComplete: settings?.socialSignInConfigured,
-      onClick: () => {
-        navigate('/connectors/social');
+      {
+        id: 'configureSocialSignIn',
+        title: 'get_started.card5_title',
+        subtitle: 'get_started.card5_subtitle',
+        icon: isLightMode ? OneClick : OneClickDark,
+        buttonText: 'admin_console.general.add',
+        isComplete: settings?.socialSignInConfigured,
+        onClick: () => {
+          navigate('/connectors/social');
+        },
       },
-    },
-    {
-      id: 'checkFurtherReadings',
-      title: 'get_started.card6_title',
-      subtitle: 'get_started.card6_subtitle',
-      icon: isLightMode ? FurtherReadings : FurtherReadingsDark,
-      buttonText: 'admin_console.general.check_out',
-      isComplete: settings?.furtherReadingsChecked,
-      onClick: () => {
-        void updateSettings({ furtherReadingsChecked: true });
-        window.open('https://docs.logto.io/', '_blank');
+      {
+        id: 'checkFurtherReadings',
+        title: 'get_started.card6_title',
+        subtitle: 'get_started.card6_subtitle',
+        icon: isLightMode ? FurtherReadings : FurtherReadingsDark,
+        buttonText: 'admin_console.general.check_out',
+        isComplete: settings?.furtherReadingsChecked,
+        onClick: () => {
+          void updateSettings({ furtherReadingsChecked: true });
+          window.open('https://docs.logto.io/', '_blank');
+        },
       },
-    },
-  ];
+    ];
+
+    return metadataItems.filter(({ isHidden }) => !isHidden);
+  }, [
+    hideDemo,
+    isLightMode,
+    navigate,
+    settings?.applicationCreated,
+    settings?.demoChecked,
+    settings?.furtherReadingsChecked,
+    settings?.passwordlessConfigured,
+    settings?.signInExperienceCustomized,
+    settings?.socialSignInConfigured,
+    updateSettings,
+  ]);
 
   return {
     data,
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index ba66d1670..7dc04ddbd 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -16,7 +16,7 @@ import * as styles from './index.module.scss';
 const GetStarted = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
-  const { data, isLoading } = useGetStartedMetadata({ checkDemoAppExists: true });
+  const { data, isLoading } = useGetStartedMetadata();
   const { update } = useUserPreferences();
   const [showConfirmModal, setShowConfirmModal] = useState(false);
 
@@ -48,26 +48,23 @@ const GetStarted = () => {
       </div>
       {isLoading && <Skeleton />}
       {!isLoading &&
-        data.map(
-          ({ id, title, subtitle, icon: CardIcon, isComplete, isHidden, buttonText, onClick }) =>
-            !isHidden && (
-              <Card key={id} className={styles.card}>
-                {!isComplete && <CardIcon className={styles.icon} />}
-                {isComplete && <CompleteIndicator className={styles.icon} />}
-                <div className={styles.wrapper}>
-                  <div className={styles.title}>{t(title)}</div>
-                  <div className={styles.subtitle}>{t(subtitle)}</div>
-                </div>
-                <Button
-                  className={styles.button}
-                  type="outline"
-                  size="large"
-                  title={buttonText}
-                  onClick={onClick}
-                />
-              </Card>
-            )
-        )}
+        data.map(({ id, title, subtitle, icon: CardIcon, isComplete, buttonText, onClick }) => (
+          <Card key={id} className={styles.card}>
+            {!isComplete && <CardIcon className={styles.icon} />}
+            {isComplete && <CompleteIndicator className={styles.icon} />}
+            <div className={styles.wrapper}>
+              <div className={styles.title}>{t(title)}</div>
+              <div className={styles.subtitle}>{t(subtitle)}</div>
+            </div>
+            <Button
+              className={styles.button}
+              type="outline"
+              size="large"
+              title={buttonText}
+              onClick={onClick}
+            />
+          </Card>
+        ))}
       <ConfirmModal
         isOpen={showConfirmModal}
         confirmButtonType="primary"