add link directory to make pages accessible

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

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
-import { getLinkForPage, LINK_PAGE } from '../../util/approutes';
+import { LinkDirectory } from './support/LinkDirectory';
+import { Divider } from '@material-ui/core';
 
-export interface HomePageProps extends RouteComponentProps { }
+export interface HomePageProps extends RouteComponentProps {}
 
 export const HomePage = (props: HomePageProps) => (
-  <div>
-    This page is under construction
-    <br />
-    <ul>
-      <li>
-        <Link to={getLinkForPage(LINK_PAGE)}>Collection of Useful Links</Link>
-      </li>
-    </ul>
-  </div>
-);
+  <>
+    <h1>Main Page</h1>
+    Elite Sexyz is currently under construction. See discord main channel for more information
+    <Divider />
+    <LinkDirectory />
+  </>
+);

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

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

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

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

packages/frontend/src/util/approutes.tsx

@@ -12,6 +12,9 @@ export interface AppRouteProps extends RouteProps {
   // 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;
 }
@@ -25,6 +28,16 @@ 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
@@ -34,12 +47,14 @@ export function getLinkForPage(route: AppRouteProps): LinkType {
 // Landing/Home page
 export const HOME_PAGE: AppRouteProps = {
   path: '/home',
+  linkDisplayName: 'Home',
   render: props => <HomePage {...props} />
 };
 
 // Page with searchable, useful links for elite-se-degree program
 export const LINK_PAGE: AppRouteProps = {
   path: '/links',
+  linkDisplayName: 'Useful Links',
   render: props => <LinkPage {...props} />
 };