From 8197c407015241459359a75e0d5b9b1ef48dc553 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Tue, 15 Jan 2019 11:46:51 +0200
Subject: [PATCH] Improve admin routing and add admin header

---
 src/components/AdminHeader/AdminHeader.scss   |  8 ++++++
 src/components/AdminHeader/AdminHeader.tsx    | 26 +++++++++++++++++++
 src/components/AdminHeader/index.ts           |  2 ++
 src/pages/AdminCommonPage/AdminCommonPage.tsx | 21 +++++++++++++++
 src/pages/AdminCommonPage/index.ts            |  2 ++
 src/routes.tsx                                | 22 ++++++++++++----
 6 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AdminHeader/AdminHeader.scss
 create mode 100644 src/components/AdminHeader/AdminHeader.tsx
 create mode 100644 src/components/AdminHeader/index.ts
 create mode 100644 src/pages/AdminCommonPage/AdminCommonPage.tsx
 create mode 100644 src/pages/AdminCommonPage/index.ts

diff --git a/src/components/AdminHeader/AdminHeader.scss b/src/components/AdminHeader/AdminHeader.scss
new file mode 100644
index 0000000..85e9fdc
--- /dev/null
+++ b/src/components/AdminHeader/AdminHeader.scss
@@ -0,0 +1,8 @@
+@import "../../assets/scss/globals";
+
+.admin-header {
+  h1 {
+    margin-left: 2rem;
+    font-weight: 500;
+  }
+}
diff --git a/src/components/AdminHeader/AdminHeader.tsx b/src/components/AdminHeader/AdminHeader.tsx
new file mode 100644
index 0000000..d1b163f
--- /dev/null
+++ b/src/components/AdminHeader/AdminHeader.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Fragment } from "react";
+import { Link } from "react-router-dom";
+// @ts-ignore
+import * as TitleImage from "../../assets/img/SIK_RGB_W_side.png";
+import "./AdminHeader.scss";
+
+export interface AdminHeaderProps {}
+export interface AdminHeaderState {}
+
+class AdminHeader extends React.Component<AdminHeaderProps, AdminHeaderState> {
+  render() {
+    return (
+      <Fragment>
+        <div className="header admin-header">
+          <Link to="/">
+            <img src={TitleImage} />
+          </Link>
+          <h1>Admin panel</h1>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default AdminHeader;
diff --git a/src/components/AdminHeader/index.ts b/src/components/AdminHeader/index.ts
new file mode 100644
index 0000000..8c087b1
--- /dev/null
+++ b/src/components/AdminHeader/index.ts
@@ -0,0 +1,2 @@
+import AdminHeader from "./AdminHeader";
+export default AdminHeader;
diff --git a/src/pages/AdminCommonPage/AdminCommonPage.tsx b/src/pages/AdminCommonPage/AdminCommonPage.tsx
new file mode 100644
index 0000000..3c118fd
--- /dev/null
+++ b/src/pages/AdminCommonPage/AdminCommonPage.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import AdminHeader from "../../components/AdminHeader";
+
+export interface AdminCommonPageProps {
+  page: any;
+}
+export interface AdminCommonPageState { }
+
+class AdminCommonPage extends React.Component<AdminCommonPageProps, AdminCommonPageState> {
+  render() {
+    const Page = this.props.page;
+    return (
+      <React.Fragment>
+        <AdminHeader />
+        <Page {...this.props} />
+      </React.Fragment>
+    );
+  }
+}
+
+export default AdminCommonPage;
diff --git a/src/pages/AdminCommonPage/index.ts b/src/pages/AdminCommonPage/index.ts
new file mode 100644
index 0000000..b46f3f8
--- /dev/null
+++ b/src/pages/AdminCommonPage/index.ts
@@ -0,0 +1,2 @@
+import AdminCommonPage from "./AdminCommonPage";
+export default AdminCommonPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index 325be9a..80d4986 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -10,11 +10,26 @@ import JsonLD from "./components/JsonLD";
 import "./index.scss";
 import AdminFrontPage from "./pages/AdminFrontPage";
 import AdminEventPage from "./pages/AdminEventPage";
+import AdminCommonPage from "./pages/AdminCommonPage";
 
 const renderPage = (Page) => (props): JSX.Element => {
   return <CommonPage page={Page} {...props} />;
 };
 
+const renderAdminPage = (Page) => (props): JSX.Element => {
+  return <AdminCommonPage page={Page} {...props} />;
+};
+
+const commonRoutes = [
+  { path: "/", page: FrontPage },
+  { path: "/kilta", page: GuildPage },
+];
+
+const adminRoutes = [
+  { path: "/admin/events", page: AdminEventPage },
+  { path: "/admin", page: AdminFrontPage },
+];
+
 const Routes = () => (
   <Fragment>
     <Helmet>
@@ -29,11 +44,8 @@ const Routes = () => (
       "url": "https://sik.ayy.fi",
     }} />
     <Switch>
-      <Route exact path="/" render={renderPage(FrontPage)} />
-      <Route path="/kilta" render={renderPage(GuildPage)} />
-
-      <Route path="/admin/events" render={renderPage(AdminEventPage)} />
-      <Route path="/admin" render={renderPage(AdminFrontPage)} />
+      { commonRoutes.map(r => <Route exact path={r.path} render={renderPage(r.page) }/>) }
+      { adminRoutes.map(r => <Route exact path={r.path} render={renderAdminPage(r.page) }/>) }
       <Route component={NotFoundPage} />
     </Switch>
   </Fragment>