From ea58e75e2a6387fe26bc92b60e51dc90b66cd596 Mon Sep 17 00:00:00 2001
From: Dominik Horn <dominik.horn@tum.de>
Date: Thu, 27 Feb 2020 16:05:26 +0100
Subject: [PATCH] revert to less declarative routing #13

* avoid having to forcefully require components
* avoid namespace/path collisions more elegantly
* make ordering pages (regarding navbar) easily feasable
---
 packages/frontend/src/components/App.tsx      |  9 ++----
 .../src/components/pages/HomePage.tsx         | 27 +++++++----------
 .../src/components/pages/LinkPage.tsx         | 29 +++++++------------
 packages/frontend/src/util/routes.ts          |  4 ---
 packages/frontend/src/util/routes.tsx         | 22 ++++++++++++++
 packages/routing/src/routing.tsx              | 18 ------------
 6 files changed, 46 insertions(+), 63 deletions(-)
 delete mode 100644 packages/frontend/src/util/routes.ts
 create mode 100644 packages/frontend/src/util/routes.tsx

diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx
index 64e7c14..4fa933c 100644
--- a/packages/frontend/src/components/App.tsx
+++ b/packages/frontend/src/components/App.tsx
@@ -7,13 +7,10 @@ import { FeatureFlagsProvider } from 'elite-feature-flags';
 import { Configuration } from 'elite-types';
 import { getConfiguration } from 'elite-configuration';
 import { getAllRegisteredAppRoutes } from 'elite-routing';
-import { AppPaths } from '../util/routes';
-
-// Files must be required (early!) for decorator to work
-// TODO: move to routes.ts
-require('../components/pages/HomePage');
-require('../components/pages/LinkPage');
+import { AppPaths, registerRoutes } from '../util/routes';
 
+// Global bootstrap: install subsystems and load configuration
+registerRoutes();
 const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
diff --git a/packages/frontend/src/components/pages/HomePage.tsx b/packages/frontend/src/components/pages/HomePage.tsx
index 0961e64..f3e3656 100644
--- a/packages/frontend/src/components/pages/HomePage.tsx
+++ b/packages/frontend/src/components/pages/HomePage.tsx
@@ -3,23 +3,16 @@ import { RouteComponentProps } from 'react-router';
 import { LinkDirectory } from './support/LinkDirectory';
 import { Divider } from '@material-ui/core';
 import { FeatureFlag } from 'elite-feature-flags';
-import { Routed } from 'elite-routing';
-import { AppPaths } from '../../util/routes';
 
 export interface HomePageProps extends RouteComponentProps {}
 
-@Routed({ path: AppPaths.HOME, displayName: 'Home' })
-export class HomePage extends React.PureComponent<HomePageProps> {
-  render() {
-    return (
-      <>
-        <h1>Main Page</h1>
-        <FeatureFlag featureName="under-construction-message">
-          Elite Sexyz is currently under construction. See discord main channel for more information
-        </FeatureFlag>
-        <Divider />
-        <LinkDirectory />
-      </>
-    );
-  }
-}
+export const HomePage = (props: HomePageProps) => (
+  <>
+    <h1>Main Page</h1>
+    <FeatureFlag featureName="under-construction-message">
+      Elite Sexyz is currently under construction. See discord main channel for more information
+    </FeatureFlag>
+    <Divider />
+    <LinkDirectory />
+  </>
+);
diff --git a/packages/frontend/src/components/pages/LinkPage.tsx b/packages/frontend/src/components/pages/LinkPage.tsx
index 989a7ca..ef63230 100644
--- a/packages/frontend/src/components/pages/LinkPage.tsx
+++ b/packages/frontend/src/components/pages/LinkPage.tsx
@@ -1,28 +1,21 @@
 import { Divider, List } from '@material-ui/core';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { Routed } from 'elite-routing';
-import { AppPaths } from '../../util/routes';
 import { LinkListItem } from '../general/LinkListItem';
 import { LinkDirectory } from './support/LinkDirectory';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
-@Routed({ path: AppPaths.LINK, displayName: 'Useful Links' })
-export class LinkPage extends React.PureComponent<LinkPageProps> {
-  render() {
-    return (
-      <>
-        <h1>Useful Links List</h1>
-        <List>
-          <LinkListItem href={'https://elite-se.informatik.uni-augsburg.de'} title={'Main Webpage'} />
-          <LinkListItem href={'https://github.com/elite-se/elite-se.protokolle'} title={'Exam Protocols'} />
-        </List>
+export const LinkPage = (props: LinkPageProps) => (
+  <>
+    <h1>Useful Links List</h1>
+    <List>
+      <LinkListItem href={'https://elite-se.informatik.uni-augsburg.de'} title={'Main Webpage'} />
+      <LinkListItem href={'https://github.com/elite-se/elite-se.protokolle'} title={'Exam Protocols'} />
+    </List>
 
-        <Divider />
+    <Divider />
 
-        <LinkDirectory />
-      </>
-    );
-  }
-}
+    <LinkDirectory />
+  </>
+);
diff --git a/packages/frontend/src/util/routes.ts b/packages/frontend/src/util/routes.ts
deleted file mode 100644
index 09af683..0000000
--- a/packages/frontend/src/util/routes.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum AppPaths {
-  HOME = '/home',
-  LINK = '/link',
-}
diff --git a/packages/frontend/src/util/routes.tsx b/packages/frontend/src/util/routes.tsx
new file mode 100644
index 0000000..da2b0b0
--- /dev/null
+++ b/packages/frontend/src/util/routes.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HomePage } from '../components/pages/HomePage';
+import { LinkPage } from '../components/pages/LinkPage';
+import { registerAppRoute } from 'elite-routing';
+
+export enum AppPaths {
+  HOME = '/home',
+  LINK = '/link',
+}
+
+export function registerRoutes() {
+  registerAppRoute({
+    path: AppPaths.HOME,
+    displayName: 'Home',
+    render: props => <HomePage {...props} />,
+  });
+  registerAppRoute({
+    path: AppPaths.LINK,
+    displayName: 'Useful Links',
+    render: props => <LinkPage {...props} />,
+  });
+}
diff --git a/packages/routing/src/routing.tsx b/packages/routing/src/routing.tsx
index 494e99e..3b125f3 100644
--- a/packages/routing/src/routing.tsx
+++ b/packages/routing/src/routing.tsx
@@ -20,24 +20,6 @@ export interface AppRouteProps extends RouteProps {
   readonly path: string;
 }
 
-/**
- * The Routed decorator automatically creates a route for
- * the annotated top level page component
- *
- * @param props route properties
- */
-export function Routed<T extends React.Component<P> & { render: () => any }, P = any>(
-  props: AppRouteProps,
-): (c: new (props: any) => T) => new (props: any) => T {
-  return constructor => (
-    registerAppRoute({
-      render: p => React.createElement(constructor, p),
-      ...props,
-    }),
-    constructor
-  );
-}
-
 /**
  * Container for all registered app routes
  */