overflow_app/src/ts/@overflow/app/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider, Store } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
import { History } from 'history';

import * as injectTapEventPlugin from 'react-tap-event-plugin';

import Platform from '@overflow/commons/platform';
import AppContext from '@overflow/commons/context';
import * as AppContextLifecycleActions from '@overflow/commons/context/redux/action/lifecycle';
import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
import { store, sagaMiddleware, history } from './redux/store';

import appConfig, { Config } from './config';

import sagas from './redux/saga';
// import routes from './router';

import App from './views/App';

injectTapEventPlugin();

const rpcURL = 'ws://127.0.0.1:18081/rpc';


class Application {
  private config: Config;
  private container: HTMLElement;
  private context: AppContext;
  private rpcClient: WebSocketRPC;
  private store: Store<any>;
  private sagaMiddleware: SagaMiddleware<any>;
  private history: History;

  public constructor() {
    this.config = appConfig;
    this.sagaMiddleware = sagaMiddleware;
    this.store = store;
    this.history = history;
  }

  public static async Run(): Promise<void> {
    let application = new Application();
    return application.start();
  }

  private async start(): Promise<void> {
    try {
      this.container = await Platform.getAppContainer(this.config.container.placeholderID);
      this.displayLoading();

      this.context = await this.initContext();
      // this.rpcClient = await this.initRpcClient();
      await this.initSagaEffect();

      this.store.dispatch(AppContextLifecycleActions.initialized());

      this.displayApp();
    } catch (e) {
      console.error(e);
      this.displayError(e);
    }
  }

  private initContext(): Promise<AppContext> {
    const appContext = new Promise<AppContext>(resolve => {
      const context = AppContext.getContext();
      resolve(context);
    });

    return appContext;
  }

  private initRpcClient(): Promise<WebSocketRPC> {
    const rpcClient = new Promise<WebSocketRPC>((resolve, reject) => {
      let client = new WebSocketRPC(this.config.rpc.url);
      client.initialize()
        .then(() => {
          resolve(client);
        })
        .catch((err: any) => {
          reject(err);
        });
    });

    return rpcClient;
  }

  private initSagaEffect(): Promise<void> {
    const rpcClient = new Promise<void>(resolve => {
      this.sagaMiddleware.run(sagas);
      resolve();
    });

    return rpcClient;
  }


  private displayLoading(): void {
    ReactDOM.render(
        <div style={{
          width: '100vw',
          height: '100vh',
          backgroundColor: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          }}>
            <h1>Loading...</h1>
        </div>,
        this.container,
    );
  }

  private displayError(e: Error): void {
    ReactDOM.render(
        <div style={{
          width: '100vw',
          height: '100vh',
          backgroundColor: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          }}>
            <h1>{e.message}</h1>
        </div>,
        this.container,
    );
  }


  private displayApp(): void {
    ReactDOM.render(
      <Provider store={this.store}>
        <ConnectedRouter history={this.history}>
          <App />
        </ConnectedRouter>
      </Provider>,
      this.container,
    );
  }

}

Application.Run();