...

7 files changed, 73 insertions, 40 deletions

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index b8cc464e..e3c1c5b9 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -10,6 +10,8 @@
 @import './views/timeline/timeline'

 @import './views/user/user'

 

+@import './views/admin/admin'

+

 body

   margin: 0

 

diff --git a/FrontEnd/src/app/views/admin/Admin.tsx b/FrontEnd/src/app/views/admin/Admin.tsx
index e17da5bc..ac640700 100644
--- a/FrontEnd/src/app/views/admin/Admin.tsx
+++ b/FrontEnd/src/app/views/admin/Admin.tsx
@@ -1,9 +1,12 @@
 import React, { Fragment } from "react";
 import { Redirect, Route, Switch, useRouteMatch, match } from "react-router";
+import { Container } from "react-bootstrap";
 
 import { AuthUser } from "@/services/user";
 
+import AdminNav from "./AdminNav";
 import UserAdmin from "./UserAdmin";
+import HighlightTimelineAdmin from "./HighlightTimelineAdmin";
 
 interface AdminProps {
   user: AuthUser;
@@ -20,9 +23,18 @@ const Admin: React.FC<AdminProps> = ({ user }) => {
           {(p) => {
             const match = p.match as match<{ name: string }>;
             const name = match.params["name"];
-            if (name === "users") {
-              return <UserAdmin user={user} />;
-            }
+            return (
+              <Container>
+                <AdminNav />
+                {(() => {
+                  if (name === "users") {
+                    return <UserAdmin user={user} />;
+                  } else if (name === "highlighttimelines") {
+                    return <HighlightTimelineAdmin user={user} />;
+                  }
+                })()}
+              </Container>
+            );
           }}
         </Route>
       </Switch>
diff --git a/FrontEnd/src/app/views/admin/AdminNav.tsx b/FrontEnd/src/app/views/admin/AdminNav.tsx
new file mode 100644
index 00000000..040b479f
--- /dev/null
+++ b/FrontEnd/src/app/views/admin/AdminNav.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { useHistory, useRouteMatch } from "react-router";
+
+const AdminNav: React.FC = () => {
+  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" className="my-2">
+      <Nav.Item>
+        <Nav.Link
+          active={name === "users"}
+          onClick={() => {
+            toggle("users");
+          }}
+        >
+          Users
+        </Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link
+          active={name === "highlighttimelines"}
+          onClick={() => {
+            toggle("highlighttimelines");
+          }}
+        >
+          Highlight Timelines
+        </Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+};
+
+export default AdminNav;
diff --git a/FrontEnd/src/app/views/admin/AdminSubPage.tsx b/FrontEnd/src/app/views/admin/AdminSubPage.tsx
deleted file mode 100644
index 5efe1ee3..00000000
--- a/FrontEnd/src/app/views/admin/AdminSubPage.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import { Container, 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 (
-    <Container>
-      <Nav variant="tabs" className="my-2">
-        <Nav.Item>
-          <Nav.Link
-            active={name === "users"}
-            onClick={() => {
-              toggle("users");
-            }}
-          >
-            Users
-          </Nav.Link>
-        </Nav.Item>
-      </Nav>
-      {children}
-    </Container>
-  );
-};
-
-export default AdminSubPage;
diff --git a/FrontEnd/src/app/views/admin/HighlightTimelineAdmin.tsx b/FrontEnd/src/app/views/admin/HighlightTimelineAdmin.tsx
new file mode 100644
index 00000000..3de7d5a6
--- /dev/null
+++ b/FrontEnd/src/app/views/admin/HighlightTimelineAdmin.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { AuthUser } from "@/services/user";
+
+export interface HighlightTimelineAdminProps {
+  user: AuthUser;
+}
+
+const HighlightTimelineAdmin: React.FC<HighlightTimelineAdminProps> = () => {
+  return <>This is highlight timeline administration page.</>;
+};
+
+export default HighlightTimelineAdmin;
diff --git a/FrontEnd/src/app/views/admin/UserAdmin.tsx b/FrontEnd/src/app/views/admin/UserAdmin.tsx
index c78490d8..37ad2ef7 100644
--- a/FrontEnd/src/app/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/app/views/admin/UserAdmin.tsx
@@ -9,7 +9,6 @@ import {
 } from "react-bootstrap";
 
 import OperationDialog from "../common/OperationDialog";
-import AdminSubPage from "./AdminSubPage";
 
 import { User, AuthUser } from "@/services/user";
 import { getHttpUserClient, HttpUser } from "@/http/user";
@@ -266,7 +265,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
     });
 
     return (
-      <AdminSubPage>
+      <>
         <Row className="justify-content-end my-2">
           <Col xs="auto">
             <Button
@@ -283,7 +282,7 @@ const UserAdmin: React.FC<UserAdminProps> = (props) => {
         </Row>
         {userComponents}
         {dialogNode}
-      </AdminSubPage>
+      </>
     );
   } else {
     return <Spinner animation="border" />;
diff --git a/FrontEnd/src/app/views/admin/admin.sass b/FrontEnd/src/app/views/admin/admin.sass
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/FrontEnd/src/app/views/admin/admin.sass