implement basic @routed annotation idea #13

packages/frontend/src/components/App.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
-import { Route, Switch } from 'react-router';
+import { Route, Switch, Redirect } from 'react-router';
 import { Router } from 'react-router-dom';
-import { APP_ROUTES, ERROR_404_PAGE } from '../util/approutes';
 import history from '../util/history';
 import { FeatureFlagsProvider } from 'elite-feature-flags';
 import { Configuration } from 'elite-types';
 import { getConfiguration } from 'elite-configuration';
+import { APP_ROUTES } from '../util/routing';
+
+// Files must be required for decorator to work
+require('../components/pages/HomePage');
+require('../components/pages/LinkPage');
 
 const configuration: Configuration = getConfiguration();
 
@@ -17,7 +21,8 @@ export const AppComponent = () => (
         {APP_ROUTES.map((routeProps, index) => (
           <Route key={index} {...routeProps} />
         ))}
-        <Route {...ERROR_404_PAGE} />
+        {/* Error 404 Fallback */}
+        <Redirect to={'/home'} />
       </Switch>
     </Router>
   </FeatureFlagsProvider>

packages/frontend/src/components/pages/HomePage.tsx

@@ -3,16 +3,22 @@ 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 '../../util/routing';
 
 export interface HomePageProps extends RouteComponentProps {}
 
-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 />
-  </>
-);
+@Routed({ path: '/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 />
+      </>
+    );
+  }
+}

packages/frontend/src/components/pages/LinkPage.tsx

@@ -1,21 +1,27 @@
 import { Divider, List } from '@material-ui/core';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
+import { Routed } from '../../util/routing';
 import { LinkListItem } from '../general/LinkListItem';
 import { LinkDirectory } from './support/LinkDirectory';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
-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>
+@Routed({ path: '/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>
 
-    <Divider />
+        <Divider />
 
-    <LinkDirectory />
-  </>
-);
+        <LinkDirectory />
+      </>
+    );
+  }
+}

packages/frontend/src/components/pages/support/LinkDirectory.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage } from '../../../util/approutes';
+import { APP_ROUTES, getLinkForPage, getLinkDisplayNameForPage } from '../../../util/routing';
 
 export const LinkDirectory = () => (
   <ul>

packages/frontend/src/util/routing.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { RouteProps } from 'react-router';
+
+// TODO: move to separate package
+
+/**
+ * The Routed decorator automatically creates a route for
+ * the annotated top level page component
+ *
+ * @param props route properties
+ */
+export function Routed(props: AppRouteProps) {
+  console.log('producing route decorator:', props);
+  return (constructor: any) => {
+    APP_ROUTES.push({
+      render: p => React.createElement(constructor, p),
+      ...props,
+    });
+    console.log('added route for', constructor.name);
+    return constructor;
+  };
+}
+
+// If necessary, add support for: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
+type LinkType = string;
+
+// TODO: Add documentation
+export interface AppRouteProps extends RouteProps {
+  // Use this if the link target differs from the path specification,
+  // i.e., if the path url contains paramter specifications etc
+  readonly link?: LinkType;
+
+  // link text (Human readable!)
+  readonly displayName?: string;
+
+  // AppRoutes must have a path - deoptionalize this property
+  readonly path: string;
+}
+
+// TODO: replace with proper container/service class
+/**
+ * Retrieves the url which other pages can use
+ * to link to a certain route
+ * @param route the route to link to
+ */
+export function getLinkForPage(route: AppRouteProps): LinkType {
+  return route.link || route.path;
+}
+
+// TODO: replace with proper container/service class
+/**
+ * Retrieves the humand readable link title/displayed name
+ * for a given route
+ *
+ * @param route
+ */
+export function getLinkDisplayNameForPage(route: AppRouteProps): string {
+  return route.displayName || getLinkForPage(route);
+}
+
+// TODO: replace with proper container/service class
+export const APP_ROUTES: AppRouteProps[] = [];

packages/frontend/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "dist",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "experimentalDecorators": true
   },
   "include": ["src/**/*"],
   "references": [