index.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { NavLink, Link, withRouter } from 'react-router-dom';
import { translate } from 'react-i18next';

import {loginAppRequest, logoutRequest} from 'actions/login';

import AppBar from '@material-ui/core/AppBar';
import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';

import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles';
import {saveCookies} from 'utilities';

import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent';
import { ServerLink } from 'ui/catalog/Links';

const styleSheet = (theme) => ({
    root: {
        marginTop: 90,
        width: '100%',
    },
    flex: {
        flex: 1,
    },
    headerRoot: {
        backgroundColor: '#2b2924',
        height: 'auto',
        [theme.breakpoints.down('sm')]: {
            height: '3.5rem',
        },
    },
    blockHeader: {
        padding: '0 20px',
        [theme.breakpoints.down('sm')]: {
            alignItems: 'baseline' as 'baseline',
        },
    },
    /*tslint:disable*/
    navLogo: {
        color: '#e6e5e0',
        padding: '15px 0',
        fontSize: '29px',
        height: '100%',
        width: '100%',
        maxWidth: '182px',
        marginRight: '68px',
        lineHeight: '22px',
        display: 'block',
        boxSizing: 'border-box' as 'border-box',
        'html[dir="rtl"] &': {
            marginRight: '0 !important',
            marginLeft: '68px !important'
        },
    },
    /*tslint:enable*/
    mainIcon: {
        height: '42px',
        // width: '29%',
        paddingRight: '0.7143rem',
        paddingLeft: '0.7143rem',
        paddingBottom: '0px',
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    logoIcon: {
        height: '27px',
        // width: '60%',
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    loginButton: {
        color: '#ffffff',
        float: 'right' as 'right',
    },
    /* tslint:disable */
    linkLogin: {
        fontSize: '18px',
        color: '#ffffff',
        cursor: 'pointer',
        '&:hover': {
            color: '#88ba42',
            textDecoration: 'none',
        },
    },
    menuBtn: {
        width: '1em',
        marginRight: '1.429rem',
        '&:hover': {
            backgroundColor: 'transparent' as 'transparent',
        }
    },
    mobileHidden: {
        [theme.breakpoints.down('sm')]: {
            display: 'none'
        },
    },
    /* tslint:enable */
});

interface IHeaderProps extends React.ClassAttributes<any> {
    login: any;
    logoutRequest: () => Promise<any>;
    loginAppRequest: () => Promise<any>;
    history: any;
    classes?: any;
}

class Header extends React.Component<IHeaderProps | any, any> {

    public constructor(props: any) {
        super(props);

        this.state = {
            open: false,
        };
    }

    private logout = () => {
        this.props.logoutRequest()
            .then(() => this.props.loginAppRequest())
            .then((data) => {
                // console.log('Logout', data);
                saveCookies({access_token: data.access_token, authorities: [ROLE_CLIENT]}, data.exp * 1000 || new Date().getTime() + data.expires_in * 1000);
                this.props.history.push('/login');
            });
    }

    private hasRole = (roles: string[]): boolean => {
        return this.props.login.authorities
            .map((e) => roles.indexOf(e) > -1)
            .reduce((p, c) => p || c);
    }

    private renderLogin = (roles: string[]) => {
        if (this.hasRole(roles)) {
            return <UserMenuComponent userName={ this.props.login.user_name } logoutRequest={ this.logout }/>;
        } else {
            const { t } = this.props;
            return <Link className={ this.props.classes.linkLogin } to="/login">{ t('common:action.login') }</Link>;
        }
    }

    private toggleDrawer = (flag) => {
        this.setState({ open: flag });
    }
    private handleLeftMenuClose = () => this.toggleDrawer(false);

    private handleLeftMenuOpen = () => this.toggleDrawer(true);

    public render() {

        const { classes, t, baseUrl } = this.props;

        return (
            <div className="header-bar">
                <AppBar position="fixed" className={ classes.headerRoot } >
                    <Toolbar className={ classes.blockHeader }>
                        <div className="mobile-navigation-block">
                            <IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } >
                                <img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
                            </IconButton>

                            <LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } />
                        </div>

                        <div className={ classes.flex }>
                            <ServerLink link={ baseUrl } classes={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
                                <img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
                                <img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
                            </ServerLink>
                            <div className="navigation-block">
                                <NavLink activeClassName="active" to="/datasets">{ t('menu.Datasets') }</NavLink>
                                <NavLink activeClassName="active" to="/partners">{ t('menu.Data providers') }</NavLink>
                                <NavLink activeClassName="active" to="/descriptorlists">{ t('menu.Descriptor lists') }</NavLink>
                            </div>
                        </div>
                        <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>

                        <div>
                            <LangListComponent />
                        </div>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }

}

const mapStateToProps = (state) => ({
    login: state.login,
    baseUrl: state.applicationConfig.apiUrl,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    loginAppRequest,
    logoutRequest,
}, dispatch);

export default translate()(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styleSheet)(Header))));