From 8f5ffab46b18eb30dfebeb8407435dd85dc35232 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/views/admin/Admin.tsx | 64 ++++++----------------------------
 1 file changed, 11 insertions(+), 53 deletions(-)

(limited to 'FrontEnd/src/app/views/admin/Admin.tsx')

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>
   );
-- 
cgit v1.2.3