DegreeCourseApplicationManagement.js

import React, { Component } from "react";
import ApplicationItem from "./ApplicationItem";
import DeleteApplicationModal from './DeleteApplicationModal'
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as applicationManagementActions from '../../actions/ApplicationManagementActions'

const mapStateToProps = state => {
    return {
        showDeleteApplicationModal: state.DegreeCourseApplicationReducer.showDeleteApplicationModal,
        applicationList: state.DegreeCourseApplicationReducer.applicationList
    };
}

const DISPLAY = {
    LIST: "list"
}

class DegreeCourseApplicationManagement extends Component {

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

        this.MapAllApplications = this.MapAllApplications.bind(this);
        this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

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

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

    MapAllApplications() {
        const allApplications = this.props.applicationList
        if (allApplications) {
            var showDeleteApplicationModal = this.props.showDeleteApplicationModal
            if (showDeleteApplicationModal === undefined) {
                showDeleteApplicationModal = false
            }
            var applications = allApplications.map(application => {
                return (
                    <ApplicationItem key={application.id} application={application} handleShowDeleteModal={this.handleShowDeleteModal} />
                )
            })
            return applications
        }
    }

    render() {
        return (
            <div>
                <div id="DegreeCourseApplicationManagementPageListComponent" style={{ background: '#2b3648', padding: '1rem' }}>
                    <h2 style={{ textAlign: 'left', color: "white" }}>Bewerbungen</h2>
                    <div style={{ display: 'flex', flexFlow: 'row wrap', height: '100vh', justifyContent: 'center' }}>
                        {this.MapAllApplications()}
                        <DeleteApplicationModal />
                    </div>
                </div>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    showDeleteApplicationModalAction: applicationManagementActions.getShowDeleteApplicationModalAction,
    hideDeleteApplicationModalAction: applicationManagementActions.getHideDeleteApplicationModalAction
}, dispatch)

const ConnectedApplicationManagement = connect(mapStateToProps, mapDispatchToProps)(DegreeCourseApplicationManagement)
export default ConnectedApplicationManagement