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

Nexshop Web Contents Project

import React, {Component} from 'react';
import {
    Redirect,
    Switch,
    Route,
    withRouter
} from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import ContentsMain from './contents-main';
import Playlist from './playlist/playlist';
import PlaylistPreview from './preview/playlist/playlist-preview';
import {closeFloatingView} from '../action/floating-view';
import ContentsPreview from "./preview/contents/contents-preview";
import Scene from "./scene/scene";
import ScenePreview from "./preview/scene/scene-preview";

class ContentsRouter extends Component {
    componentDidMount() {
        this.props.history.listen(() => {
            this.props.actions.closeFloatingView();
        });
    }

    render() {
        const {match: {url}, rootFolderId} = this.props;

        return (
            <div>
                <Switch>
                    <Route path={`${url}/main`} component={ContentsMain}/>
                    <Redirect exact from={`${url}/folder/${rootFolderId}`} to="/contents/main"/>
                    <Route path={`${url}/folder/:folderId`} component={ContentsMain}/>
                    <Route path={`${url}/search`} component={ContentsMain}/>
                    <Route path={`${url}/create-playlist`} component={Playlist}/>
                    <Route path={`${url}/playlist-detail`} component={Playlist}/>
                    <Route path={`${url}/playlist-preview`} component={PlaylistPreview}/>
                    <Route path={`${url}/contents-preview`} component={ContentsPreview}/>
                    <Route path={`${url}/scene`} component={Scene}/>
                    <Route path={`${url}/scene-preview`} component={ScenePreview}/>
                    <Redirect exact from="*" to="/contents/main"/>
                </Switch>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    const {contents: {rootFolderId}} = state;

    return {rootFolderId};
};

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators({closeFloatingView}, dispatch)
    }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ContentsRouter));