1 | import React, { lazy, Suspense } from 'react';
|
2 | import { connect } from "react-redux";
|
3 | import { hot } from 'react-hot-loader/root';
|
4 | import Monitor from "./components/framework/monitor";
|
5 | import DatasetLoader from "./components/datasetLoader";
|
6 | import Spinner from "./components/framework/spinner";
|
7 | import Head from "./components/framework/head";
|
8 | import Notifications from "./components/notifications/notifications";
|
9 |
|
10 | const Main = lazy(() => import("./components/main"));
|
11 | const Splash = lazy(() => import("./components/splash"));
|
12 | const Status = lazy(() => import("./components/status"));
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | if (module.hot) {
|
19 | setTimeout(() => window.dispatchEvent(new Event('resize')), 500);
|
20 | }
|
21 |
|
22 | @connect((state) => ({displayComponent: state.general.displayComponent}))
|
23 | class MainComponentSwitch extends React.Component {
|
24 | render() {
|
25 |
|
26 | switch (this.props.displayComponent) {
|
27 | case "main":
|
28 | return (
|
29 | <Suspense fallback={<Spinner/>}>
|
30 | <Main/>
|
31 | </Suspense>
|
32 | );
|
33 | case "splash":
|
34 | return (
|
35 | <Suspense fallback={null}>
|
36 | <Splash/>
|
37 | </Suspense>
|
38 | );
|
39 | case "status":
|
40 | return (
|
41 | <Suspense fallback={<Spinner/>}>
|
42 | <Status/>
|
43 | </Suspense>
|
44 | );
|
45 | case "datasetLoader":
|
46 | return (<DatasetLoader/>);
|
47 | default:
|
48 | console.error(`reduxStore.general.displayComponent is invalid (${this.props.displayComponent})`);
|
49 | return (<Splash/>);
|
50 | }
|
51 | }
|
52 | }
|
53 |
|
54 | const Root = () => {
|
55 | return (
|
56 | <div>
|
57 | <Head/>
|
58 | <Monitor/>
|
59 | <Notifications/>
|
60 | <MainComponentSwitch/>
|
61 | </div>
|
62 | );
|
63 | };
|
64 |
|
65 | export default hot(Root);
|