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

@@ -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 = () => (

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 />
+  </>
+);

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 />
+  </>
+);

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} />,
+  });
+}

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
  */