...

5 files changed, 28 insertions, 53 deletions

diff --git a/FrontEnd/src/views/admin/Admin.tsx b/FrontEnd/src/views/admin/Admin.tsx
index e750621c..adb1e458 100644
--- a/FrontEnd/src/views/admin/Admin.tsx
+++ b/FrontEnd/src/views/admin/Admin.tsx
@@ -1,48 +1,27 @@
-import React, { Fragment } from "react";
-import { Redirect, Route, Switch, useRouteMatch, match } from "react-router";
+import React from "react";
+import { Route, Routes } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import { AuthUser } from "@/services/user";
-
 import AdminNav from "./AdminNav";
 import UserAdmin from "./UserAdmin";
 import MoreAdmin from "./MoreAdmin";
 
 import "./index.css";
 
-interface AdminProps {
-  user: AuthUser;
-}
-
-const Admin: React.FC<AdminProps> = ({ user }) => {
+const Admin: React.FC = () => {
   useTranslation("admin");
 
-  const match = useRouteMatch();
-
   return (
-    <Fragment>
-      <Switch>
-        <Redirect from={match.path} to={`${match.path}/users`} exact />
-        <Route path={`${match.path}/:name`}>
-          {(p) => {
-            const match = p.match as match<{ name: string }>;
-            const name = match.params["name"];
-            return (
-              <div className="container">
-                <AdminNav className="mt-2" />
-                {(() => {
-                  if (name === "users") {
-                    return <UserAdmin user={user} />;
-                  } else if (name === "more") {
-                    return <MoreAdmin user={user} />;
-                  }
-                })()}
-              </div>
-            );
-          }}
-        </Route>
-      </Switch>
-    </Fragment>
+    <>
+      <div className="container">
+        <AdminNav className="mt-2" />
+        <Routes>
+          <Route index element={<UserAdmin />} />
+          <Route path="/admin/user" element={<UserAdmin />} />
+          <Route path="/admin/more" element={<MoreAdmin />} />
+        </Routes>
+      </div>
+    </>
   );
 };
 
diff --git a/FrontEnd/src/views/admin/AdminNav.tsx b/FrontEnd/src/views/admin/AdminNav.tsx
index 821c9b0a..dc8b7dd0 100644
--- a/FrontEnd/src/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/views/admin/AdminNav.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { useRouteMatch } from "react-router";
+import { useParams } from "react-router-dom";
 
 import Tabs from "../common/tab/Tabs";
 
 const AdminNav: React.FC<{ className?: string }> = ({ className }) => {
-  const match = useRouteMatch<{ name: string }>();
+  const params = useParams();
 
-  const name = match.params.name;
+  const name = params.name;
 
   return (
     <Tabs
diff --git a/FrontEnd/src/views/admin/MoreAdmin.tsx b/FrontEnd/src/views/admin/MoreAdmin.tsx
index 042789a0..218ac5fb 100644
--- a/FrontEnd/src/views/admin/MoreAdmin.tsx
+++ b/FrontEnd/src/views/admin/MoreAdmin.tsx
@@ -1,12 +1,6 @@
 import React from "react";
 
-import { AuthUser } from "@/services/user";
-
-export interface MoreAdminProps {
-  user: AuthUser;
-}
-
-const MoreAdmin: React.FC<MoreAdminProps> = () => {
+const MoreAdmin: React.FC = () => {
   return <>More...</>;
 };
 
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 68d65409..6c411be8 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import classnames from "classnames";
 
+import { getHttpUserClient, HttpUser, kUserPermissionList } from "@/http/user";
+
 import OperationDialog, {
   OperationDialogBoolInput,
 } from "../common/dailog/OperationDialog";
-
-import { AuthUser } from "@/services/user";
-import { getHttpUserClient, HttpUser, kUserPermissionList } from "@/http/user";
-import { Trans, useTranslation } from "react-i18next";
 import Button from "../common/button/Button";
 import Spinner from "../common/Spinner";
 import FlatButton from "../common/button/FlatButton";
@@ -246,11 +245,7 @@ const UserItem: React.FC<UserItemProps> = ({ user, onChange }) => {
   );
 };
 
-interface UserAdminProps {
-  user: AuthUser;
-}
-
-const UserAdmin: React.FC<UserAdminProps> = () => {
+const UserAdmin: React.FC = () => {
   const [users, setUsers] = useState<HttpUser[] | null>(null);
   const [dialog, setDialog] = useState<"create" | null>(null);
   const [usersVersion, setUsersVersion] = useState<number>(0);
diff --git a/FrontEnd/src/views/admin/index.tsx b/FrontEnd/src/views/admin/index.tsx
new file mode 100644
index 00000000..49da6586
--- /dev/null
+++ b/FrontEnd/src/views/admin/index.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const Admin = React.lazy(
+  () => import(/* webpackChunkName: "admin" */ "./Admin")
+);
+
+export default Admin;