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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
 
36x
 
 
12x
 
12x
 
 
 
 
 
12x
12x
 
12x
12x
 
12x
3x
 
3x
3x
 
 
 
 
 
 
 
 
1x
 
 
30x
15x
15x
15x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
12x
12x
 
 
 
 
import React, {Component} from 'react';
import {Router, Redirect, Route, Switch} from "react-router-dom";
import NotFound from './not-found';
import {Provider, connect} from 'react-redux';
import {ContentsRouter} from 'nexshop-web-contents';
import {ScheduleEditor} from 'nexshop-web-schedule';
import {Screen} from 'nexshop-web-screen';
import {DiscardConfirm} from 'nexshop-web-alert';
import {contentsActions} from "nexshop-web-store";
import {AdminMain} from 'nexshop-web-admin';
import {actions as popupActions} from 'nexshop-web-popup';
import NotificationPopup from './popup/notification-popup';
import {CircularProgress, MuiThemeProvider} from "material-ui";
 
class RootComponent extends Component {
    constructor(props) {
        super(props);
 
        this.closeNotificationPopup = this.closeNotificationPopup.bind(this);
 
        this.state = {
            notificationPopupVisibility: false,
            notificationPopupMessage: '',
        };
    }
 
    componentWillMount() {
        const {store} = this.props;
 
        store.dispatch(contentsActions.fetchAllUnderRootFolderAsync());
        store.dispatch(contentsActions.fetchRootFolderAsync());
 
        store.subscribe(() => {
            const {popup: {notification: {visibility, message} = {}}} = store.getState();
 
            Eif (this.state.notificationPopupVisibility !== visibility) {
                this.setState({
                    notificationPopupVisibility: visibility,
                    notificationPopupMessage: message,
                });
            }
        });
    }
 
    closeNotificationPopup() {
        this.props.store.dispatch(popupActions.closePopup('notification'));
    }
 
    render() {
        const {notificationPopupVisibility, notificationPopupMessage} = this.state;
        const {isLoading} = this.props;
        return (
            <Provider store={this.props.store}>
                <Router history={this.props.history}>
                    <div>
                        <Switch>
                            <Route path="/contents" component={ContentsRouter}/>
                            <Route path="/schedule" component={ScheduleEditor}/>
                            <Route path="/screen" component={Screen}/>
                            <Route path="/admin" component={AdminMain}/>
                            <Redirect exact from="/" to="/contents"/>
                            <Route component={NotFound}/>
                        </Switch>
                        <DiscardConfirm history={this.props.history}/>
                        {
                            isLoading &&
                            <div className="spinner-wrapper">
                                <MuiThemeProvider>
                                    <CircularProgress
                                        color="#5c65c0"
                                        size={30}
                                        thickness={4}
                                    />
                                </MuiThemeProvider>
                            </div>
                        }
                        {
                            notificationPopupVisibility &&
                            <NotificationPopup text={notificationPopupMessage} onClose={this.closeNotificationPopup}/>
                        }
                    </div>
                </Router>
            </Provider>
        );
    }
}
 
const mapStateToProps = (state) => {
    const {nexFetch: {isLoading}} = state;
    return {isLoading};
};
 
 
export default connect(mapStateToProps)(RootComponent);