nexshop-web-contents/src/component/dialog/move-to/move-to.js

Nexshop Web Contents Project

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

class MoveTo extends Component {
    constructor(props) {
        super(props);

        this.onClickCancel = this.onClickCancel.bind(this);
        this.onClickMove = this.onClickMove.bind(this);
        this.getFolderIdsUnderBreadcrumb = this.getFolderIdsUnderBreadcrumb.bind(this);
        this.onFolderItemClicked = this.onFolderItemClicked.bind(this);
        this.onFolderItemArrowClicked = this.onFolderItemArrowClicked.bind(this);

        this.state = {
            folders: [],
            selectedFolderId: props.breadcrumb[props.breadcrumb.length - 1].id
        };
    }

    componentWillMount() {
        this.props.actions.fetchFoldersUnderFoldersAsync(this.getFolderIdsUnderBreadcrumb());
    }

    componentWillReceiveProps(nextProps) {
        const {foldersUnderBreadcrumb, breadcrumb} = nextProps;

        if(this.props.foldersUnderBreadcrumb !== foldersUnderBreadcrumb || this.props.breadcrumb !== breadcrumb){
            this.setState({
                folders: listToTree(foldersUnderBreadcrumb, breadcrumb)
            });
        }
    }

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

    onClickMove() {
        const {contents, folders, selectedContentsItemIds, breadcrumb, actions: {moveContents, moveFolder, closeDialog}} = this.props;
        const {selectedFolderId} = this.state;
        const selectedContent = contents.filter( (item) => {
            return selectedContentsItemIds.includes(item.id);
        })[0];
        const selectedFolder = folders.filter( (item) => {
            return selectedContentsItemIds.includes(item.id);
        })[0];

        if(selectedFolderId !== breadcrumb[breadcrumb.length - 1].id) {
            if(selectedContent) {
                moveContents(selectedContent, selectedFolderId);
            } else {
                moveFolder(selectedFolder, selectedFolderId);
            }

        }

        closeDialog('move-to');
    }

    getFolderIdsUnderBreadcrumb() {
        return this.props.breadcrumb.map(item => {
            return item.id;
        });
    }

    onFolderItemClicked(id) {
        this.setState({selectedFolderId: id});
        this.onFolderItemArrowClicked(id, false);
    }

    onFolderItemArrowClicked(id, isClosable) {
        const prevFolder = [{...this.state.folders}];

        function findFolderRecursive(folders) {
            folders.forEach(folder => {
                if (folder.id === id && folder.hasChildFolder === 'Y') {
                    if (isClosable) {
                        folder.collapsed = !folder.collapsed;
                    }
                    else {
                        folder.collapsed = false;
                    }
                } else {
                    if (folder.children !== []) {
                        findFolderRecursive(folder.children);
                    }
                }
            });
        }

        findFolderRecursive(prevFolder);

        this.setState({folders: prevFolder[0]});
    }

    render() {
        const {folders, selectedFolderId} = this.state;

        const drawTreeHierarchy = (item) => {
            return (
                <div key={item.id} className='move-to-folder-item-wrapper'>
                    <div className='move-to-folder-item'>
                        <div className={`move-to-folder-item-row${selectedFolderId === item.id ? '--selected' : ''}`}
                             onClick={() => this.onFolderItemClicked(item.id)}/>
                        <div
                            className={`move-to-folder-item-arrow${item.hasChildFolder === 'Y' ? (item.collapsed ? '--closed' : '--opened') : ''}`}
                            onClick={() => this.onFolderItemArrowClicked(item.id, true)}/>
                        <i className={`move-to-folder-item-icon${selectedFolderId === item.id ? '--selected' : ''}`}/>
                        <div
                            className={`move-to-folder-item-name${selectedFolderId === item.id ? '--selected' : (item.collapsed ? '' : '--opened')}`}>{item.name}</div>
                    </div>
                    {
                        !item.collapsed &&
                        item.children.map((child) => (
                            drawTreeHierarchy(child)
                        ))
                    }
                </div>);
        };

        return (
            <div className='move-to-wrapper'>
                <div className='move-to-header'>Move the selected contents(1) to</div>
                <div className='move-to-body'>
                    <div className='move-to-body-tree'>
                        <div className='move-to-folder-item-wrapper'>
                            {
                                folders &&
                                folders.children &&
                                [folders].map(folder => (
                                    drawTreeHierarchy(folder)
                                ))
                            }
                        </div>
                    </div>
                    {/*<div className='move-to-body-new'>*/}
                        {/*+ New Folder*/}
                    {/*</div>*/}
                </div>
                <div className='move-to-footer'>
                    <div className='move-to-footer__move' onClick={this.onClickMove}>MOVE</div>
                    <div className='move-to-footer__cancel' onClick={this.onClickCancel}>CANCEL</div>
                </div>
            </div>
        );
    }
}

const listToTree = (inputList, breadcrumb) => {
    if (inputList.length === 0) {
        return null;
    }

    const list = inputList.map(item => ({...item, children: [], collapsed: true}));

    let mapById = list.reduce((map, item) => {
        map[item.id] = item;
        return map;
    }, {});

    list.forEach(item => {
        if (item.parentId === null || item.parentId === undefined || !mapById[item.parentId]) {
            return;
        }
        mapById[item.parentId.toString()].children.push(item);
    });

    breadcrumb.forEach((folder) => {
            mapById[folder.id.toString()].collapsed = false;
        }
    );

    return list.find(item => item.parentId === null || item.parentId === undefined);
};


const mapStateToProps = (state) => {
    let {dialog, contents: {contents, folders, breadcrumb, foldersUnderBreadcrumb, selectedContentsItemIds}} = state;
    const visibility = dialog === 'move-to';
    return {visibility, breadcrumb, foldersUnderBreadcrumb, contents, folders, selectedContentsItemIds};
};

const mapDispatchToProps = (dispatch) => {
    const {openDialog, closeDialog} = dialogActions;
    const {fetchFoldersUnderFoldersAsync, moveContents, moveFolder} = contentsActions;

    return {
        actions: bindActionCreators({openDialog, closeDialog, fetchFoldersUnderFoldersAsync, moveContents, moveFolder}, dispatch)
    }
};

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