remove routing package and reimplement old routing style #13

packages/frontend/package.json

@@ -26,7 +26,6 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "elite-feature-flags": "^1.0.0",
-    "elite-configuration": "^1.0.0",
-    "elite-routing": "^1.0.0"
+    "elite-configuration": "^1.0.0"
   }
 }

packages/frontend/src/components/App.tsx

@@ -1,27 +1,25 @@
+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, Redirect } from 'react-router';
+import { Redirect, Route, Switch } from 'react-router';
 import { Router } from 'react-router-dom';
 import history from '../util/history';
-import { FeatureFlagsProvider } from 'elite-feature-flags';
-import { Configuration } from 'elite-types';
-import { getConfiguration } from 'elite-configuration';
-import { getAllRegisteredAppRoutes } from 'elite-routing';
-import { AppPaths, registerRoutes } from '../util/routes';
+import { AppPath, APP_ROUTES } from '../util/routes';
 
 // Global bootstrap: install subsystems and load configuration
-registerRoutes();
 const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
   <FeatureFlagsProvider value={configuration.featureMap}>
     <Router history={history}>
       <Switch>
-        {getAllRegisteredAppRoutes().map((routeProps, index) => (
+        {APP_ROUTES.map((routeProps, index) => (
           <Route key={index} {...routeProps} />
         ))}
         {/* Error 404 Fallback */}
-        <Redirect to={AppPaths.HOME} />
+        <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,10 +1,10 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { getLinkForRoute, getDisplayNameForRoute, getAllRegisteredAppRoutes } from 'elite-routing';
+import { APP_ROUTES, getDisplayNameForRoute, getLinkForRoute } from '../../../util/routes';
 
 export const LinkDirectory = () => (
   <ul>
-    {getAllRegisteredAppRoutes().map((route, index) => (
+    {APP_ROUTES.map((route, index) => (
       <li key={index}>
         <Link to={getLinkForRoute(route)}>{getDisplayNameForRoute(route)}</Link>
       </li>

packages/frontend/src/util/routes.tsx

@@ -1,22 +1,105 @@
 import * as React from 'react';
 import { HomePage } from '../components/pages/HomePage';
 import { LinkPage } from '../components/pages/LinkPage';
-import { registerAppRoute } from 'elite-routing';
+import { RouteProps } from 'react-router';
 
-export enum AppPaths {
+// 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);
 }
 
-export function registerRoutes() {
-  registerAppRoute({
-    path: AppPaths.HOME,
-    displayName: 'Home',
-    render: props => <HomePage {...props} />,
-  });
-  registerAppRoute({
-    path: AppPaths.LINK,
-    displayName: 'Useful Links',
-    render: props => <LinkPage {...props} />,
-  });
+/**
+ * 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';
 }

packages/frontend/tsconfig.json

@@ -13,9 +13,6 @@
     {
       "path": "../feature-flags"
     },
-    {
-      "path": "../routing"
-    },
     {
       "path": "../types"
     }