chore(admin): organize massive routes (#7857)

packages/frontend/admin/src/app.tsx

@@ -4,12 +4,16 @@ import { wrapCreateBrowserRouter } from '@sentry/react';
 import { useEffect } from 'react';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
+  Navigate,
+  Outlet,
   RouterProvider,
   useLocation,
-  useNavigate,
 } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { TooltipProvider } from './components/ui/tooltip';
+import { isAdmin, useCurrentUser, useServerConfig } from './modules/common';
+import { Layout } from './modules/layout';
 
 const createBrowserRouter = wrapCreateBrowserRouter(
   reactRouterCreateBrowserRouter
@@ -19,53 +23,76 @@ const _createBrowserRouter = window.SENTRY_RELEASE
   ? createBrowserRouter
   : reactRouterCreateBrowserRouter;
 
-const Redirect = function Redirect() {
-  const location = useLocation();
-  const navigate = useNavigate();
+function AuthenticatedRoutes() {
+  const user = useCurrentUser();
+
   useEffect(() => {
-    if (!location.pathname.startsWith('/admin/accounts')) {
-      navigate('/admin/accounts', { replace: true });
+    if (user && !isAdmin(user)) {
+      toast.error('You are not an admin, please login the admin account.');
     }
-  }, [location, navigate]);
-  return null;
-};
+  }, [user]);
+
+  if (!user || !isAdmin(user)) {
+    return <Navigate to="/admin/auth" />;
+  }
+
+  return (
+    <Layout>
+      <Outlet />
+    </Layout>
+  );
+}
+
+function RootRoutes() {
+  const config = useServerConfig();
+  const location = useLocation();
+
+  if (!config.initialized) {
+    return <Navigate to="/admin/setup" />;
+  }
+
+  if (/^\/admin\/?$/.test(location.pathname)) {
+    return <Navigate to="/admin/accounts" />;
+  }
+
+  return <Outlet />;
+}
 
 export const router = _createBrowserRouter(
   [
-    {
-      path: '/',
-      element: <Redirect />,
-    },
     {
       path: '/admin',
+      element: <RootRoutes />,
       children: [
-        {
-          path: '',
-          element: <Redirect />,
-        },
-        {
-          path: '/admin/accounts',
-          lazy: () => import('./modules/accounts'),
-        },
         {
           path: '/admin/auth',
           lazy: () => import('./modules/auth'),
         },
-        {
-          path: '/admin/ai',
-          lazy: () => import('./modules/ai'),
-        },
         {
           path: '/admin/setup',
           lazy: () => import('./modules/setup'),
         },
         {
-          path: '/admin/config',
-          lazy: () => import('./modules/config'),
-        },
-        {
-          path: '/admin/settings',
-          lazy: () => import('./modules/settings'),
+          path: '/admin/*',
+          element: <AuthenticatedRoutes />,
+          children: [
+            {
+              path: 'accounts',
+              lazy: () => import('./modules/accounts'),
+            },
+            // {
+            //   path: 'ai',
+            //   lazy: () => import('./modules/ai'),
+            // },
+            {
+              path: 'config',
+              lazy: () => import('./modules/config'),
+            },
+            {
+              path: 'settings',
+              lazy: () => import('./modules/settings'),
+            },
+          ],
         },
       ],
     },