From b1fa0df0c7da861ca793b735a71f7366657a1d7d Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Thu, 27 Feb 2020 18:07:04 +0100 Subject: [PATCH 1/6] add bare minimum appbar #10 --- packages/frontend/src/app.tsx | 14 +++-- .../src/components/general/NavigationBar.tsx | 51 +++++++++++++++++++ packages/frontend/src/index.html | 2 +- 3 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 packages/frontend/src/components/general/NavigationBar.tsx diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx index 2f81e20..25eb02c 100644 --- a/packages/frontend/src/app.tsx +++ b/packages/frontend/src/app.tsx @@ -5,12 +5,13 @@ import { hot } from 'react-hot-loader'; import { Redirect, Route, Switch } from 'react-router'; import { Router } from 'react-router-dom'; import history from './util/history'; -import { APP_ROUTES } from './util/routes'; +import { APP_ROUTES, getDisplayNameForRoute } from './util/routes'; import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components'; import { Divider } from '@material-ui/core'; import { LinkDirectory } from './util/linkDirectory'; +import { NavigationBar } from 'components/general/NavigationBar'; -// Global bootstrap: install subsystems and load configuration +// Global bootstrap: load configuration const configuration: Configuration = getConfiguration(); export const AppComponent = () => ( @@ -18,11 +19,14 @@ export const AppComponent = () => ( - {APP_ROUTES.map((routeProps, index) => ( - + {APP_ROUTES.map((route, index) => ( + <> + + + ))} {/* Error 404 Fallback */} - + } /> diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx new file mode 100644 index 0000000..5cad539 --- /dev/null +++ b/packages/frontend/src/components/general/NavigationBar.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { + AppBar, + Toolbar, + makeStyles, + fade, + IconButton, + Theme, + createStyles, + Typography, + Button, +} from '@material-ui/core'; +import MenuIcon from '@material-ui/icons/Menu'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + }), +); + +export interface NavigationBarProps { + readonly title: string; +} + +export const NavigationBar = (props: NavigationBarProps) => { + const classes = useStyles(); + + return ( +
+ + + + + + + {props.title} + + + + +
+ ); +}; diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html index 04e0890..cdb0bc3 100644 --- a/packages/frontend/src/index.html +++ b/packages/frontend/src/index.html @@ -49,7 +49,7 @@ Elite-SE | Sexy - +
From c9ed65f48dc881412def79b847c636ad3c51a838 Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Thu, 27 Feb 2020 18:37:57 +0100 Subject: [PATCH 2/6] implement swipeable bottom drawer for APP_ROUTES #10 --- packages/frontend/src/app.tsx | 14 +--- .../src/components/general/NavigationBar.tsx | 51 ------------- .../general/navigation/NavigationBar.tsx | 71 +++++++++++++++++++ .../general/navigation/RouteDrawer.tsx | 48 +++++++++++++ packages/frontend/src/util/linkDirectory.tsx | 13 ---- packages/home/src/home.page.tsx | 19 ++--- packages/link/src/link.page.tsx | 2 +- 7 files changed, 134 insertions(+), 84 deletions(-) delete mode 100644 packages/frontend/src/components/general/NavigationBar.tsx create mode 100644 packages/frontend/src/components/general/navigation/NavigationBar.tsx create mode 100644 packages/frontend/src/components/general/navigation/RouteDrawer.tsx delete mode 100644 packages/frontend/src/util/linkDirectory.tsx diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx index 25eb02c..3c72b4c 100644 --- a/packages/frontend/src/app.tsx +++ b/packages/frontend/src/app.tsx @@ -1,3 +1,4 @@ +import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components'; import { getConfiguration } from 'elite-configuration'; import { AppPath, Configuration } from 'elite-types'; import * as React from 'react'; @@ -5,11 +6,7 @@ import { hot } from 'react-hot-loader'; import { Redirect, Route, Switch } from 'react-router'; import { Router } from 'react-router-dom'; import history from './util/history'; -import { APP_ROUTES, getDisplayNameForRoute } from './util/routes'; -import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components'; -import { Divider } from '@material-ui/core'; -import { LinkDirectory } from './util/linkDirectory'; -import { NavigationBar } from 'components/general/NavigationBar'; +import { APP_ROUTES } from './util/routes'; // Global bootstrap: load configuration const configuration: Configuration = getConfiguration(); @@ -20,16 +17,11 @@ export const AppComponent = () => ( {APP_ROUTES.map((route, index) => ( - <> - - - + ))} {/* Error 404 Fallback */} } /> - - diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx deleted file mode 100644 index 5cad539..0000000 --- a/packages/frontend/src/components/general/NavigationBar.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { - AppBar, - Toolbar, - makeStyles, - fade, - IconButton, - Theme, - createStyles, - Typography, - Button, -} from '@material-ui/core'; -import MenuIcon from '@material-ui/icons/Menu'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - flexGrow: 1, - }, - menuButton: { - marginRight: theme.spacing(2), - }, - title: { - flexGrow: 1, - }, - }), -); - -export interface NavigationBarProps { - readonly title: string; -} - -export const NavigationBar = (props: NavigationBarProps) => { - const classes = useStyles(); - - return ( -
- - - - - - - {props.title} - - - - -
- ); -}; diff --git a/packages/frontend/src/components/general/navigation/NavigationBar.tsx b/packages/frontend/src/components/general/navigation/NavigationBar.tsx new file mode 100644 index 0000000..8f4552f --- /dev/null +++ b/packages/frontend/src/components/general/navigation/NavigationBar.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { + AppBar, + Toolbar, + makeStyles, + fade, + IconButton, + Theme, + createStyles, + Typography, + Button, +} from '@material-ui/core'; +import MenuIcon from '@material-ui/icons/Menu'; +import { RouteDrawer } from './RouteDrawer'; +import h from '../../../util/history'; +import { getLinkForPath } from 'util/routes'; +import { AppPath } from 'elite-types'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + }), +); + +export interface NavigationBarProps { + readonly title?: string; +} + +export const NavigationBar = (props: NavigationBarProps) => { + const classes = useStyles(); + const [routeDrawerOpen, setRouteDrawerOpen] = React.useState(false); + const title = props.title || getLinkForPath(h.location.pathname as AppPath); + + return ( + <> +
+ + + setRouteDrawerOpen(true)} + > + + + + {title} + + + + +
+ + setRouteDrawerOpen(true)} + onClose={() => setRouteDrawerOpen(false)} + /> + + ); +}; diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx new file mode 100644 index 0000000..cee3927 --- /dev/null +++ b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx @@ -0,0 +1,48 @@ +import { createStyles, List, ListItem, ListItemText, makeStyles, SwipeableDrawer, Theme } from '@material-ui/core'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from 'util/routes'; + +export interface RouteDrawerProps { + readonly isOpen: boolean; + readonly onOpen: () => void; + readonly onClose: () => void; +} + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + list: { + width: 250, + }, + fullList: { + width: 'auto', + }, + }), +); + +export const RouteDrawer = (props: RouteDrawerProps) => { + const classes = useStyles(); + return ( + +
+ + {APP_ROUTES.map(route => ( + + + + + + ))} + + {/** TODO: bellow is testing code */} + {/* + {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( + + {index % 2 === 0 ? : } + + + ))} */} +
+ + ); +}; diff --git a/packages/frontend/src/util/linkDirectory.tsx b/packages/frontend/src/util/linkDirectory.tsx deleted file mode 100644 index 4972ee9..0000000 --- a/packages/frontend/src/util/linkDirectory.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { APP_ROUTES, getDisplayNameForRoute, getLinkForRoute } from './routes'; - -export const LinkDirectory = () => ( -
    - {APP_ROUTES.map((route, index) => ( -
  • - {getDisplayNameForRoute(route)} -
    • - ))} -
-); diff --git a/packages/home/src/home.page.tsx b/packages/home/src/home.page.tsx index aac8236..720698b 100644 --- a/packages/home/src/home.page.tsx +++ b/packages/home/src/home.page.tsx @@ -14,11 +14,14 @@ export const HOME_ROUTE: AppRoute = { render: props => , }; -export const HomePage = (props: HomePageProps) => ( - <> -

Main Page

- - Elite Sexyz is currently under construction. See discord main channel for more information - - -); +export const HomePage = (props: HomePageProps) => { + return ( + <> + {/* */} + + + Elite Sexyz is currently under construction. See discord main channel for more information + + + ); +}; diff --git a/packages/link/src/link.page.tsx b/packages/link/src/link.page.tsx index d7bfdde..a34bb63 100644 --- a/packages/link/src/link.page.tsx +++ b/packages/link/src/link.page.tsx @@ -21,7 +21,7 @@ export const LINK_ROUTE: AppRoute = { export const LinkPage = (props: LinkPageProps) => ( <> -

Useful Links List

+ {/* */} From a1d5099316a59defae44a2f01d4b862776fca6f2 Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Thu, 27 Feb 2020 18:44:07 +0100 Subject: [PATCH 3/6] add icons to APP_ROUTES #10 --- .../components/general/navigation/RouteDrawer.tsx | 12 +++++++++++- packages/types/src/routes/appRoute.type.ts | 5 +++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx index cee3927..ae21c10 100644 --- a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx +++ b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx @@ -1,4 +1,13 @@ -import { createStyles, List, ListItem, ListItemText, makeStyles, SwipeableDrawer, Theme } from '@material-ui/core'; +import { + createStyles, + List, + ListItem, + ListItemText, + makeStyles, + SwipeableDrawer, + Theme, + ListItemIcon, +} from '@material-ui/core'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from 'util/routes'; @@ -28,6 +37,7 @@ export const RouteDrawer = (props: RouteDrawerProps) => { {APP_ROUTES.map(route => ( + {route.icon && {route.icon}} diff --git a/packages/types/src/routes/appRoute.type.ts b/packages/types/src/routes/appRoute.type.ts index 2fd581d..14b9a39 100644 --- a/packages/types/src/routes/appRoute.type.ts +++ b/packages/types/src/routes/appRoute.type.ts @@ -14,8 +14,9 @@ export interface AppRoute extends RouteProps { // link text (Human readable!) readonly displayName?: string; + // optional icon displayed next to the link name + readonly icon?: JSX.Element; + // AppRoutes must have a path - deoptionalize this property readonly path: AppPath; - - render(props: any): any; } From da92d9d35da53e8be1b52b0439267d20e6fe0380 Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Thu, 27 Feb 2020 18:50:37 +0100 Subject: [PATCH 4/6] cleanup route drawer code + rendering #10 * remove underline from links * remove dead code * remove unused imports --- .../general/navigation/RouteDrawer.tsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx index ae21c10..d8bdc0b 100644 --- a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx +++ b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx @@ -10,7 +10,8 @@ import { } from '@material-ui/core'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from 'util/routes'; +import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from '../../../util/routes'; +import h from '../../../util/history'; export interface RouteDrawerProps { readonly isOpen: boolean; @@ -36,22 +37,12 @@ export const RouteDrawer = (props: RouteDrawerProps) => {
{APP_ROUTES.map(route => ( - + h.push(getLinkForRoute(route))}> {route.icon && {route.icon}} - - - + ))} - {/** TODO: bellow is testing code */} - {/* - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - {index % 2 === 0 ? : } - - - ))} */}
); From 71985dd748a62052c94d117c0753f9ab753cc85b Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Fri, 28 Feb 2020 14:43:15 +0100 Subject: [PATCH 5/6] refactor and move NavigationBar code to components package #10 --- packages/components/src/index.ts | 1 + packages/components/src/navigation/index.ts | 1 + .../navigation/navigationBar.component.tsx} | 38 ++++++++++--------- .../src/navigation/routeDrawer.component.tsx} | 21 +++++++--- packages/frontend/src/app.tsx | 19 ++++++++-- .../src/util/{routes.tsx => routes.ts} | 23 +---------- packages/home/src/home.page.tsx | 12 ++---- packages/link/src/link.page.tsx | 21 ++++------ packages/types/src/routes/appRoute.type.ts | 21 +++++++--- packages/types/src/routes/appRoute.util.ts | 22 +++++++++++ packages/types/src/routes/index.ts | 1 + 11 files changed, 104 insertions(+), 76 deletions(-) create mode 100644 packages/components/src/navigation/index.ts rename packages/{frontend/src/components/general/navigation/NavigationBar.tsx => components/src/navigation/navigationBar.component.tsx} (62%) rename packages/{frontend/src/components/general/navigation/RouteDrawer.tsx => components/src/navigation/routeDrawer.component.tsx} (67%) rename packages/frontend/src/util/{routes.tsx => routes.ts} (58%) create mode 100644 packages/types/src/routes/appRoute.util.ts diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a2836d7..2ff39a1 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,2 +1,3 @@ export * from './general'; export * from './list'; +export * from './navigation'; diff --git a/packages/components/src/navigation/index.ts b/packages/components/src/navigation/index.ts new file mode 100644 index 0000000..cbbba65 --- /dev/null +++ b/packages/components/src/navigation/index.ts @@ -0,0 +1 @@ +export * from './navigationBar.component'; diff --git a/packages/frontend/src/components/general/navigation/NavigationBar.tsx b/packages/components/src/navigation/navigationBar.component.tsx similarity index 62% rename from packages/frontend/src/components/general/navigation/NavigationBar.tsx rename to packages/components/src/navigation/navigationBar.component.tsx index 8f4552f..c7e7663 100644 --- a/packages/frontend/src/components/general/navigation/NavigationBar.tsx +++ b/packages/components/src/navigation/navigationBar.component.tsx @@ -1,20 +1,8 @@ import * as React from 'react'; -import { - AppBar, - Toolbar, - makeStyles, - fade, - IconButton, - Theme, - createStyles, - Typography, - Button, -} from '@material-ui/core'; +import { AppBar, Toolbar, makeStyles, IconButton, Theme, createStyles, Typography, Button } from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; -import { RouteDrawer } from './RouteDrawer'; -import h from '../../../util/history'; -import { getLinkForPath } from 'util/routes'; -import { AppPath } from 'elite-types'; +import { RouteDrawer } from './routeDrawer.component'; +import { AppRoute } from 'elite-types'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -31,13 +19,27 @@ const useStyles = makeStyles((theme: Theme) => ); export interface NavigationBarProps { - readonly title?: string; + /** Title displayed by in navigation bar */ + readonly title: string; + + /** Callback used by navigation bar to navigate to a route */ + readonly onNavigateTo: (route: AppRoute) => void; + + /** Routes that the user may navigate to */ + readonly routes: AppRoute[]; } +/** + * NavigationBar displays a material-ui AppBar in combination with a Drawer + * component which the User can use to navigate the available routes + * + * @param props See NavigationBarProps + */ export const NavigationBar = (props: NavigationBarProps) => { const classes = useStyles(); const [routeDrawerOpen, setRouteDrawerOpen] = React.useState(false); - const title = props.title || getLinkForPath(h.location.pathname as AppPath); + + const title = props.title; return ( <> @@ -62,6 +64,8 @@ export const NavigationBar = (props: NavigationBarProps) => {
setRouteDrawerOpen(true)} onClose={() => setRouteDrawerOpen(false)} diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/components/src/navigation/routeDrawer.component.tsx similarity index 67% rename from packages/frontend/src/components/general/navigation/RouteDrawer.tsx rename to packages/components/src/navigation/routeDrawer.component.tsx index d8bdc0b..48a3caf 100644 --- a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx +++ b/packages/components/src/navigation/routeDrawer.component.tsx @@ -2,20 +2,29 @@ import { createStyles, List, ListItem, + ListItemIcon, ListItemText, makeStyles, SwipeableDrawer, Theme, - ListItemIcon, } from '@material-ui/core'; +import { AppRoute, getDisplayNameForRoute, getLinkForRoute } from 'elite-types'; import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from '../../../util/routes'; -import h from '../../../util/history'; export interface RouteDrawerProps { + /** Routes displayed as options in the drawer list */ + readonly routes: AppRoute[]; + + /** Callback used by route drawer to navigate to a route */ + readonly onNavigateTo: (route: AppRoute) => void; + + /** Whether or not the drawer is open */ readonly isOpen: boolean; + + /** Callback used by the drawer to signify it should open */ readonly onOpen: () => void; + + /** Callback used by the drawer to signify it should close */ readonly onClose: () => void; } @@ -36,8 +45,8 @@ export const RouteDrawer = (props: RouteDrawerProps) => {
- {APP_ROUTES.map(route => ( - h.push(getLinkForRoute(route))}> + {props.routes.map(route => ( + props.onNavigateTo(route)}> {route.icon && {route.icon}} diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx index 3c72b4c..70cd708 100644 --- a/packages/frontend/src/app.tsx +++ b/packages/frontend/src/app.tsx @@ -1,6 +1,6 @@ -import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components'; +import { ErrorBoundaryComponent, FeatureFlagsProvider, NavigationBar } from 'elite-components'; import { getConfiguration } from 'elite-configuration'; -import { AppPath, Configuration } from 'elite-types'; +import { AppPath, Configuration, getDisplayNameForRoute, getLinkForRoute } from 'elite-types'; import * as React from 'react'; import { hot } from 'react-hot-loader'; import { Redirect, Route, Switch } from 'react-router'; @@ -17,7 +17,20 @@ export const AppComponent = () => ( {APP_ROUTES.map((route, index) => ( - + ( + <> + history.push(getLinkForRoute(r))} + /> + {route.render(props)} + + )} + /> ))} {/* Error 404 Fallback */} } /> diff --git a/packages/frontend/src/util/routes.tsx b/packages/frontend/src/util/routes.ts similarity index 58% rename from packages/frontend/src/util/routes.tsx rename to packages/frontend/src/util/routes.ts index 666485b..f5f5947 100644 --- a/packages/frontend/src/util/routes.tsx +++ b/packages/frontend/src/util/routes.ts @@ -1,20 +1,9 @@ -import * as React from 'react'; import { HOME_ROUTE } from 'elite-home'; import { LINK_ROUTE } from 'elite-link'; -import { AppPath, AppRoute, LinkType } from 'elite-types'; +import { AppPath, AppRoute, LinkType, getLinkForRoute, getDisplayNameForRoute } from 'elite-types'; export const APP_ROUTES: AppRoute[] = [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: AppRoute): LinkType { - return route.link || route.path; -} - /** * Retrieves the url which other pages can use to link to a certain * app path @@ -28,16 +17,6 @@ export function getLinkForPath(path: AppPath): LinkType { return getLinkForRoute(route); } -/** - * Retrieves the human readable link title/displayed name for - * a given route - * - * @param route - */ -export function getDisplayNameForRoute(route: AppRoute): string { - return route.displayName || getLinkForRoute(route); -} - /** * Retrieves the human readable link title/displayed name for * a given path diff --git a/packages/home/src/home.page.tsx b/packages/home/src/home.page.tsx index 720698b..dffe5d5 100644 --- a/packages/home/src/home.page.tsx +++ b/packages/home/src/home.page.tsx @@ -1,7 +1,7 @@ import { FeatureFlag } from 'elite-components'; +import { AppPath, AppRoute } from 'elite-types'; import * as React from 'react'; import { RouteComponentProps } from 'react-router'; -import { AppPath, AppRoute } from 'elite-types'; export interface HomePageProps extends RouteComponentProps {} @@ -16,12 +16,8 @@ export const HOME_ROUTE: AppRoute = { export const HomePage = (props: HomePageProps) => { return ( - <> - {/* */} - - - Elite Sexyz is currently under construction. See discord main channel for more information - - + + Elite Sexyz is currently under construction. See discord main channel for more information + ); }; diff --git a/packages/link/src/link.page.tsx b/packages/link/src/link.page.tsx index a34bb63..21164c8 100644 --- a/packages/link/src/link.page.tsx +++ b/packages/link/src/link.page.tsx @@ -1,8 +1,8 @@ import { List } from '@material-ui/core'; -import * as React from 'react'; -import { RouteComponentProps } from 'react-router'; import { LinkListItem } from 'elite-components'; import { AppPath, AppRoute } from 'elite-types'; +import * as React from 'react'; +import { RouteComponentProps } from 'react-router'; export interface LinkPageProps extends RouteComponentProps {} @@ -12,19 +12,12 @@ export interface LinkPageProps extends RouteComponentProps {} export const LINK_ROUTE: AppRoute = { path: AppPath.LINK, displayName: 'Useful Links', - render: props => ( - <> - - - ), + render: props => , }; export const LinkPage = (props: LinkPageProps) => ( - <> - {/* */} - - - - - + + + + ); diff --git a/packages/types/src/routes/appRoute.type.ts b/packages/types/src/routes/appRoute.type.ts index 14b9a39..80dba3e 100644 --- a/packages/types/src/routes/appRoute.type.ts +++ b/packages/types/src/routes/appRoute.type.ts @@ -1,22 +1,31 @@ import { LinkType } from './link.type'; import { AppPath } from './appPath.type'; -import { RouteProps } from 'react-router'; +import { RouteProps, RouteComponentProps } from 'react-router'; /** * 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 */ export interface AppRoute extends RouteProps { - // Use this if the link target differs from the path specification, - // i.e., if the path url contains paramter specifications etc + /** + * 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!) + /** link text (Human readable!) */ readonly displayName?: string; - // optional icon displayed next to the link name + /** optional icon displayed next to the link name */ readonly icon?: JSX.Element; - // AppRoutes must have a path - deoptionalize this property + /** AppRoutes must have a path - deoptionalize this property */ readonly path: AppPath; + + /** render is required for AppRoutes */ + readonly render: (props: RouteComponentProps) => React.ReactNode; + + /** prevent usage of component/children props, i.e., AppRoutes must use render! */ + readonly component?: never; + readonly children?: never; } diff --git a/packages/types/src/routes/appRoute.util.ts b/packages/types/src/routes/appRoute.util.ts new file mode 100644 index 0000000..085f05d --- /dev/null +++ b/packages/types/src/routes/appRoute.util.ts @@ -0,0 +1,22 @@ +import { AppRoute } from './appRoute.type'; +import { LinkType } from './link.type'; + +/** + * Retrieves the url which other pages can use to link to a certain + * app path + * + * @param route + */ +export function getLinkForRoute(route: AppRoute): LinkType { + return route.link || route.path; +} + +/** + * Retrieves the human readable link title/displayed name for + * a given route + * + * @param route + */ +export function getDisplayNameForRoute(route: AppRoute): string { + return route.displayName || getLinkForRoute(route); +} diff --git a/packages/types/src/routes/index.ts b/packages/types/src/routes/index.ts index 91d063f..fe01775 100644 --- a/packages/types/src/routes/index.ts +++ b/packages/types/src/routes/index.ts @@ -1,3 +1,4 @@ export * from './appPath.type'; export * from './appRoute.type'; +export * from './appRoute.util'; export * from './link.type'; From 0d3c8677446e43366135dcbc8a38d08c772f5d93 Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Fri, 28 Feb 2020 14:49:30 +0100 Subject: [PATCH 6/6] readd icons to page routes #10 --- packages/home/src/home.page.tsx | 2 ++ packages/link/src/link.page.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/home/src/home.page.tsx b/packages/home/src/home.page.tsx index dffe5d5..4877add 100644 --- a/packages/home/src/home.page.tsx +++ b/packages/home/src/home.page.tsx @@ -2,6 +2,7 @@ import { FeatureFlag } from 'elite-components'; import { AppPath, AppRoute } from 'elite-types'; import * as React from 'react'; import { RouteComponentProps } from 'react-router'; +import HomeIcon from '@material-ui/icons/Home'; export interface HomePageProps extends RouteComponentProps {} @@ -11,6 +12,7 @@ export interface HomePageProps extends RouteComponentProps {} export const HOME_ROUTE: AppRoute = { path: AppPath.HOME, displayName: 'Home', + icon: , render: props => , }; diff --git a/packages/link/src/link.page.tsx b/packages/link/src/link.page.tsx index 21164c8..727cf15 100644 --- a/packages/link/src/link.page.tsx +++ b/packages/link/src/link.page.tsx @@ -3,6 +3,7 @@ import { LinkListItem } from 'elite-components'; import { AppPath, AppRoute } from 'elite-types'; import * as React from 'react'; import { RouteComponentProps } from 'react-router'; +import LinkIcon from '@material-ui/icons/Link'; export interface LinkPageProps extends RouteComponentProps {} @@ -12,6 +13,7 @@ export interface LinkPageProps extends RouteComponentProps {} export const LINK_ROUTE: AppRoute = { path: AppPath.LINK, displayName: 'Useful Links', + icon: , render: props => , };