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

Nexshop Web Contents Project

import React, {Component} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import PropTypes from 'prop-types';
import {NavigationBarView} from 'nexshop-web-navigation';
import {contentsActions, playlistActions, sceneActions} from "nexshop-web-store";
import {actions as dialogActions} from "nexshop-web-dialog";
import {actions as popupActions} from "nexshop-web-popup";
import ContentsMainView from "./contents-main-view";
import {openFloatingView} from "../action/floating-view";
import '../asset/css/index.scss';

const CONTENTS = 'contents';
const {
    selectUploadFiles,
    uploadFilesAsync,
    createNewFolderAsync,
    fetchExistContentNameAsync,
    replaceContentNameValidity,
    fetchAllUnderFolderAsync,
    fetchAllUnderRootFolderAsync,
    fetchBreadcrumbAsync,
    fetchContentsBySearchOptionAsync,
    popFolderBreadcrumb,
    setClearSearchOption,
    setSelectedContentsItemIds,
    uploadFileExist,
    updateFilesAsync
} = contentsActions;

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

        this.onCreatePlaylistMenuClicked = this.onCreatePlaylistMenuClicked.bind(this);
        this.onCreateSceneMenuClicked = this.onCreateSceneMenuClicked.bind(this);
        this.onAddButtonClicked = this.onAddButtonClicked.bind(this);
        this.onPlaylistCreated = this.onPlaylistCreated.bind(this);
        this.onSceneCreated = this.onSceneCreated.bind(this);
        this.onCreateNewFolderClicked = this.onCreateNewFolderClicked.bind(this);
        this.uploadFiles = this.uploadFiles.bind(this);
        this.openDialogAndClosePopup = this.openDialogAndClosePopup.bind(this);
        this.closeDialog = this.closeDialog.bind(this);
        this.initDataFromRouter = this.initDataFromRouter.bind(this);

        this.folderId;
        this.searchOptions;
    }

    componentWillMount() {
        this.initDataFromRouter(this.props, true);
    }

    componentWillReceiveProps(nextProps) {
        this.initDataFromRouter(nextProps);

        if (nextProps.willOverwriteContent && nextProps.willOverwriteContent.length > 0) {
            if (nextProps.behaviorExistFile === 'OVERWRITE') {
                nextProps.willOverwriteContent.forEach((file) => {
                    if (!file.status || file.status !== 'done') {
                        this.props.actions.updateFilesAsync(file);
                    }
                });
            } else if (this.props.willOverwriteContent !== nextProps.willOverwriteContent) {
                if (nextProps.behaviorExistFile === 'SKIP') {
                    nextProps.willOverwriteContent.forEach((file) => {
                        this.props.actions.uploadFileExist(file);
                    });
                } else {
                    this.props.actions.openDialog('overwrite-contents-item');
                }
            }
        }
    }

    initDataFromRouter(props, isInit) {
        const {
            match: {params: {folderId}},
            location: {state},
            actions: {
                fetchAllUnderFolderAsync, fetchBreadcrumbAsync, fetchAllUnderRootFolderAsync,
                fetchContentsBySearchOptionAsync, popFolderBreadcrumb, setClearSearchOption, setSelectedContentsItemIds
            }
        } = props;

        if (this.folderId !== folderId || this.searchOptions !== state) {

            if (folderId) {
                fetchAllUnderFolderAsync(folderId);
                fetchBreadcrumbAsync(folderId);
                setClearSearchOption();
                setSelectedContentsItemIds([]);
            } else if (state) {
                fetchContentsBySearchOptionAsync(state);
                popFolderBreadcrumb(0);
            } else {
                fetchAllUnderRootFolderAsync();
                setSelectedContentsItemIds([]);
            }

            this.folderId = folderId;
            this.searchOptions = state;
        } else if (isInit) {
            fetchAllUnderRootFolderAsync();
            setSelectedContentsItemIds([]);
        }
    }

    onAddButtonClicked(e) {
        e.stopPropagation();

        const {addMenuVisibility, actions: {closeAllPopup, openPopup}} = this.props;

        closeAllPopup();
        !addMenuVisibility && openPopup('add-menu');
    }

    onPlaylistCreated(title, resolution) {
        const {actions: {createPlaylist, closeDialog}, history} = this.props;

        createPlaylist(title, resolution);
        closeDialog();

        history.push('/contents/create-playlist');
    }

    onCreatePlaylistMenuClicked() {
        this.openDialogAndClosePopup('create-playlist');
    }

    onSceneCreated(title, resolution) {
        const {actions: {createScene, closeDialog}, history} = this.props;

        const {text, orientation} = resolution;
        let width = text.split('x')[0];
        let height = text.split('x')[1];

        createScene(title, {width, height}, orientation);
        closeDialog();

        history.push('/contents/scene');
    }

    onCreateSceneMenuClicked() {
        this.openDialogAndClosePopup('create-scene');
    }

    onCreateNewFolderClicked() {
        const {actions: {closePopup}, breadcrumb} = this.props;
        const currentFolderId = breadcrumb[breadcrumb.length - 1].id;

        this.props.actions.createNewFolderAsync(currentFolderId);

        closePopup('add-menu');
    }

    openDialogAndClosePopup(dialogName) {
        const {openDialog, closePopup} = this.props.actions;

        openDialog(dialogName);
        closePopup('add-menu');
    }

    uploadFiles(files) {
        const {actions: {selectUploadFiles, uploadFilesAsync, openFloatingView, closePopup}, breadcrumb} = this.props;
        const currentFolderId = breadcrumb[breadcrumb.length - 1].id;

        selectUploadFiles(files);
        uploadFilesAsync(files, currentFolderId);
        openFloatingView();
        closePopup('add-menu');
    }

    closeDialog() {
        const {actions: {closeDialog}} = this.props;

        closeDialog();
    }

    render() {
        const {
            addMenuVisibility, actions: {closePopup, fetchExistContentNameAsync, replaceContentNameValidity, uploadFileExist},
            createPlaylistDialogVisibility, createSceneDialogVisibility, breadcrumb, contentNameExisted, willOverwriteContent
        } = this.props;

        return (
            <div>
                <NavigationBarView activeMenu={CONTENTS}/>
                <ContentsMainView
                    onCreateSceneMenuClicked={this.onCreateSceneMenuClicked}
                    onSceneCreated={this.onSceneCreated}
                    onCreatePlaylistMenuClicked={this.onCreatePlaylistMenuClicked}
                    onCreateNewFolderClicked={this.onCreateNewFolderClicked}
                    onPlaylistCreated={this.onPlaylistCreated}
                    onAddButtonClicked={this.onAddButtonClicked}
                    addMenuVisibility={addMenuVisibility}
                    onSelectFiles={this.uploadFiles}
                    fetchExistContentNameAsync={fetchExistContentNameAsync}
                    closeAddMenu={closePopup}
                    createPlaylistDialogVisibility={createPlaylistDialogVisibility}
                    createSceneDialogVisibility={createSceneDialogVisibility}
                    closeDialog={this.closeDialog}
                    breadcrumb={breadcrumb}
                    contentNameExisted={contentNameExisted}
                    replaceContentNameValidity={replaceContentNameValidity}
                    uploadFileExist={uploadFileExist}
                    history={this.props.history}
                    willOverwriteContent={willOverwriteContent}
                />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const {
        popup, dialog, contents: {
            contentNameExisted, breadcrumb,
            willOverwriteContent, selectedUploadFiles, behaviorExistFile
        }
    } = state;
    const addMenuVisibility = popup['add-menu'] && popup['add-menu'].visibility;
    const createSceneDialogVisibility = dialog === 'create-scene';
    const createPlaylistDialogVisibility = dialog === 'create-playlist';

    return {
        addMenuVisibility, createPlaylistDialogVisibility, createSceneDialogVisibility,
        contentNameExisted, breadcrumb, selectedUploadFiles, willOverwriteContent, behaviorExistFile
    };
};

const mapDispatchToProps = (dispatch) => {
    const {openDialog, closeDialog} = dialogActions;
    const {createPlaylist} = playlistActions;
    const {createScene} = sceneActions;
    const {openPopup, closePopup, closeAllPopup} = popupActions;

    return {
        actions: bindActionCreators({
            openDialog,
            closeDialog,
            openPopup,
            closePopup,
            closeAllPopup,
            selectUploadFiles,
            uploadFilesAsync,
            uploadFileExist,
            openFloatingView,
            createPlaylist,
            createScene,
            createNewFolderAsync,
            fetchExistContentNameAsync,
            replaceContentNameValidity,
            fetchAllUnderFolderAsync,
            fetchAllUnderRootFolderAsync,
            fetchBreadcrumbAsync,
            fetchContentsBySearchOptionAsync,
            popFolderBreadcrumb,
            setClearSearchOption,
            setSelectedContentsItemIds,
            updateFilesAsync
        }, dispatch)
    }
};

ContentsMainView.propTypes = {
    closeAddMenu: PropTypes.func.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(ContentsMain)