Embedded.js

import React, { Component, Suspense } from 'react'
import { connect } from 'react-redux'
import { toLazyDynamicComponent, APP_PANEL } from './dynamicutilities'
import Login from '../../views/security/Login'
import ReconnectingWebSocket from 'reconnecting-websocket'

const wsProto = window.location.protocol == 'https:' ? 'wss' : 'ws'

class Embedded extends Component {
  constructor(props) {
    super(props)
    this.state = {
      component: toLazyDynamicComponent(this.props.match.params.moduleId, APP_PANEL)
    }
    this.websockets = []

    this.adminUI = {
      hideSideBar: () => {
        window.dispatchEvent(new Event('sidebar:hide'))
      },
      getApplicationUserData:
        (appDataVersion, path = '') =>
          fetch(`/signalk/v1/applicationData/user/${this.props.match.params.moduleId}/${appDataVersion}${path}`,
            { credentials: 'include' }).then(r => {
              if (r.status != 200) {
                throw new Error(r)
              }
              return r
            }).then(r => r.json()),
      setApplicationUserData:
        (appDataVersion, data = {}, path = '') =>
          fetch(`/signalk/v1/applicationData/user/${this.props.match.params.moduleId}/${appDataVersion}${path}`,
            {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(data),
              credentials: 'include'
            }).then(r => {
              if (r.status != 200) {
                throw new Error(r)
              }
              return r
            }),
      openWebsocket: (params) => {
        const knownParams = ['subscribe', 'sendCachedValues']
        const queryParam = knownParams.map((p,i) => [i, params[p]]).filter(x => x[1] !== undefined).map(([i,v]) => `${knownParams[i]}=${v}`).join('&')
        const ws = new ReconnectingWebSocket(`${wsProto}://${window.location.host}/signalk/v1/stream?${queryParam}`)
        this.websockets.push(ws)
        return ws
      },
      get: ({context, path}) => {
        const cParts = context.split('.')
        return fetch(`/signalk/v1/api/${cParts[0]}/${cParts.slice(1).join('.')}/${path}`, {
          credentials: 'include'
        })
      },
      Login
    }
  }

  componentWillUnmount() {
    this.websockets.forEach((ws) => {
      try {
        ws.close()
      } catch(e) {
        console.error(e)
      }
    })
  }

  render() {
    return (
      <div style={{ backgroundColor: 'aliceblue', height: 'calc(100vh - 105px)' }}>
        <Suspense fallback='Loading...'>
          {React.createElement(this.state.component, { ...this.props, adminUI: this.adminUI })}
        </Suspense>
      </div>

    )
  }
}

const mapStateToProps = ({ loginStatus }) => ({ loginStatus })

export default connect(mapStateToProps)(Embedded)