Merge pull request #189 from crupest/admin

Refactor front end to use the new permission system. Enhance admin page.

1 files changed, 28 insertions, 55 deletions

diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx
index 9c0250e7..446cd36d 100644
--- a/FrontEnd/src/app/views/admin/Admin.tsx
+++ b/FrontEnd/src/app/views/admin/Admin.tsx
@@ -1,72 +1,45 @@
 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 { Container } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
 
-import { UserWithToken } from "@/services/user";
+import { AuthUser } from "@/services/user";
 
+import AdminNav from "./AdminNav";
 import UserAdmin from "./UserAdmin";
+import HighlightTimelineAdmin from "./HighlightTimelineAdmin";
 
 interface AdminProps {
-  user: UserWithToken;
+  user: AuthUser;
 }
 
-const Admin: React.FC<AdminProps> = (props) => {
-  const match = useRouteMatch();
-  const history = useHistory();
-  type TabNames = "users" | "more";
-
-  const tabName = history.location.pathname.replace(match.path + "/", "");
+const Admin: React.FC<AdminProps> = ({ user }) => {
+  useTranslation("admin");
 
-  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>
-    );
-  };
+  const match = useRouteMatch();
 
   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"];
+            return (
+              <Container>
+                <AdminNav />
+                {(() => {
+                  if (name === "users") {
+                    return <UserAdmin user={user} />;
+                  } else if (name === "highlighttimelines") {
+                    return <HighlightTimelineAdmin user={user} />;
+                  }
+                })()}
+              </Container>
+            );
+          }}
+        </Route>
       </Switch>
     </Fragment>
   );