DegreeCourseItem.js

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


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

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

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

class DegreeCourseItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            displayingPage: DISPLAY.LIST,
            editingDegreeCourse: 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);
    }

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

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

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

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

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

    MapAllDegreeCourses() {
        const allDegreeCourses = this.props.degreeCourseList
        if (allDegreeCourses) {
            var showDeleteDegreeCourseModal = this.props.showDeleteDegreeCourseModal
            if (showDeleteDegreeCourseModal === undefined) {
                showDeleteDegreeCourseModal = false
            }
            console.log("deleteModal:" + showDeleteDegreeCourseModal)
            var degreeCourses = allDegreeCourses.map(degreeCourse => {
                let editButtonID = "DegreeCourseItemEditButton" + degreeCourse.id
                let deleteButtonID = "DegreeCourseItemDeleteButton" + degreeCourse.id
                let itemID = "DegreeCourseItem" + degreeCourse.id
                let dialogData = {
                    dialogID: "DeleteDialogDegreeCourse" + degreeCourse.id,
                    name: degreeCourse.name,
                    degreeCourseID: degreeCourse.id
                }
                let cardHeader
                if (degreeCourse.shortName) {
                    cardHeader = <Card.Header>{degreeCourse.shortName}: {degreeCourse.name}</Card.Header>
                } else {
                    cardHeader = <Card.Header>{degreeCourse.name}</Card.Header>
                }
                return (
                    <div key={degreeCourse.id}>
                        <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
                            {cardHeader}
                            <ListGroup variant="flush">
                                <ListGroup.Item >Universität: {degreeCourse.universityName}</ListGroup.Item>
                                <ListGroup.Item >Fachbereich: {degreeCourse.departmentName}</ListGroup.Item>
                                <ListGroup.Item >Studiengang: {degreeCourse.name}</ListGroup.Item>
                            </ListGroup>
                            <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                                <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, degreeCourse)} id={editButtonID} >Edit</Button>
                                <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
                                    Delete
                                </Button>
                            </Card.Footer>
                        </Card>
                    </div>
                )
            })
            console.log(degreeCourses)
            return degreeCourses
        }
    }

    render() {
        var workspace
        switch (this.state.displayingPage) {
            case DISPLAY.LIST:
                workspace =
                    (<div id="DegreeCourseManagementPageListComponent">
                        <Button id="DegreeCourseManagementPageCreateDegreeCourseButton" onClick={this.handleShowCreatePage}>
                            <img alt="Add-DegreeCourse-Button" src={addIcon} style={{ width: '2rem' }}></img>
                        </Button>
                        {this.MapAllDegreeCourses()}
                        <DeleteDegreeCourseModal />
                    </div>)
                break
            case DISPLAY.CREATE:
                workspace = <CreateNewDegreeCourse id="DegreeCourseManagementPageCreateComponent" goBack={this.handleSwitchToList} />
                break
            case DISPLAY.EDIT:
                workspace = <EditDegreeCourse id="DegreeCourseManagementPageEditComponent" goBack={this.handleSwitchToList} editDegreeCourse={this.state.editingDegreeCourse} />
                break
            default:
                workspace = <Button onClick={this.handleShowCreatePage}>
                    <img alt="Add-DegreeCourse-Button" src={addIcon} style={{ width: '2rem' }}></img>
                </Button>
                (<div id="DegreeCourseManagementPageListComponent">
                    <Button id="DegreeCourseManagementPageCreateDegreeCourseButton" onClick={this.handleShowCreatePage}>
                        <img alt="Add-DegreeCourse-Button" src={addIcon} style={{ width: '2rem' }}></img>
                    </Button>
                    {this.MapAllDegreeCourses()}
                    <DeleteDegreeCourseModal />
                </div>)
        }
        return (
            <div>
                {workspace}
            </div>
        )
    }
}

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

const ConnectedDegreeCourseItems = connect(mapStateToProps, mapDispatchToProps)(DegreeCourseItem)
export default ConnectedDegreeCourseItems