import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import AccountCircle from '@material-ui/icons/AccountCircle'; import MenuItem from '@material-ui/core/MenuItem'; import Menu from '@material-ui/core/Menu'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { UpdateAuthentication } from '../actions/authentication'; import { ReplaceAction } from '../actions/navigationActions'; import connect, { Connect, IDispatcher } from '../flux/connect'; import Logo from './logo'; const styles = (theme: Theme) => createStyles({ appBar: { zIndex: theme.zIndex.drawer + 1, }, grow: { flexGrow: 1, }, menuButton: { marginLeft: -12, marginRight: 20, }, icon: { marginRight: 12 } }); const mapDispatch = (dispatcher: IDispatcher) => { return { logout: () => { dispatcher.dispatch(new UpdateAuthentication(null)); dispatcher.dispatch(new ReplaceAction("/login")); } } }; type TitleBarProps = RouteComponentProps<{}> & WithStyles & Connect class TitleBarComponent extends React.Component { constructor(props: TitleBarProps) { super(props); this.state = { anchorEl: null } } render(): JSX.Element { const { classes, state, history, location } = this.props; const open = !!this.state.anchorEl; return ( { state.framework.applicationState.icon ? () : null } { state.framework.applicationState.title } { state.framework.authenticationState.user ? (
Profile { this.props.logout(); this.closeMenu(); } }>Logout
) : () }
); }; private openMenu = (event: React.MouseEvent) => { this.setState({ anchorEl: event.currentTarget }); }; private closeMenu = () => { this.setState({ anchorEl: null }); }; } //todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent))); export default TitleBar;