diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx index 67f2538..a277b98 100644 --- a/packages/frontend/src/components/App.tsx +++ b/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) => ( ))} - + {/* Error 404 Fallback */} + diff --git a/packages/frontend/src/components/pages/HomePage.tsx b/packages/frontend/src/components/pages/HomePage.tsx index f3e3656..272989c 100644 --- a/packages/frontend/src/components/pages/HomePage.tsx +++ b/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 {} diff --git a/packages/frontend/src/components/pages/support/LinkDirectory.tsx b/packages/frontend/src/components/pages/support/LinkDirectory.tsx index b896837..84964f2 100644 --- a/packages/frontend/src/components/pages/support/LinkDirectory.tsx +++ b/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 = () => (
    {APP_ROUTES.map((route, index) => (
  • - {getLinkDisplayNameForPage(route)} + {getDisplayNameForRoute(route)}
  • ))}
diff --git a/packages/frontend/src/util/approutes.tsx b/packages/frontend/src/util/approutes.tsx deleted file mode 100644 index e68b8cd..0000000 --- a/packages/frontend/src/util/approutes.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import * as H from 'history'; -import * as React from 'react'; -import { RouteProps, Redirect } from 'react-router'; -import { HomePage } from '../components/pages/HomePage'; -import { LinkPage } from '../components/pages/LinkPage'; - -// If necessary, add support for: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor); -type LinkType = string; - -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 linkDisplayName?: string; - - // AppRoutes must have a path - deoptionalize this property - readonly path: string; -} - -/** - * 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; -} - -/** - * Retrieves the humand readable link title/displayed name - * for a given route - * - * @param route - */ -export function getLinkDisplayNameForPage(route: AppRouteProps): string { - return route.linkDisplayName || getLinkForPage(route); -} - -/** - * Specify all pages in this file by defining - * a pages route props and adding it to the - * available APP_ROUTES array - */ - -// Landing/Home page -export const HOME_PAGE: AppRouteProps = { - path: '/home', - linkDisplayName: 'Home', - render: props => -}; - -// Page with searchable, useful links for elite-se-degree program -export const LINK_PAGE: AppRouteProps = { - path: '/links', - linkDisplayName: 'Useful Links', - render: props => -}; - -// Simply redirect to the main page on 404 -export const ERROR_404_PAGE: AppRouteProps = { - path: '/', - render: () => , -}; - -export const APP_ROUTES: AppRouteProps[] = [ - HOME_PAGE, - LINK_PAGE -]; \ No newline at end of file diff --git a/packages/frontend/src/util/routes.tsx b/packages/frontend/src/util/routes.tsx new file mode 100644 index 0000000..2428e6e --- /dev/null +++ b/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 => , +}; + +/** + * 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 => , +}; + +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'; +}