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/components/src/navigation/navigationBar.component.tsx b/packages/components/src/navigation/navigationBar.component.tsx new file mode 100644 index 0000000..c7e7663 --- /dev/null +++ b/packages/components/src/navigation/navigationBar.component.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { AppBar, Toolbar, makeStyles, IconButton, Theme, createStyles, Typography, Button } from '@material-ui/core'; +import MenuIcon from '@material-ui/icons/Menu'; +import { RouteDrawer } from './routeDrawer.component'; +import { AppRoute } from 'elite-types'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + }), +); + +export interface NavigationBarProps { + /** 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; + + return ( + <> +
+ + + setRouteDrawerOpen(true)} + > + + + + {title} + + + + +
+ + setRouteDrawerOpen(true)} + onClose={() => setRouteDrawerOpen(false)} + /> + + ); +}; diff --git a/packages/components/src/navigation/routeDrawer.component.tsx b/packages/components/src/navigation/routeDrawer.component.tsx new file mode 100644 index 0000000..48a3caf --- /dev/null +++ b/packages/components/src/navigation/routeDrawer.component.tsx @@ -0,0 +1,58 @@ +import { + createStyles, + List, + ListItem, + ListItemIcon, + ListItemText, + makeStyles, + SwipeableDrawer, + Theme, +} from '@material-ui/core'; +import { AppRoute, getDisplayNameForRoute, getLinkForRoute } from 'elite-types'; +import * as React from 'react'; + +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; +} + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + list: { + width: 250, + }, + fullList: { + width: 'auto', + }, + }), +); + +export const RouteDrawer = (props: RouteDrawerProps) => { + const classes = useStyles(); + return ( + +
+ + {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 2f81e20..70cd708 100644 --- a/packages/frontend/src/app.tsx +++ b/packages/frontend/src/app.tsx @@ -1,16 +1,14 @@ +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'; import { Router } from 'react-router-dom'; import history from './util/history'; import { APP_ROUTES } from './util/routes'; -import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components'; -import { Divider } from '@material-ui/core'; -import { LinkDirectory } from './util/linkDirectory'; -// Global bootstrap: install subsystems and load configuration +// Global bootstrap: load configuration const configuration: Configuration = getConfiguration(); export const AppComponent = () => ( @@ -18,14 +16,25 @@ export const AppComponent = () => ( - {APP_ROUTES.map((routeProps, index) => ( - + {APP_ROUTES.map((route, index) => ( + ( + <> + history.push(getLinkForRoute(r))} + /> + {route.render(props)} + + )} + /> ))} {/* Error 404 Fallback */} - + } /> - - 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 - +
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 = () => ( - -); 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 aac8236..4877add 100644 --- a/packages/home/src/home.page.tsx +++ b/packages/home/src/home.page.tsx @@ -1,7 +1,8 @@ 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'; +import HomeIcon from '@material-ui/icons/Home'; export interface HomePageProps extends RouteComponentProps {} @@ -11,14 +12,14 @@ export interface HomePageProps extends RouteComponentProps {} export const HOME_ROUTE: AppRoute = { path: AppPath.HOME, displayName: 'Home', + icon: , render: props => , }; -export const HomePage = (props: HomePageProps) => ( - <> -

Main Page

+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..727cf15 100644 --- a/packages/link/src/link.page.tsx +++ b/packages/link/src/link.page.tsx @@ -1,8 +1,9 @@ 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'; +import LinkIcon from '@material-ui/icons/Link'; export interface LinkPageProps extends RouteComponentProps {} @@ -12,19 +13,13 @@ export interface LinkPageProps extends RouteComponentProps {} export const LINK_ROUTE: AppRoute = { path: AppPath.LINK, displayName: 'Useful Links', - render: props => ( - <> - - - ), + icon: , + render: props => , }; export const LinkPage = (props: LinkPageProps) => ( - <> -

Useful Links List

- - - - - + + + + ); diff --git a/packages/types/src/routes/appRoute.type.ts b/packages/types/src/routes/appRoute.type.ts index 2fd581d..80dba3e 100644 --- a/packages/types/src/routes/appRoute.type.ts +++ b/packages/types/src/routes/appRoute.type.ts @@ -1,21 +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; - // AppRoutes must have a path - deoptionalize this property + /** 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; + /** 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';