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

2026-02-12 04:18:54 +00:00 · 2024-08-14 03:34:38 +00:00
parent 0ba516866f
commit 015247345c
10 changed files with 187 additions and 210 deletions
--- a/packages/frontend/admin/src/app.tsx
+++ b/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'),
+            },
+          ],
        },
      ],
    },
--- a/packages/frontend/admin/src/modules/accounts/index.tsx
+++ b/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 };
--- a/packages/frontend/admin/src/modules/ai/index.tsx
+++ b/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() {
--- a/packages/frontend/admin/src/modules/auth/index.tsx
+++ b/packages/frontend/admin/src/modules/auth/index.tsx
@@ -1,90 +1,80 @@
 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,
-  getCurrentUserFeaturesQuery,
-  getUserFeaturesQuery,
-} from '@affine/graphql';
-import { useCallback, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
+import type { FormEvent } from 'react';
+import { useCallback, useRef } from 'react';
+import { Navigate } 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 = useMutateQueryResource();
+  const revalidate = useRevalidateCurrentUser();
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
-  const navigate = useNavigate();
-  const login = useCallback(() => {
-    if (!emailRef.current || !passwordRef.current) return;
-    fetch('/api/auth/sign-in', {
-      method: 'POST',
-      body: JSON.stringify({
-        email: emailRef.current?.value,
-        password: passwordRef.current?.value,
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-      .then(async response => {
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.message || 'Failed to login');
-        }
-        await revalidate(getCurrentUserFeaturesQuery);
-        return response.json();
+  const login = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!emailRef.current || !passwordRef.current) return;
+      fetch('/api/auth/sign-in', {
+        method: 'POST',
+        body: JSON.stringify({
+          email: emailRef.current?.value,
+          password: passwordRef.current?.value,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
      })
-      .then(() =>
-        fetch('/graphql', {
-          method: 'POST',
-          body: JSON.stringify({
-            operationName: getUserFeaturesQuery.operationName,
-            query: getUserFeaturesQuery.query,
-            variables: {},
-          }),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        })
-      )
-      .then(res => res.json())
-      .then(
-        ({
-          data: {
-            currentUser: { features },
-          },
-        }) => {
-          if (features.includes(FeatureType.Admin)) {
-            toast.success('Logged in successfully');
-            navigate('/admin');
-          } else {
-            toast.error('You are not an admin');
+        .then(async response => {
+          if (!response.ok) {
+            const data = await response.json();
+            throw new Error(data.message || 'Failed to login');
          }
-        }
-      )
-      .catch(err => {
-        toast.error(`Failed to login: ${err.message}`);
-      });
-  }, [navigate, revalidate]);
+          return response.json();
+        })
+        .then(() =>
+          fetch('/graphql', {
+            method: 'POST',
+            body: JSON.stringify({
+              operationName: getUserFeaturesQuery.operationName,
+              query: getUserFeaturesQuery.query,
+              variables: {},
+            }),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+        )
+        .then(res => res.json())
+        .then(
+          ({
+            data: {
+              currentUser: { features },
+            },
+          }) => {
+            if (features.includes(FeatureType.Admin)) {
+              toast.success('Logged in successfully');
+              revalidate();
+            } else {
+              toast.error('You are not an admin');
+            }
+          }
+        )
+        .catch(err => {
+          toast.error(`Failed to login: ${err.message}`);
+        });
+    },
+    [revalidate]
+  );

-  useEffect(() => {
-    if (serverConfig.initialized === false) {
-      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]);
+  if (currentUser && isAdmin(currentUser)) {
+    return <Navigate to="/admin" />;
+  }

  return (
    <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px] h-screen">
@@ -96,27 +86,36 @@ export function Auth() {
              Enter your email below to login to your account
            </p>
          </div>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                ref={emailRef}
-                placeholder="m@example.com"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <div className="flex items-center">
-                <Label htmlFor="password">Password</Label>
+          <form onSubmit={login} action="#">
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  ref={emailRef}
+                  placeholder="m@example.com"
+                  autoComplete="email"
+                  required
+                />
              </div>
-              <Input id="password" type="password" ref={passwordRef} required />
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  ref={passwordRef}
+                  autoComplete="current-password"
+                  required
+                />
+              </div>
+              <Button onClick={login} type="submit" className="w-full">
+                Login
+              </Button>
            </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">
--- a/packages/frontend/admin/src/modules/common.ts
+++ b/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);
+}
--- a/packages/frontend/admin/src/modules/config/index.tsx
+++ b/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 };
--- a/packages/frontend/admin/src/modules/layout.tsx
+++ b/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) {
-  const serverConfig = useServerConfig();
-  const {
-    data: { currentUser },
-  } = useQuery({
-    query: getCurrentUserFeaturesQuery,
-  });
-
+export function Layout({ children }: PropsWithChildren) {
  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}
--- a/packages/frontend/admin/src/modules/nav/user-dropdown.tsx
+++ b/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 { useNavigate } from 'react-router-dom';
+import { useCallback } from 'react';
 import { toast } from 'sonner';

-import { useCurrentUser, useServerConfig } from '../common';
+import { useCurrentUser, useRevalidateCurrentUser } from '../common';

 export function UserDropdown() {
  const currentUser = useCurrentUser();
-  const serverConfig = useServerConfig();
-
-  const navigate = useNavigate();
+  const relative = useRevalidateCurrentUser();

  const handleLogout = useCallback(() => {
-    fetch('/api/auth/sign-out', {
-      method: 'POST',
-    })
+    fetch('/api/auth/sign-out')
      .then(() => {
        toast.success('Logged out successfully');
-        navigate('/admin/auth');
+        relative();
      })
      .catch(err => {
        toast.error(`Failed to logout: ${err.message}`);
      });
-  }, [navigate]);
-
-  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]);
+  }, [relative]);

  return (
    <div className="flex flex-none items-center justify-between px-4 py-3 flex-nowrap">
--- a/packages/frontend/admin/src/modules/settings/index.tsx
+++ b/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 };
--- a/packages/frontend/admin/src/modules/setup/index.tsx
+++ b/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">