Improve admin routing and add admin header

src/components/AdminHeader/AdminHeader.scss

@@ -0,0 +1,8 @@
+@import "../../assets/scss/globals";
+
+.admin-header {
+  h1 {
+    margin-left: 2rem;
+    font-weight: 500;
+  }
+}

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;

src/components/AdminHeader/index.ts

@@ -0,0 +1,2 @@
+import AdminHeader from "./AdminHeader";
+export default AdminHeader;

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;

src/pages/AdminCommonPage/index.ts

@@ -0,0 +1,2 @@
+import AdminCommonPage from "./AdminCommonPage";
+export default AdminCommonPage;

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>