mobx#when TypeScript Examples

function connectConference() {
  window.addEventListener('beforeunload', (ev) => {
    logStr = `${logStr}beforeunload called. ${Date()} `
    localStorage.setItem('log', logStr)

    //  prevent leaving from and reloading browser, when the user shares screen(s).
    if (!errorInfo.type &&
      (contents.tracks.localMains.size || contents.tracks.localContents.size)) {
      logStr += 'Ask user. '
      ev.preventDefault()
      ev.stopImmediatePropagation()
      ev.returnValue = ''
      localStorage.setItem('log', logStr)

      return ev.returnValue
    }
    connection.leaveConference()
    connection.disconnect().then((arg) => {
      logStr += `Diconnected (${arg}). `
      localStorage.setItem('log', logStr)
    }).catch((reason) => {
      logStr += `Failed to diconnected (${reason}). `
      localStorage.setItem('log', logStr)
    })
  })

  errorInfo.connectionStart()
  connection.init().then(
    () => {
      when(() => errorInfo.type === '', () => {
        const conferenceName = urlParameters.room || '_'
        connection.joinConference(conferenceName)
      })
    },
  )
}

/// check errors after try to start the connection to the XMPP server.
  @action connectionStart() {
    //  even when reload, user interaction is needed to play sound.
    //  const nav = window?.performance?.getEntriesByType('navigation')[0] as any
    //  console.log(nav)
    if (urlParameters.skipEntrance !== null/* || nav.type === 'reload'*/  ){
      this.clear()
      participants.local.sendInformation()
    }
    this.enumerateDevices()
    if (urlParameters.testBot === null)  {
      when(() => this.type === '', () => {
        setTimeout(this.checkConnection.bind(this), 4 * 1000)
      })
    }else { //  testBot
      setTimeout(this.startTestBot.bind(this), 3000)
    }
  }

async init(target: HTMLElement) {
        let appConfigData: any;
        try {
            appConfigData = (await axios.get("/config/config.json")).data;
        } catch (e) {
            // No logging support yet
            // tslint:disable-next-line:no-console
            console.error(`Couldn't load application config!`, e);
            return;
        }
        let appConfig = new AppConfig();
        appConfig.fromJson(appConfigData);

        onReactionError((e) => {
            // TODO proper logging
            // logger.error(e);
        });

        when(() => true, () => {
            ReactDOM.render(
                React.createElement(AppComponent, { appConfig }),
                target
            );
        });
    }

@action.bound
    private publishAfterInit(topic: string, data?: any) {
        when(
            () => this.store.viewModels.mqttView.initialized,
            () => {
                // wait for all subs
                setTimeout(() => this.publish(topic, data), 0);
            }
        );
    }

private loadDashboard() {
        const { dashboardView, zWaveView } = this.store.viewModels;
        const { mqttService } = this.store.services;

        mqttService.subscribe(mqttPathes.dashboardLoadResponse, result => {
            const { data } = result;
            const savedData: any = deserialize(SaveData, data);
            dashboardView.pages = (savedData as SaveData).pages;
            this.removeDeleted();
        });

        when(
            () => !!zWaveView.nodeControl.nodes.length,
            () => {
                mqttService.publish(mqttPathes.dashboardLoadRequest);
                dashboardView.loading = false;
            }
        );
    }

@action.bound
    private checkDirty() {
        this.dirtyReactionDisposer = when(
            () => {
                const newHash = hash(
                    this.editPages.length +
                        JSON.stringify(this.editPages.map(x => x.name)) +
                        JSON.stringify(this.editPages.flatMap(x => x.widgets))
                );

                if (!this.dirtyHash) {
                    this.dirtyHash = newHash;
                    return false;
                }

                if (this.dirtyHash !== newHash) {
                    return true;
                }

                return false;
            },
            () => {
                this.dirty = true;
            }
        );
    }

@action.bound
    loadConfigData(nodeid: string) {
        const { zWaveView, commonView } = this.store.viewModels;

        if (!zWaveView.nodeLoaded) {
            commonView.loading = true;
            when(
                () => zWaveView.nodeLoaded,
                () => {
                    commonView.loading = false;
                    this.loadConfigData(nodeid);
                }
            );
        }

        const node = zWaveView.nodeControl.nodes.find(x => x.nodeid === Number(nodeid));
        if (!node) return;

        const newNode: IZwaveNode = JSON.parse(JSON.stringify(node));
        if (!newNode.name) newNode.name = '';

        zWaveView.nodeControl.config.data = newNode;
    }

/**
   * initialize the batch store
   */
  init() {
    // when the pubkey is fetched from the API and set in the nodeStore, fetch
    // the node's tier
    when(
      () => !!this._store.nodeStore.pubkey && !this.nodeTier,
      () => this.fetchNodeTier(),
    );
  }

setupReactions(): void {
        when(
            () => this.startupStatus == StartupStatus.UpdateNotAvailable,
            async () => {
                await this.start()
            },
        )
        reaction(
            () => this.status,
            async (status) => {
                if (status == DaemonStatusType.Down) {
                    log.info("Connection to Mysterium Node lost (auto-start in 5s)")
                    setTimeout(async () => {
                        if (this.status == DaemonStatusType.Down) {
                            await this.start()
                        } else {
                            log.info("Connection to Mysterium Node restored")
                        }
                    }, 5_000)
                }
            },
        )
        reaction(
            () => this.status,
            async (status) => {
                if (status == DaemonStatusType.Up) {
                    this.eventSource = sseConnect()
                }
            },
        )
        this.root.navigation.showLoading()
        this.update()
    }

setupReactions(): void {
        reaction(
            () => this.root.daemon.status,
            async (status) => {
                if (status == DaemonStatusType.Up && this.root.connection.status === ConnectionStatus.NOT_CONNECTED) {
                    when(
                        () => this.root.config.loaded,
                        () => {
                            this.fetchProposals().then(() => {
                                this.setProposalsCurrent()
                            })
                            this.fetchProposalFilterPresets()
                        },
                    )
                }
            },
        )
        setInterval(async () => {
            if (this.root.daemon.status != DaemonStatusType.Up) {
                return
            }
            if (this.root.connection.status === ConnectionStatus.CONNECTED) {
                return
            }
            await this.fetchProposals()
        }, proposalRefreshRate)
    }

@action.bound
    private subscribeAfterInit(topic: string, callback: (result: any) => void) {
        when(
            () => this.store.viewModels.mqttView.initialized,
            () => this.subscribe(topic, callback)
        );
    }

setupReactions(): void {
        when(
            () => this.root.daemon.status == DaemonStatusType.Up,
            () => {
                this.fetchMystToUsdRate()
            },
        )
    }