TopMenu.js

import React, { Component } from "react";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import UserSessionWidget from "../user/components/userSessionWidget";
import Container from 'react-bootstrap/Container';
import { LinkContainer } from 'react-router-bootstrap';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as authenticationActions from '../authentication/state/AuthenticationActions'
import * as userManagementActions from '../user/state/UserManagementActions';
import * as degreeCourseManagementActions from '../degreeCourse/state/DegreeCourseManagementActions';
import * as applicationManagementActions from '../degreeCourseApplication/state/ApplicationManagementActions';

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken,
        isAdmin: state.AuthenticationReducer.isAdmin,
        user: state.AuthenticationReducer.user
    };
}


class TopMenu extends Component {

    constructor(props) {
        super(props)

        this.handleUserManagementButtonAction = this.handleUserManagementButtonAction.bind(this);
        this.handleDegreeCourseManagementButtonAction = this.handleDegreeCourseManagementButtonAction.bind(this);
        this.handleApplicationManagementButtonAction = this.handleApplicationManagementButtonAction.bind(this);
    };

    async handleApplicationManagementButtonAction() {
        if (this.props.isAdmin) {
            const { showAllApplications } = this.props
            await showAllApplications(this.props.accessToken);
        } else {
            const { showMyApplications } = this.props
            await showMyApplications(this.props.accessToken);
        }
    }

    async handleUserManagementButtonAction() {
        const { showAllUsers } = this.props;
        await showAllUsers(this.props.accessToken)
    }

    async handleDegreeCourseManagementButtonAction() {
        const { showAllDegreeCourses } = this.props;
        await showAllDegreeCourses(this.props.accessToken)
    }

    render() {
        let OpenManagementPageButtons;
        if (this.props.user && this.props.isAdmin) {
            OpenManagementPageButtons =
                <>
                    <LinkContainer to="/userManagement" id="OpenUserManagementPageButton" onClick={this.handleUserManagementButtonAction}>
                        <Nav.Link>User-Management</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/degreeCourseManagement" id="OpenDegreeCourseManagementPageButton" onClick={this.handleDegreeCourseManagementButtonAction}>
                        <Nav.Link>DegreeCourse-Management</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/degreeCourseApplicationManagement" id="OpenDegreeCourseApplicationManagementPageButton" onClick={this.handleApplicationManagementButtonAction}>
                        <Nav.Link>Studienbewerbung-Management</Nav.Link>
                    </LinkContainer>
                </>
        } else if (this.props.user) {
            OpenManagementPageButtons =
                <>
                    <LinkContainer to="/degreeCourseApplicationManagement" id="OpenDegreeCourseApplicationManagementPageButton" onClick={this.handleApplicationManagementButtonAction}>
                        <Nav.Link>Studienbewerbung-Management</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/degreeCourseManagement" id="OpenDegreeCourseManagementPageButton" onClick={this.handleDegreeCourseManagementButtonAction}>
                        <Nav.Link>DegreeCourse-List</Nav.Link>
                    </LinkContainer>
                </>
        }

        return (
            <div>
                <Navbar bg="light" expand="lg">
                    <Container style={{ margin: 0 }}>
                        <LinkContainer to="/" id="OpenStartPageButton">
                            <Navbar.Brand>BHT</Navbar.Brand>
                        </LinkContainer>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav" style={{ display: 'flex', flexWrap: 'row', justifyContent: 'space-between', width: '100%' }}>
                            <Nav className="mr-auto">
                                <LinkContainer to="/" id="OpenStartPageButton">
                                    <Nav.Link>Home</Nav.Link>
                                </LinkContainer>
                                {OpenManagementPageButtons}
                            </Nav>
                            <UserSessionWidget />
                        </Navbar.Collapse>
                    </Container>
                </Navbar>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    authenticateUserAction: authenticationActions.authenticateUser,
    showAllUsers: userManagementActions.displayUsers,
    showAllDegreeCourses: degreeCourseManagementActions.displayDegreeCourses,
    showAllApplications: applicationManagementActions.displayAllApplications,
    showMyApplications: applicationManagementActions.displayMyApplications
}, dispatch)

const ConnectedTopMenu = connect(mapStateToProps, mapDispatchToProps)(TopMenu);
export default ConnectedTopMenu;