From 711a148fbbf4361f9c0632eff973c2f240a67c5d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 16 Nov 2020 17:20:42 +0800
Subject: ...

---
 FrontEnd/src/app/http/user.ts                 |  8 +++
 FrontEnd/src/app/views/admin/Admin.tsx        | 64 ++++-----------------
 FrontEnd/src/app/views/admin/AdminSubPage.tsx | 44 +++++++++++++++
 FrontEnd/src/app/views/admin/UserAdmin.tsx    | 80 ++++++---------------------
 4 files changed, 80 insertions(+), 116 deletions(-)
 create mode 100644 FrontEnd/src/app/views/admin/AdminSubPage.tsx

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/http/user.ts b/FrontEnd/src/app/http/user.ts
index 9ba6508f..92a6433e 100644
--- a/FrontEnd/src/app/http/user.ts
+++ b/FrontEnd/src/app/http/user.ts
@@ -49,6 +49,7 @@ export class HttpChangePasswordBadCredentialError extends Error {
 }
 
 export interface IHttpUserClient {
+  list(): Promise<HttpUser[]>;
   get(username: string): Promise<HttpUser>;
   patch(
     username: string,
@@ -75,6 +76,13 @@ export interface IHttpUserClient {
 }
 
 export class HttpUserClient implements IHttpUserClient {
+  list(): Promise<HttpUser[]> {
+    return axios
+      .get<HttpUser[]>(`${apiBaseUrl}/users`)
+      .then(extractResponseData)
+      .catch(convertToNetworkError);
+  }
+
   get(username: string): Promise<HttpUser> {
     return axios
       .get<HttpUser>(`${apiBaseUrl}/users/${username}`)
diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx
index a64a9bc0..e17da5bc 100644
--- a/FrontEnd/src/app/views/admin/Admin.tsx
+++ b/FrontEnd/src/app/views/admin/Admin.tsx
@@ -1,12 +1,5 @@
 import React, { Fragment } from "react";
-import {
-  Redirect,
-  Route,
-  Switch,
-  useRouteMatch,
-  useHistory,
-} from "react-router";
-import { Nav } from "react-bootstrap";
+import { Redirect, Route, Switch, useRouteMatch, match } from "react-router";
 
 import { AuthUser } from "@/services/user";
 
@@ -16,57 +9,22 @@ interface AdminProps {
   user: AuthUser;
 }
 
-const Admin: React.FC<AdminProps> = (props) => {
+const Admin: React.FC<AdminProps> = ({ user }) => {
   const match = useRouteMatch();
-  const history = useHistory();
-  type TabNames = "users" | "more";
-
-  const tabName = history.location.pathname.replace(match.path + "/", "");
-
-  function toggle(newTab: TabNames): void {
-    history.push(`${match.url}/${newTab}`);
-  }
-
-  const createRoute = (
-    name: string,
-    body: React.ReactNode
-  ): React.ReactNode => {
-    return (
-      <Route path={`${match.path}/${name}`}>
-        <div style={{ height: 56 }} className="flex-fix-length" />
-        <Nav variant="tabs">
-          <Nav.Item>
-            <Nav.Link
-              active={tabName === "users"}
-              onClick={() => {
-                toggle("users");
-              }}
-            >
-              Users
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link
-              active={tabName === "more"}
-              onClick={() => {
-                toggle("more");
-              }}
-            >
-              More
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-        {body}
-      </Route>
-    );
-  };
 
   return (
     <Fragment>
       <Switch>
         <Redirect from={match.path} to={`${match.path}/users`} exact />
-        {createRoute("users", <UserAdmin user={props.user} />)}
-        {createRoute("more", <div>More Page Works</div>)}
+        <Route path={`${match.path}/:name`}>
+          {(p) => {
+            const match = p.match as match<{ name: string }>;
+            const name = match.params["name"];
+            if (name === "users") {
+              return <UserAdmin user={user} />;
+            }
+          }}
+        </Route>
       </Switch>
     </Fragment>
   );
diff --git a/FrontEnd/src/app/views/admin/AdminSubPage.tsx b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
new file mode 100644
index 00000000..5d2df13c
--- /dev/null
+++ b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { useHistory, useRouteMatch } from "react-router";
+
+const AdminSubPage: React.FC = ({ children }) => {
+  const match = useRouteMatch<{ name: string }>();
+  const history = useHistory();
+
+  const name = match.params.name;
+
+  function toggle(newTab: string): void {
+    history.push(`/admin/${newTab}`);
+  }
+
+  return (
+    <>
+      <Nav variant="tabs">
+        <Nav.Item>
+          <Nav.Link
+            active={name === "users"}
+            onClick={() => {
+              toggle("users");
+            }}
+          >
+            Users
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link
+            active={name === "more"}
+            onClick={() => {
+              toggle("more");
+            }}
+          >
+            More
+          </Nav.Link>
+        </Nav.Item>
+      </Nav>
+      {children}
+    </>
+  );
+};
+
+export default AdminSubPage;
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index 4ad9ed09..856e6136 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -10,19 +10,16 @@ import {
 } from "react-bootstrap";
 
 import OperationDialog from "../common/OperationDialog";
+import AdminSubPage from "./AdminSubPage";
+
 import { User, AuthUser } from "@/services/user";
+import { getHttpUserClient } from "@/http/user";
 
 const apiBaseUrl = "/api";
 
-async function fetchUserList(_token: string): Promise<User[]> {
-  const res = await axios.get<User[]>(`${apiBaseUrl}/users`);
-  return res.data;
-}
-
 interface CreateUserInfo {
   username: string;
   password: string;
-  administrator: boolean;
 }
 
 async function createUser(user: CreateUserInfo, token: string): Promise<User> {
@@ -57,16 +54,6 @@ function changePassword(
   });
 }
 
-function changePermission(
-  username: string,
-  newPermission: boolean,
-  token: string
-): Promise<void> {
-  return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, {
-    administrator: newPermission,
-  });
-}
-
 const kChangeUsername = "changeusername";
 const kChangePassword = "changepassword";
 const kChangePermission = "changepermission";
@@ -103,9 +90,9 @@ const UserItem: React.FC<UserCardProps> = (props) => {
         <Col>
           <p className="mb-0 text-primary">{user.username}</p>
           <small
-            className={user.administrator ? "text-danger" : "text-secondary"}
+            className={user.permissions ? "text-danger" : "text-secondary"}
           >
-            {user.administrator ? "administrator" : "user"}
+            {user.permissions ? "administrator" : "user"}
           </small>
         </Col>
         <Col className="col-auto">
@@ -156,14 +143,12 @@ const CreateUserDialog: React.FC<CreateUserDialogProps> = (props) => {
         [
           { type: "text", label: "Username" },
           { type: "text", label: "Password" },
-          { type: "bool", label: "Administrator" },
         ] as const
       }
-      onProcess={([username, password, administrator]) =>
+      onProcess={([username, password]) =>
         props.process({
           username: username,
           password: password,
-          administrator: administrator,
         })
       }
       close={props.close}
@@ -316,15 +301,17 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
 
   useEffect(() => {
     let subscribe = true;
-    void fetchUserList(props.user.token).then((us) => {
-      if (subscribe) {
-        setUsers(us);
-      }
-    });
+    void getHttpUserClient()
+      .list()
+      .then((us) => {
+        if (subscribe) {
+          setUsers(us);
+        }
+      });
     return () => {
       subscribe = false;
     };
-  }, [props.user]);
+  }, []);
 
   let dialogNode: React.ReactNode;
   if (dialog)
@@ -389,26 +376,6 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         );
         break;
       case kChangePermission: {
-        const newPermission = dialog.newPermission;
-        dialogNode = (
-          <UserChangePermissionDialog
-            open
-            close={() => setDialog(null)}
-            username={dialog.username}
-            newPermission={newPermission}
-            process={async () => {
-              await changePermission(dialog.username, newPermission, token);
-              setUsers((oldUsers) => {
-                const users = (oldUsers ?? []).slice();
-                const findedUser = users.find(
-                  (u) => u.username === dialog.username
-                );
-                if (findedUser) findedUser.administrator = newPermission;
-                return users;
-              });
-            }}
-          />
-        );
         break;
       }
     }
@@ -419,26 +386,13 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         <UserItem
           key={user.username}
           user={user}
-          onContextMenu={(item) => {
-            setDialog(
-              item === kChangePermission
-                ? {
-                    type: kChangePermission,
-                    username: user.username,
-                    newPermission: !user.administrator,
-                  }
-                : {
-                    type: item,
-                    username: user.username,
-                  }
-            );
-          }}
+          onContextMenu={(item) => {}}
         />
       );
     });
 
     return (
-      <>
+      <AdminSubPage>
         <Button
           variant="success"
           onClick={() =>
@@ -452,7 +406,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         </Button>
         {userComponents}
         {dialogNode}
-      </>
+      </AdminSubPage>
     );
   } else {
     return <Spinner animation="border" />;
-- 
cgit v1.2.3