From ba13ea06e50116e190669557090f89cfd90f3f11 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 1 Jun 2022 15:13:48 +0800
Subject: [PATCH] refactor(console): add AppBoundary in admin console

---
 packages/console/src/App.tsx                  | 49 +++++++++++++------
 .../components/AppBoundary/index.module.scss  | 21 ++++++++
 .../src/components/AppBoundary/index.tsx      | 44 +++++++++++++++++
 .../components/AppContent/index.module.scss   | 20 --------
 .../src/components/AppContent/index.tsx       | 27 ----------
 5 files changed, 100 insertions(+), 61 deletions(-)
 create mode 100644 packages/console/src/components/AppBoundary/index.module.scss
 create mode 100644 packages/console/src/components/AppBoundary/index.tsx

diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index 93a9a6b70..9838cdecc 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -8,6 +8,7 @@ import './scss/normalized.scss';
 // eslint-disable-next-line import/no-unassigned-import
 import '@fontsource/roboto-mono';
 
+import AppBoundary from './components/AppBoundary';
 import AppContent from './components/AppContent';
 import ErrorBoundary from './components/ErrorBoundary';
 import Toast from './components/Toast';
@@ -36,19 +37,39 @@ const Main = () => {
   return (
     <ErrorBoundary>
       <SWRConfig value={{ fetcher }}>
-        <Toast />
-        <Routes>
-          <Route path="callback" element={<Callback />} />
-          <Route element={<AppContent />}>
-            <Route path="*" element={<NotFound />} />
-            <Route path="get-started" element={<GetStarted />} />
-            <Route path="applications">
-              <Route index element={<Applications />} />
-              <Route path=":id">
-                <Route index element={<Navigate to="settings" />} />
-                <Route path="settings" element={<ApplicationDetails />} />
-                <Route path="advanced-settings" element={<ApplicationDetails />} />
+        <AppBoundary>
+          <Toast />
+          <Routes>
+            <Route path="callback" element={<Callback />} />
+            <Route element={<AppContent />}>
+              <Route path="*" element={<NotFound />} />
+              <Route path="get-started" element={<GetStarted />} />
+              <Route path="applications">
+                <Route index element={<Applications />} />
+                <Route path=":id">
+                  <Route index element={<Navigate to="settings" />} />
+                  <Route path="settings" element={<ApplicationDetails />} />
+                  <Route path="advanced-settings" element={<ApplicationDetails />} />
+                </Route>
               </Route>
+              <Route path="api-resources">
+                <Route index element={<ApiResources />} />
+                <Route path=":id" element={<ApiResourceDetails />} />
+              </Route>
+              <Route path="connectors">
+                <Route index element={<Connectors />} />
+                <Route path="social" element={<Connectors />} />
+                <Route path=":connectorId" element={<ConnectorDetails />} />
+              </Route>
+              <Route path="users">
+                <Route index element={<Users />} />
+                <Route path=":id" element={<UserDetails />} />
+              </Route>
+              <Route path="sign-in-experience">
+                <Route index element={<Navigate to="experience" />} />
+                <Route path=":tab" element={<SignInExperience />} />
+              </Route>
+              <Route path="settings" element={<Settings />} />
             </Route>
             <Route path="api-resources">
               <Route index element={<ApiResources />} />
@@ -69,8 +90,8 @@ const Main = () => {
             </Route>
             <Route path="settings" element={<Settings />} />
             <Route path="dashboard" element={<Dashboard />} />
-          </Route>
-        </Routes>
+          </Routes>
+        </AppBoundary>
       </SWRConfig>
     </ErrorBoundary>
   );
diff --git a/packages/console/src/components/AppBoundary/index.module.scss b/packages/console/src/components/AppBoundary/index.module.scss
new file mode 100644
index 000000000..86429b3ca
--- /dev/null
+++ b/packages/console/src/components/AppBoundary/index.module.scss
@@ -0,0 +1,21 @@
+@use '@logto/shared/scss/console-themes' as themes;
+
+.light {
+  @include themes.light;
+}
+
+.dark {
+  @include themes.dark;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    @include themes.light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    @include themes.dark;
+  }
+}
diff --git a/packages/console/src/components/AppBoundary/index.tsx b/packages/console/src/components/AppBoundary/index.tsx
new file mode 100644
index 000000000..0653193c2
--- /dev/null
+++ b/packages/console/src/components/AppBoundary/index.tsx
@@ -0,0 +1,44 @@
+import { AppearanceMode } from '@logto/schemas';
+import React, { ReactNode, useEffect } from 'react';
+
+import { themeStorageKey } from '@/consts';
+import useAdminConsoleConfigs from '@/hooks/use-configs';
+import initI18n from '@/i18n/init';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  children?: ReactNode;
+};
+
+const AppBoundary = ({ children }: Props) => {
+  const defaultTheme = localStorage.getItem(themeStorageKey) ?? AppearanceMode.SyncWithSystem;
+  const { configs } = useAdminConsoleConfigs();
+  const theme = configs?.appearanceMode ?? defaultTheme;
+
+  useEffect(() => {
+    const isFollowSystem = theme === AppearanceMode.SyncWithSystem;
+    const className = styles[theme] ?? '';
+
+    if (!isFollowSystem) {
+      document.body.classList.add(className);
+    }
+
+    return () => {
+      if (!isFollowSystem) {
+        document.body.classList.remove(className);
+      }
+    };
+  }, [theme]);
+
+  useEffect(() => {
+    (async () => {
+      void initI18n(configs?.language);
+    })();
+  }, [configs?.language]);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+};
+
+export default AppBoundary;
diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index 9b1e5e475..15fb9d912 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -26,23 +26,3 @@
     margin: 0 auto;
   }
 }
-
-.light {
-  @include themes.light;
-}
-
-.dark {
-  @include themes.dark;
-}
-
-@media (prefers-color-scheme: light) {
-  body {
-    @include themes.light;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    @include themes.dark;
-  }
-}
diff --git a/packages/console/src/components/AppContent/index.tsx b/packages/console/src/components/AppContent/index.tsx
index 2418eeb2c..2835c310a 100644
--- a/packages/console/src/components/AppContent/index.tsx
+++ b/packages/console/src/components/AppContent/index.tsx
@@ -1,22 +1,17 @@
 import { LogtoClientError, useLogto } from '@logto/react';
-import { AppearanceMode } from '@logto/schemas';
 import React, { useEffect } from 'react';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
 import AppError from '@/components/AppError';
 import LogtoLoading from '@/components/LogtoLoading';
 import SessionExpired from '@/components/SessionExpired';
-import { themeStorageKey } from '@/consts';
 import useAdminConsoleConfigs from '@/hooks/use-configs';
-import initI18n from '@/i18n/init';
 
 import Sidebar, { getPath } from './components/Sidebar';
 import { useSidebarMenuItems } from './components/Sidebar/hook';
 import Topbar from './components/Topbar';
 import * as styles from './index.module.scss';
 
-const defaultTheme = localStorage.getItem(themeStorageKey) ?? AppearanceMode.SyncWithSystem;
-
 const AppContent = () => {
   const { isAuthenticated, error, signIn } = useLogto();
   const href = useHref('/callback');
@@ -33,28 +28,6 @@ const AppContent = () => {
     }
   }, [href, isAuthenticated, signIn]);
 
-  useEffect(() => {
-    const theme = configs?.appearanceMode ?? defaultTheme;
-    const isFollowSystem = theme === AppearanceMode.SyncWithSystem;
-    const className = styles[theme] ?? '';
-
-    if (!isFollowSystem) {
-      document.body.classList.add(className);
-    }
-
-    return () => {
-      if (!isFollowSystem) {
-        document.body.classList.remove(className);
-      }
-    };
-  }, [configs?.appearanceMode]);
-
-  useEffect(() => {
-    (async () => {
-      void initI18n(configs?.language);
-    })();
-  }, [configs?.language]);
-
   useEffect(() => {
     // Navigate to the first menu item after configs are loaded.
     if (configs && location.pathname === '/') {