diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx index 67f2538..dd2be52 100644 --- a/packages/frontend/src/components/App.tsx +++ b/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) => ( ))} - + {/* Error 404 Fallback */} + diff --git a/packages/frontend/src/components/pages/HomePage.tsx b/packages/frontend/src/components/pages/HomePage.tsx index f3e3656..ec66118 100644 --- a/packages/frontend/src/components/pages/HomePage.tsx +++ b/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) => ( - <> -

Main Page

- - Elite Sexyz is currently under construction. See discord main channel for more information - - - - -); +@Routed({ path: '/home', displayName: 'Home' }) +export class HomePage extends React.PureComponent { + render() { + return ( + <> +

Main Page

+ + Elite Sexyz is currently under construction. See discord main channel for more information + + + + + ); + } +} diff --git a/packages/frontend/src/components/pages/LinkPage.tsx b/packages/frontend/src/components/pages/LinkPage.tsx index ef63230..717ba59 100644 --- a/packages/frontend/src/components/pages/LinkPage.tsx +++ b/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) => ( - <> -

Useful Links List

- - - - +@Routed({ path: '/link', displayName: 'Useful Links' }) +export class LinkPage extends React.PureComponent { + render() { + return ( + <> +

Useful Links List

+ + + + - + - - -); + + + ); + } +} diff --git a/packages/frontend/src/components/pages/support/LinkDirectory.tsx b/packages/frontend/src/components/pages/support/LinkDirectory.tsx index b896837..8180d69 100644 --- a/packages/frontend/src/components/pages/support/LinkDirectory.tsx +++ b/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 = () => (
    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/routing.tsx b/packages/frontend/src/util/routing.tsx new file mode 100644 index 0000000..b659120 --- /dev/null +++ b/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[] = []; diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json index c4af582..1d4b811 100644 --- a/packages/frontend/tsconfig.json +++ b/packages/frontend/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { "rootDir": "src", "outDir": "dist", - "baseUrl": "src" + "baseUrl": "src", + "experimentalDecorators": true }, "include": ["src/**/*"], "references": [