nexshop-web-contents/src/component/contents/contents.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {contentsActions, playlistActions, previewActions, sceneActions} from "nexshop-web-store";
import {actions as dialogActions} from "nexshop-web-dialog";
import {actions as popupActions} from "nexshop-web-popup";
import ContentsView from "./contents-view";
import FloatingView from "./floating-view/floating-view";
import {closeFloatingView, openFloatingView} from "../../action/floating-view";

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

        this.contentsItemSelected = this.contentsItemSelected.bind(this);
        this.contentsItemDetailAsync = this.contentsItemDetailAsync.bind(this);
        this.closeContextMenuPopup = this.closeContextMenuPopup.bind(this);
        this.removeSelectedContentsItem = this.removeSelectedContentsItem.bind(this);
        this.rename = this.rename.bind(this);
        this.contextMenuClicked = this.contextMenuClicked.bind(this);
        this.onFolderItemDoubleClick = this.onFolderItemDoubleClick.bind(this);
        this.onBreadcrumbItemClick = this.onBreadcrumbItemClick.bind(this);
        this.moveToPreview = this.moveToPreview.bind(this);
        this.copyToClick = this.copyToClick.bind(this);

        this.state = {
            contextMenuOpenedIndex: -1,
        };
    }

    componentDidMount() {
        this.props.actions.removeSelectedContentsItemIndex();
        document.getElementsByTagName('body')[0].addEventListener('click', this.removeSelectedContentsItem);
    }

    componentWillUnmount() {
        document.getElementsByTagName('body')[0].removeEventListener('click', this.removeSelectedContentsItem);
    }

    contentsItemSelected(id) {
        const {setSelectedContentsItemIds} = this.props.actions;

        setSelectedContentsItemIds(id);
    }

    removeSelectedContentsItem(e) {
        if (e.target.nodeName !== 'TD' && e.target.parentNode.nodeName !== 'TD') {
            this.props.actions.removeSelectedContentsItemIndex();
        }
    }

    contextMenuClicked(type, index) {
        const {openPopup, closeAllPopup} = this.props.actions;
        closeAllPopup();
        openPopup('context-menu');

        if (index !== this.state.contextMenuOpenedIndex) {
            this.setState({
                contextMenuOpenedIndex: index,
            });
            this.contentsItemSelected(this.getIdForType(type, index));
        }
    }

    getIdForType(type, index) {
        return isContents(type) ? [this.props.contents[index].id] : [this.props.folders[index].id]
    }

    rename(type) {
        const {updateContentsItemData, updateFolderData} = this.props.actions;
        let originData = {
            ...this.props[isContents(type) ? 'contents' : 'folders'][this.state.contextMenuOpenedIndex],
            status: 'new'
        };

        this.closeContextMenuPopup();

        isContents(type) ? updateContentsItemData(originData) : updateFolderData(originData);
    }

    closeContextMenuPopup() {
        const {closeAllPopup} = this.props.actions;
        this.setState({
            contextMenuOpenedIndex: -1,
        });
        closeAllPopup();
    }

    copyToClick(type, index) {
        const {copyContents, closeAllPopup} = this.props.actions;
        closeAllPopup();
        copyContents(this.getIdForType(type, index));
    }

    contentsItemDetailAsync(contentsItem) {
        const {playlistDetailAsync, moveSceneDetailAsync} = this.props.actions;
        const {type} = contentsItem;

        if (type === 'playlist') {
            playlistDetailAsync(contentsItem.id, '/contents/playlist-detail');
        } else if (type === 'scene') {
            moveSceneDetailAsync(contentsItem.id);
        }
    }

    onFolderItemDoubleClick(folder) {
        const {pushFolderBreadcrumb} = this.props.actions;
        pushFolderBreadcrumb({name: folder.name, id: folder.id});

        this.props.history.push(`/contents/folder/${folder.id}`);
    }

    moveToPreview(contentsItemId) {
        const {selectContentsItemForPreview, playlistPreviewAsync, selectScenePreview, closeAllPopup} = this.props.actions;
        closeAllPopup();

        const contentsItem = this.props.contents.find(c => c.id === contentsItemId);
        const previewWindowRects = document.getElementById('root').getClientRects()[0];
        const previewWindowSize = {width: previewWindowRects.width, height: previewWindowRects.height};

        selectContentsItemForPreview(contentsItemId);

        if (contentsItem.type === 'playlist') {
            playlistPreviewAsync(contentsItemId, previewWindowSize);
        } else if (contentsItem.type === 'scene') {
            selectScenePreview(contentsItem, previewWindowSize);
            this.props.history.push('/contents/scene-preview');
        } else {
            this.props.history.push('/contents/contents-preview');
        }
    }

    onBreadcrumbItemClick(folderId, breadcrumbIndex) {
        const {popFolderBreadcrumb} = this.props.actions;
        popFolderBreadcrumb(breadcrumbIndex);

        this.props.history.push(`/contents/folder/${folderId}`);
    }

    render() {
        const {
            contents, folders, floatingViewVisibility, selectedUploadFiles, breadcrumb, searchOption,
            contextMenuVisibility, selectedContentsItemIds,

            actions: {
                closeFloatingView, openDialog, willBeDeletedContentsItem, willBeOverwroteContentItem,
                selectUploadFiles, uploadFilesAsync, openFloatingView, updateFolderAsync, updateFolderData,
                updateContentsItemAsync, updateContentsItemData
            }
        } = this.props;

        return (
            <div>
                <ContentsView contents={contents}
                              folders={folders}
                              willBeDeletedContentsItem={willBeDeletedContentsItem}
                              willBeOverwroteContentItem={willBeOverwroteContentItem}
                              openDialog={openDialog}
                              selectUploadFiles={selectUploadFiles}
                              uploadFilesAsync={uploadFilesAsync}
                              openFloatingView={openFloatingView}
                              onContentsClick={(type, index) => {
                                  this.contentsItemSelected(this.getIdForType(type, index))
                              }}
                              onContentItemDoubleClick={(index) => this.contentsItemDetailAsync(contents[index])}
                              onContextMenuClicked={(type, index) => this.contextMenuClicked(type, index)}
                              updateFolderAsync={updateFolderAsync}
                              updateContentsItemAsync={updateContentsItemAsync}
                              contextMenuVisibility={contextMenuVisibility || false}
                              rename={this.rename}
                              closePopup={this.closeContextMenuPopup}
                              updateFolderData={updateFolderData}
                              updateContentsItemData={updateContentsItemData}
                              onFolderItemDoubleClick={this.onFolderItemDoubleClick}
                              breadcrumb={breadcrumb}
                              onBreadcrumbItemClick={this.onBreadcrumbItemClick}
                              selectedContentsItemIds={selectedContentsItemIds}
                              onPreview={this.moveToPreview}
                              searchOption={searchOption}
                              copyToClick={this.copyToClick}
                />
                {
                    floatingViewVisibility &&
                    <FloatingView files={selectedUploadFiles}
                                  onClose={closeFloatingView}
                    />
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const {
        floatingView: {visibility},
        popup,
        contents: {selectedUploadFiles, contents, folders, rootFolder, breadcrumb, selectedContentsItemIds, searchOption},
    } = state;

    const contextMenuVisibility = popup['context-menu'] && popup['context-menu'].visibility;

    return {
        floatingViewVisibility: visibility,
        selectedUploadFiles,
        contents,
        folders,
        rootFolder,
        breadcrumb,
        contextMenuVisibility,
        selectedContentsItemIds,
        searchOption,
    };
};

const mapDispatchToProps = (dispatch) => {
    const {openDialog} = dialogActions;
    const {playlistDetailAsync} = playlistActions;
    const {playlistPreviewAsync} = previewActions;
    const {moveSceneDetailAsync, selectScenePreview} = sceneActions;
    const {closePopup, openPopup, closeAllPopup} = popupActions;

    const {
        fetchContentsAsync,
        willBeDeletedContentsItem,
        willBeOverwroteContentItem,
        selectContentsItemForPreview,
        selectUploadFiles,
        uploadFilesAsync,
        setSelectedContentsItemIndex,
        removeSelectedContentsItemIndex,
        updateFolderAsync,
        updateFolderData,
        pushFolderBreadcrumb,
        popFolderBreadcrumb,
        setSelectedContentsItemIds,
        updateContentsItemData,
        updateContentsItemAsync,
        copyContents,
    } = contentsActions;

    return {
        actions: bindActionCreators({
            openFloatingView,
            closeFloatingView,
            fetchContentsAsync,
            willBeDeletedContentsItem,
            willBeOverwroteContentItem,
            selectContentsItemForPreview,
            selectUploadFiles,
            uploadFilesAsync,
            openDialog,
            setSelectedContentsItemIndex,
            removeSelectedContentsItemIndex,
            updateFolderAsync,
            playlistPreviewAsync,
            selectScenePreview,
            playlistDetailAsync,
            moveSceneDetailAsync,
            updateFolderData,
            pushFolderBreadcrumb,
            popFolderBreadcrumb,
            openPopup,
            closePopup,
            closeAllPopup,
            setSelectedContentsItemIds,
            updateContentsItemData,
            updateContentsItemAsync,
            copyContents,
        }, dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Contents)

const isContents = function (type) {
    return type !== 'folder';
};