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,57 +23,80 @@ const _createBrowserRouter = window.SENTRY_RELEASE
   ? createBrowserRouter
   : reactRouterCreateBrowserRouter;
 
-const Redirect = function Redirect() {
+function AuthenticatedRoutes() {
-  const location = useLocation();
+  const user = useCurrentUser();
-  const navigate = useNavigate();
+
   useEffect(() => {
-    if (!location.pathname.startsWith('/admin/accounts')) {
+    if (user && !isAdmin(user)) {
-      navigate('/admin/accounts', { replace: true });
+      toast.error('You are not an admin, please login the admin account.');
     }
-  }, [location, navigate]);
+  }, [user]);
-  return null;
+
-};
+  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',
+          path: '/admin/*',
+          element: <AuthenticatedRoutes />,
+          children: [
+            {
+              path: 'accounts',
+              lazy: () => import('./modules/accounts'),
+            },
+            // {
+            //   path: 'ai',
+            //   lazy: () => import('./modules/ai'),
+            // },
+            {
+              path: 'config',
               lazy: () => import('./modules/config'),
             },
             {
-          path: '/admin/settings',
+              path: 'settings',
               lazy: () => import('./modules/settings'),
             },
           ],
         },
       ],
+    },
+  ],
   {
     future: {
       v7_normalizeFormMethod: true,

packages/frontend/admin/src/modules/accounts/index.tsx

@@ -3,14 +3,9 @@ import { useQuery } from '@affine/core/hooks/use-query';
 import { listUsersQuery } from '@affine/graphql';
 import { useState } from 'react';
 
-import { Layout } from '../layout';
 import { columns } from './components/columns';
 import { DataTable } from './components/data-table';
 
-export function Accounts() {
-  return <Layout content={<AccountPage />} />;
-}
-
 export function AccountPage() {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
@@ -45,4 +40,4 @@ export function AccountPage() {
     </div>
   );
 }
-export { Accounts as Component };
+export { AccountPage as Component };

packages/frontend/admin/src/modules/ai/index.tsx

@@ -8,7 +8,7 @@ export function Ai() {
   return null;
 
   // hide ai config in admin until it's ready
-  // return <Layout content={<AiPage />} />;
+  // return <AiPage />;
 }
 
 export function AiPage() {

packages/frontend/admin/src/modules/auth/index.tsx

@@ -1,27 +1,24 @@
 import { Button } from '@affine/admin/components/ui/button';
 import { Input } from '@affine/admin/components/ui/input';
 import { Label } from '@affine/admin/components/ui/label';
-import { useMutateQueryResource } from '@affine/core/hooks/use-mutation';
+import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
-import {
+import type { FormEvent } from 'react';
-  FeatureType,
+import { useCallback, useRef } from 'react';
-  getCurrentUserFeaturesQuery,
+import { Navigate } from 'react-router-dom';
-  getUserFeaturesQuery,
-} from '@affine/graphql';
-import { useCallback, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { useCurrentUser, useServerConfig } from '../common';
+import { isAdmin, useCurrentUser, useRevalidateCurrentUser } from '../common';
 import logo from './logo.svg';
 
 export function Auth() {
   const currentUser = useCurrentUser();
-  const serverConfig = useServerConfig();
+  const revalidate = useRevalidateCurrentUser();
-  const revalidate = useMutateQueryResource();
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
-  const navigate = useNavigate();
+  const login = useCallback(
-  const login = useCallback(() => {
+    (e: FormEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
       if (!emailRef.current || !passwordRef.current) return;
       fetch('/api/auth/sign-in', {
         method: 'POST',
@@ -38,7 +35,6 @@ export function Auth() {
             const data = await response.json();
             throw new Error(data.message || 'Failed to login');
           }
-        await revalidate(getCurrentUserFeaturesQuery);
           return response.json();
         })
         .then(() =>
@@ -63,7 +59,7 @@ export function Auth() {
           }) => {
             if (features.includes(FeatureType.Admin)) {
               toast.success('Logged in successfully');
-            navigate('/admin');
+              revalidate();
             } else {
               toast.error('You are not an admin');
             }
@@ -72,19 +68,13 @@ export function Auth() {
         .catch(err => {
           toast.error(`Failed to login: ${err.message}`);
         });
-  }, [navigate, revalidate]);
+    },
+    [revalidate]
+  );
 
-  useEffect(() => {
+  if (currentUser && isAdmin(currentUser)) {
-    if (serverConfig.initialized === false) {
+    return <Navigate to="/admin" />;
-      navigate('/admin/setup');
-      return;
-    } else if (!currentUser) {
-      return;
-    } else if (!currentUser?.features.includes?.(FeatureType.Admin)) {
-      toast.error('You are not an admin, please login the admin account.');
-      return;
   }
-  }, [currentUser, navigate, serverConfig.initialized]);
 
   return (
     <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px] h-screen">
@@ -96,6 +86,7 @@ export function Auth() {
               Enter your email below to login to your account
             </p>
           </div>
+          <form onSubmit={login} action="#">
             <div className="grid gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="email">Email</Label>
@@ -104,6 +95,7 @@ export function Auth() {
                   type="email"
                   ref={emailRef}
                   placeholder="m@example.com"
+                  autoComplete="email"
                   required
                 />
               </div>
@@ -111,12 +103,19 @@ export function Auth() {
                 <div className="flex items-center">
                   <Label htmlFor="password">Password</Label>
                 </div>
-              <Input id="password" type="password" ref={passwordRef} required />
+                <Input
+                  id="password"
+                  type="password"
+                  ref={passwordRef}
+                  autoComplete="current-password"
+                  required
+                />
               </div>
               <Button onClick={login} type="submit" className="w-full">
                 Login
               </Button>
             </div>
+          </form>
         </div>
       </div>
       <div className="hidden bg-muted lg:flex lg:justify-center">

packages/frontend/admin/src/modules/common.ts

@@ -1,6 +1,9 @@
+import { useMutateQueryResource } from '@affine/core/hooks/use-mutation';
 import { useQueryImmutable } from '@affine/core/hooks/use-query';
+import type { GetCurrentUserFeaturesQuery } from '@affine/graphql';
 import {
   adminServerConfigQuery,
+  FeatureType,
   getCurrentUserFeaturesQuery,
 } from '@affine/graphql';
 
@@ -12,10 +15,22 @@ export const useServerConfig = () => {
   return data.serverConfig;
 };
 
+export const useRevalidateCurrentUser = () => {
+  const revalidate = useMutateQueryResource();
+
+  return () => {
+    revalidate(getCurrentUserFeaturesQuery);
+  };
+};
 export const useCurrentUser = () => {
   const { data } = useQueryImmutable({
     query: getCurrentUserFeaturesQuery,
   });
-
   return data.currentUser;
 };
+
+export function isAdmin(
+  user: NonNullable<GetCurrentUserFeaturesQuery['currentUser']>
+) {
+  return user.features.includes(FeatureType.Admin);
+}

packages/frontend/admin/src/modules/config/index.tsx

@@ -9,7 +9,6 @@ import { Separator } from '@affine/admin/components/ui/separator';
 import { useQueryImmutable } from '@affine/core/hooks/use-query';
 import { getServerServiceConfigsQuery } from '@affine/graphql';
 
-import { Layout } from '../layout';
 import { AboutAFFiNE } from './about';
 
 type ServerConfig = {
@@ -38,10 +37,6 @@ type ServerServiceConfig = {
   config: ServerConfig | MailerConfig | DatabaseConfig;
 };
 
-export function Config() {
-  return <Layout content={<ConfigPage />} />;
-}
-
 export function ConfigPage() {
   return (
     <div className=" h-screen flex-1 space-y-1 flex-col flex">
@@ -218,4 +213,4 @@ export function ServerServiceConfig() {
   );
 }
 
-export { Config as Component };
+export { ConfigPage as Component };

packages/frontend/admin/src/modules/layout.tsx

@@ -6,10 +6,8 @@ import {
 import { Separator } from '@affine/admin/components/ui/separator';
 import { TooltipProvider } from '@affine/admin/components/ui/tooltip';
 import { cn } from '@affine/admin/utils';
-import { useQuery } from '@affine/core/hooks/use-query';
-import { FeatureType, getCurrentUserFeaturesQuery } from '@affine/graphql';
 import { AlignJustifyIcon } from 'lucide-react';
-import type { ReactNode, RefObject } from 'react';
+import type { PropsWithChildren, ReactNode, RefObject } from 'react';
 import {
   createContext,
   useCallback,
@@ -19,8 +17,6 @@ import {
   useState,
 } from 'react';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'sonner';
 
 import { Button } from '../components/ui/button';
 import {
@@ -32,14 +28,9 @@ import {
   SheetTrigger,
 } from '../components/ui/sheet';
 import { Logo } from './accounts/components/logo';
-import { useServerConfig } from './common';
 import { NavContext } from './nav/context';
 import { Nav } from './nav/nav';
 
-interface LayoutProps {
-  content: ReactNode;
-}
-
 interface RightPanelContextType {
   isOpen: boolean;
   rightPanelContent: ReactNode;
@@ -81,14 +72,7 @@ export function useMediaQuery(query: string) {
   return value;
 }
 
-export function Layout({ content }: LayoutProps) {
+export function Layout({ children }: PropsWithChildren) {
-  const serverConfig = useServerConfig();
-  const {
-    data: { currentUser },
-  } = useQuery({
-    query: getCurrentUserFeaturesQuery,
-  });
-
   const [rightPanelContent, setRightPanelContent] = useState<ReactNode>(null);
   const [open, setOpen] = useState(false);
   const rightPanelRef = useRef<ImperativePanelHandle>(null);
@@ -126,26 +110,6 @@ export function Layout({ content }: LayoutProps) {
     [closePanel, openPanel]
   );
 
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (serverConfig.initialized === false) {
-      navigate('/admin/setup');
-      return;
-    } else if (!currentUser) {
-      navigate('/admin/auth');
-      return;
-    } else if (!currentUser?.features.includes?.(FeatureType.Admin)) {
-      toast.error('You are not an admin, please login the admin account.');
-      navigate('/admin/auth');
-      return;
-    }
-  }, [currentUser, navigate, serverConfig.initialized]);
-
-  if (serverConfig.initialized === false || !currentUser) {
-    return null;
-  }
-
   return (
     <RightPanelContext.Provider
       value={{
@@ -172,7 +136,7 @@ export function Layout({ content }: LayoutProps) {
             <LeftPanel />
             <ResizablePanelGroup direction="horizontal">
               <ResizablePanel id="0" order={0} minSize={50}>
-                {content}
+                {children}
               </ResizablePanel>
               <RightPanel
                 rightPanelRef={rightPanelRef}

packages/frontend/admin/src/modules/nav/user-dropdown.tsx

@@ -12,48 +12,26 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@affine/admin/components/ui/dropdown-menu';
-import { FeatureType } from '@affine/graphql';
 import { CircleUser, MoreVertical } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { useCurrentUser, useServerConfig } from '../common';
+import { useCurrentUser, useRevalidateCurrentUser } from '../common';
 
 export function UserDropdown() {
   const currentUser = useCurrentUser();
-  const serverConfig = useServerConfig();
+  const relative = useRevalidateCurrentUser();
-
-  const navigate = useNavigate();
 
   const handleLogout = useCallback(() => {
-    fetch('/api/auth/sign-out', {
+    fetch('/api/auth/sign-out')
-      method: 'POST',
-    })
       .then(() => {
         toast.success('Logged out successfully');
-        navigate('/admin/auth');
+        relative();
       })
       .catch(err => {
         toast.error(`Failed to logout: ${err.message}`);
       });
-  }, [navigate]);
+  }, [relative]);
-
-  useEffect(() => {
-    if (serverConfig.initialized === false) {
-      navigate('/admin/setup');
-      return;
-    }
-    if (!currentUser) {
-      navigate('/admin/auth');
-      return;
-    }
-    if (!currentUser?.features.includes?.(FeatureType.Admin)) {
-      toast.error('You are not an admin, please login the admin account.');
-      navigate('/admin/auth');
-      return;
-    }
-  }, [currentUser, navigate, serverConfig.initialized]);
 
   return (
     <div className="flex flex-none items-center justify-between px-4 py-3 flex-nowrap">

packages/frontend/admin/src/modules/settings/index.tsx

@@ -6,7 +6,6 @@ import { CheckIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Layout } from '../layout';
 import { useNav } from '../nav/context';
 import { ConfirmChanges } from './confirm-changes';
 import { RuntimeSettingRow } from './runtime-setting-row';
@@ -25,10 +24,6 @@ export type ModifiedValues = {
   newValue: any;
 };
 
-export function Settings() {
-  return <Layout content={<SettingsPage />} />;
-}
-
 export function SettingsPage() {
   const { trigger } = useUpdateServerRuntimeConfigs();
   const { serverRuntimeConfig } = useGetServerRuntimeConfig();
@@ -190,4 +185,4 @@ export const AdminPanel = ({
   );
 };
 
-export { Settings as Component };
+export { SettingsPage as Component };

packages/frontend/admin/src/modules/setup/index.tsx

@@ -1,7 +1,16 @@
+import { Navigate } from 'react-router-dom';
+
+import { useServerConfig } from '../common';
 import { Form } from './form';
 import logo from './logo.svg';
 
 export function Setup() {
+  const config = useServerConfig();
+
+  if (config.initialized) {
+    return <Navigate to="/admin" />;
+  }
+
   return (
     <div className="w-full lg:grid lg:grid-cols-2 h-screen">
       <div className="flex items-center justify-center py-12 h-full">