DegreeCourseManagement.js

import React, { Component } from "react";
import DegreeCourseItem from "./components/DegreeCourseItem";
import DeleteDegreeCourseModal from './components/DeleteDegreeCourseModal'
import EditDegreeCourse from './components/EditDegreeCourse'
import CreateNewDegreeCourse from './components/CreateNewDegreeCourse'
import CreateNewApplication from '../degreeCourseApplication/components/CreateNewApplication'
import addIcon from '../../icons/addIcon.png'
import Button from "react-bootstrap/esm/Button";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as degreeCourseManagementActions from './state/DegreeCourseManagementActions'

const mapStateToProps = state => {
    return {
        showDeleteDegreeCourseModal: state.DegreeCourseReducer.showDeleteDegreeCourseModal,
        degreeCourseList: state.DegreeCourseReducer.degreeCourseList,
        isAdmin: state.AuthenticationReducer.isAdmin
    };
}

const DISPLAY = {
    LIST: "list",
    EDIT: "edit",
    CREATE: "create",
    APPLICATION: "application"
}

class DegreeCourseManagement extends Component {

    constructor(props) {
        super(props);
        this.state = {
            displayingPage: DISPLAY.LIST,
            currentDegreeCourse: null
        }

        this.MapAllDegreeCourses = this.MapAllDegreeCourses.bind(this);
        this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleSwitchToList = this.handleSwitchToList.bind(this);
        this.handleShowCreatePage = this.handleShowCreatePage.bind(this);
        this.handleShowEditPage = this.handleShowEditPage.bind(this);
        this.handleShowCreateApplication = this.handleShowCreateApplication.bind(this);
    }

    handleShowDeleteModal(e, dialogModalData) {
        e.preventDefault();
        const { showDeleteDegreeCourseModalAction } = this.props
        showDeleteDegreeCourseModalAction(dialogModalData)
    }

    handleShowEditPage(e, degreeCourse) {
        e.preventDefault();
        this.setState(
            {
                currentDegreeCourse: degreeCourse,
                displayingPage: DISPLAY.EDIT
            })
    }

    handleShowCreatePage(e) {
        e.preventDefault();
        this.setState({ displayingPage: DISPLAY.CREATE })
    }

    handleSwitchToList() {
        this.setState({ displayingPage: DISPLAY.LIST })
    }

    handleClose() {
        const { hideDeleteDegreeCourseModalAction } = this.props;
        hideDeleteDegreeCourseModalAction();
    }

    handleShowCreateApplication(e, degreeCourse) {
        e.preventDefault();
        this.setState(
            {
                currentDegreeCourse: degreeCourse,
                displayingPage: DISPLAY.APPLICATION
            })
    }

    MapAllDegreeCourses() {
        const allDegreeCourses = this.props.degreeCourseList
        if (allDegreeCourses) {
            var showDeleteDegreeCourseModal = this.props.showDeleteDegreeCourseModal
            if (showDeleteDegreeCourseModal === undefined) {
                showDeleteDegreeCourseModal = false
            }
            var degreeCourses = allDegreeCourses.map(degreeCourse => {
                return (
                    <DegreeCourseItem key={degreeCourse.id} degreeCourse={degreeCourse} handleShowDeleteModal={this.handleShowDeleteModal} handleShowEditPage={this.handleShowEditPage} handleShowCreateApplication={this.handleShowCreateApplication} />
                )
            })
            return degreeCourses
        }
    }

    render() {
        var addButton
        if (this.props.isAdmin) {
            addButton =
                <div style={{ display: 'flex', justifyContent: 'center', width: '5vw', background: '#f8f9fa', borderRadius: '30px' }}>
                    <Button onClick={this.handleShowCreatePage} style={{ background: 'transparent', border: 'none' }}>
                        <img alt="Add-DegreeCourse-Button" src={addIcon} style={{ width: '2rem' }}></img>
                    </Button>
                </div>
        }

        var workspace
        switch (this.state.displayingPage) {
            case DISPLAY.LIST:
                workspace =
                    <>
                    <h2 style={{textAlign: 'left', color: "white"}}>Studiengang-Liste</h2>
                        {addButton}
                        <div style={{ display: "flex", flexFlow: "row wrap", justifyContent: 'left' }} id="DegreeCourseManagementPageListComponent">
                            {this.MapAllDegreeCourses()}
                            <DeleteDegreeCourseModal />
                        </div>
                    </>
                break
            case DISPLAY.CREATE:
                workspace = <CreateNewDegreeCourse goBack={this.handleSwitchToList} />
                break
            case DISPLAY.EDIT:
                workspace = <EditDegreeCourse goBack={this.handleSwitchToList} editDegreeCourse={this.state.currentDegreeCourse} />
                break
            case DISPLAY.APPLICATION:
                workspace = <CreateNewApplication degreeCourse={this.state.currentDegreeCourse} goBack={this.handleSwitchToList} />
                break
            default:
                workspace =
                    <>
                    <h2 style={{textAlign: 'left', color: "white"}}>Studiengang-Liste</h2>
                        {addButton}
                        <div style={{ display: "flex", flexFlow: "row wrap", justifyContent: 'center' }} id="DegreeCourseManagementPageListComponent">
                            {this.MapAllDegreeCourses()}
                            <DeleteDegreeCourseModal />
                        </div>
                    </>
        }

        return (
            <div>
                <div id="DegreeCourseManagementPage" style={{ height: '100vh', background: '#2b3648', padding: '1rem' }}>
                    {workspace}
                </div>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    showDeleteDegreeCourseModalAction: degreeCourseManagementActions.getShowDeleteDegreeCourseModalAction,
    hideDeleteDegreeCourseModalAction: degreeCourseManagementActions.getHideDeleteDegreeCourseModalAction
}, dispatch)

const ConnectedDegreeCourseManagement = connect(mapStateToProps, mapDispatchToProps)(DegreeCourseManagement)
export default ConnectedDegreeCourseManagement