Merge pull request #19 from elite-se/feature/decorator-routing

Feature/decorator routing

packages/frontend/src/components/App.tsx

@@ -1,13 +1,14 @@
+import { getConfiguration } from 'elite-configuration';
+import { FeatureFlagsProvider } from 'elite-feature-flags';
+import { Configuration } from 'elite-types';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
-import { Route, Switch } from 'react-router';
+import { Redirect, Route, Switch } 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 { AppPath, APP_ROUTES } from '../util/routes';
 
+// Global bootstrap: install subsystems and load configuration
 const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
@@ -17,7 +18,8 @@ export const AppComponent = () => (
         {APP_ROUTES.map((routeProps, index) => (
           <Route key={index} {...routeProps} />
         ))}
-        <Route {...ERROR_404_PAGE} />
+        {/* Error 404 Fallback */}
+        <Redirect to={AppPath.HOME} />
       </Switch>
     </Router>
   </FeatureFlagsProvider>

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

@@ -1,8 +1,8 @@
+import { Divider } from '@material-ui/core';
+import { FeatureFlag } from 'elite-feature-flags';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { LinkDirectory } from './support/LinkDirectory';
-import { Divider } from '@material-ui/core';
-import { FeatureFlag } from 'elite-feature-flags';
 
 export interface HomePageProps extends RouteComponentProps {}
 

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage } from '../../../util/approutes';
+import { APP_ROUTES, getDisplayNameForRoute, getLinkForRoute } from '../../../util/routes';
 
 export const LinkDirectory = () => (
   <ul>
     {APP_ROUTES.map((route, index) => (
       <li key={index}>
-        <Link to={getLinkForPage(route)}>{getLinkDisplayNameForPage(route)}</Link>
+        <Link to={getLinkForRoute(route)}>{getDisplayNameForRoute(route)}</Link>
       </li>
     ))}
   </ul>

packages/frontend/src/util/routes.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { HomePage } from '../components/pages/HomePage';
+import { LinkPage } from '../components/pages/LinkPage';
+import { RouteProps } from 'react-router';
+
+// If necessary, add support for: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
+type LinkType = string;
+
+/**
+ * Each Approute can have a specific link (i.e., path with filled parameter placeholders),
+ * a display Name, i.e., text of the link and a nonoptional (!) path
+ *
+ * TODO: move to types package to be able to move app routes to their own
+ * individual packages
+ */
+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: AppPath;
+}
+
+/**
+ * All available paths in this app
+ */
+export enum AppPath {
+  HOME = '/home',
+  LINK = '/link',
+  ERROR = '/',
+}
+
+/**
+ * Route for the Home page of this app
+ *
+ * TODO: replace with imported version (except of path: property)
+ * once HomePage is moved to different package
+ */
+const HOME_ROUTE: AppRouteProps = {
+  path: AppPath.HOME,
+  displayName: 'Home',
+  render: props => <HomePage {...props} />,
+};
+
+/**
+ * Route for the Link page of this app
+ *
+ * TODO: replace `with imported version (except of path: property
+ * once LinkPage is moved to different package)
+ */
+const LINK_ROUTE: AppRouteProps = {
+  path: AppPath.LINK,
+  displayName: 'Useful Links',
+  render: props => <LinkPage {...props} />,
+};
+
+export const APP_ROUTES: AppRouteProps[] = [HOME_ROUTE, LINK_ROUTE];
+
+/**
+ * Retrieves the url which other pages can use to link to a certain
+ * app path
+ *
+ * @param route
+ */
+export function getLinkForRoute(route: AppRouteProps): LinkType {
+  return route.link || route.path;
+}
+
+/**
+ * Retrieves the url which other pages can use to link to a certain
+ * app path
+ *
+ * @param path
+ */
+export function getLinkForPath(path: AppPath): LinkType {
+  const route = APP_ROUTES.find(route => route.path == path);
+  if (!route) return AppPath.ERROR;
+
+  return getLinkForRoute(route);
+}
+
+/**
+ * Retrieves the human readable link title/displayed name for
+ * a given route
+ *
+ * @param route
+ */
+export function getDisplayNameForRoute(route: AppRouteProps): string {
+  return route.displayName || getLinkForRoute(route);
+}
+
+/**
+ * Retrieves the human readable link title/displayed name for
+ * a given path
+ *
+ * @param path
+ */
+export function getDisplayNameForPath(path: AppPath): string {
+  const route = APP_ROUTES.find(route => route.path == path);
+  return route ? getDisplayNameForRoute(route) : 'Error';
+}