nexshop-web-contents/src/component/dialog/confirm-delete-contents-item/confirm-delete-contents-item.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {dialogEnhancer, actions as dialogActions} from "nexshop-web-dialog";
import {contentsActions} from "nexshop-web-store";
import {v4} from "uuid";

const {deleteContentsItem} = contentsActions;

class ConfirmDeleteContentsItem extends Component {
    constructor() {
        super();

        this.onClickCancel = this.onClickCancel.bind(this);
        this.onClickDelete = this.onClickDelete.bind(this);
        this.deleteMessage = this.deleteMessage.bind(this);
    }

    onClickDelete() {
        const {deleteIndex, actions: {deleteContentsItem, closeDialog}} = this.props;
        deleteContentsItem(deleteIndex);
        closeDialog();
    }

    onClickCancel() {
        this.props.actions.closeDialog();
    }

    deleteMessage(message) {
        return (message.split("\n").map(splitMessage => {
                return (
                    <div key={v4()} className="confirm-delete-contents-item-body">{splitMessage}</div>
                );
            })
        );
    }

    render() {
        const {willDeleteContent, used} = this.props;
        const name =  willDeleteContent ? willDeleteContent.name : "";

        let message = '';
        if (used === "USED") {
            message = "CONTENT " + name + " is in used.\n Would you like to delete?";
        } else {
            message = 'Would you like to delete?';
        }
        return (
            <div>
                {
                    this.deleteMessage(message)
                }
                {
                    used === "USED" &&
                    <caption className="confirm-delete-contents-item-caption">
                        Every scene, playlist, schedule with this file will be affected.
                    </caption>
                }
                <div className="confirm-delete-contents-item-footer">
                    {
                        used !== "USED" &&
                        <div className="confirm-delete-contents-item-footer__delete" onClick={this.onClickDelete}>DELETE
                        </div>
                    }
                    <div className="confirm-delete-contents-item-footer__cancel" onClick={this.onClickCancel}>CANCEL
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    let {dialog, contents: {deleteIndex, willDeleteContent, used}} = state;
    const visibility = dialog === 'delete-contents-item';
    return {visibility, deleteIndex, willDeleteContent, used};
};

const mapDispatchToProps = (dispatch) => {
    const {openDialog, closeDialog} = dialogActions;

    return {
        actions: bindActionCreators({openDialog, closeDialog, deleteContentsItem}, dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(dialogEnhancer(ConfirmDeleteContentsItem));