nexshop-web-skeleton/src/component/root-component.js

Nexshop Web Skeleton Project

import React, {Component} from 'react';
import {Redirect, Route, Router, Switch} from "react-router-dom";
import {connect, Provider} from 'react-redux';
import {ContentsRouter} from 'nexshop-web-contents';
import {ScheduleRouter} from 'nexshop-web-schedule';
import {Screen} from 'nexshop-web-screen';
import {contentsActions, discardConfirmActions} from "nexshop-web-store";
import {DiscardConfirm} from "nexshop-web-elements";
import {AdminMain, Login} from 'nexshop-web-admin';
import CircularProgress from "material-ui/CircularProgress";
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {MuiThemeProvider} from "material-ui/styles/index";
import NotFound from './not-found';
import {bindActionCreators} from "redux";

const newTheme = getMuiTheme({
    fontFamily: 'Open Sans, sans-serif',
    flatButton: {
        disabledTextColor: '#c0c3e7',
    },
    palette: {
        primary1Color: '#2e3ab1',
        accent1Color: '#666666',
        // accent2Color: grey100,
        // accent3Color: grey500,
        // textColor: darkBlack,
        // alternateTextColor: white,
        // canvasColor: white,
        // borderColor: grey300,
        // disabledColor: fade(darkBlack, 0.3),
        // pickerHeaderColor: cyan500,
        // clockCircleColor: fade(darkBlack, 0.07),
        // shadowColor: fullBlack,
    },
});

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

        this.onDiscard = this.onDiscard.bind(this);
        this.onContinue = this.onContinue.bind(this);
    }

    componentWillMount() {
        this.props.actions.fetchRootFolderAsync();
    }

    onDiscard() {
        const {callback, discardAction, store: {dispatch}, actions: {closeDiscardConfirm}} = this.props;
        callback(true);
        closeDiscardConfirm();

        if(discardAction) {
            dispatch(discardAction);
        }
    }

    onContinue() {
        const {callback, actions: {closeDiscardConfirm}} = this.props;

        callback(false);
        closeDiscardConfirm();
    }

    render() {
        const {isLoading, history, message, block, callback} = this.props;
        return (
            <Provider store={this.props.store}>
                <Router history={this.props.history}>
                    <MuiThemeProvider muiTheme={newTheme}>
                        <div>
                            <Switch>
                                <Route path="/contents" component={ContentsRouter}/>
                                <Route path="/schedule" component={ScheduleRouter}/>
                                <Route path="/screen" component={Screen}/>
                                <Route path="/admin" component={AdminMain}/>
                                <Route path="/login" component={Login}/>
                                <Redirect exact from="/" to="/contents"/>
                                <Route component={NotFound}/>
                            </Switch>
                            <DiscardConfirm history={history}
                                            visibility={callback !== null}
                                            message={message}
                                            block={block}
                                            onDiscard={this.onDiscard}
                                            onContinue={this.onContinue}
                            />
                            {
                                isLoading &&
                                <div className="spinner-wrapper">
                                    <CircularProgress
                                        color="#5c65c0"
                                        size={30}
                                        thickness={4}
                                    />
                                </div>
                            }
                        </div>
                    </MuiThemeProvider>
                </Router>
            </Provider>
        );
    }
}

const mapStateToProps = (state) => {
    const {
        nexFetch: {isLoading},
        discardConfirm: {message, callback, block = false, discardAction},
    } = state;

    return {isLoading, message, callback, block, discardAction};
};

const mapDispatchToProps = (dispatch) => {
    const {closeDiscardConfirm} = discardConfirmActions;
    const {fetchRootFolderAsync} = contentsActions;

    return {
        actions: bindActionCreators({
            closeDiscardConfirm,
            fetchRootFolderAsync,
        }, dispatch),
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(RootComponent);