add socket model to app models

src/core/libs/socket/index.ts

@@ -1,13 +1,14 @@
 import io from 'socket.io-client'
-import { verbosity } from 'core/libs/verbosity'
+import verbosity from 'core/libs/verbosity'
 import { connect } from 'umi'
 import settings from 'core/libs/settings'
 import { notify } from 'core/libs/appInterface'
 
 const maxDeep_Attemp = Number(2)
+
 export class SocketConnection{
     ioConn: any
-    state: { address: any; connAttemps: number }
+    state: { address: any; connAttemps: number; registeredNamespaces: any; }
     props: any
     opts: any
 
@@ -15,9 +16,11 @@ export class SocketConnection{
         if (!props) {
             throw new Error("Mmm some props are not defined")
         }
+
         this.state = {
-            address: props.address,
-            connAttemps: Number(0)
+            address: props.payload.address,
+            connAttemps: Number(0),
+            registeredNamespaces: []
         }
 
         this.props = props
@@ -60,9 +63,15 @@ export class SocketConnection{
             // options for Node.js / React Native
             extraHeaders: {},
         }
+
         this.ioConn = io(this.state.address, this.opts)
         this.conn.open()
-
+        
+        this.ioConn.on('connect', (event:any) => {
+            notify.success("You are now online")
+            verbosity("Successfully connect")
+        })
+        
         this.ioConn.on("connect_error", () => {
             if (this.state.connAttemps >= maxDeep_Attemp) {
                 verbosity(['Maximun nº of attemps reached => max', maxDeep_Attemp + 1])
@@ -86,15 +95,15 @@ export class SocketConnection{
             notify.error(event)
         })
 
-        this.ioConn.on('connect', () => {
-            notify.success("You are now online")
-            verbosity("Successfully connect")
-        })
-
         this.ioConn.on('close', () => {
             verbosity("Connection closed!")
         })
         
+        this.ioConn.on('updateState', (event:any) => {
+            verbosity(["updating state > ", event])
+            this.props.connector.dispatcher({ type: "updateState", payload: event })
+        })
+
         this.ioConn.on('pingPong', (e:any) => {
             // woops
             const n = e + 1

src/layouts/PrimaryLayout.js

@@ -2,7 +2,7 @@
 /* global document */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {withRouter, connect} from 'umi'
+import { withRouter, connect } from 'umi'
 import {
   AppLayout
 } from 'components'
@@ -16,9 +16,11 @@ import * as antd from 'antd'
 import contextMenuList from 'globals/contextMenu'
 import styles from './PrimaryLayout.less'
 
+import ReduxDebugger from 'debuggers/redux'
+
 const { Content } = antd.Layout
 const { Sider, Overlay } = AppLayout
-const isActive = (key) => { return key? key.active : false }
+const isActive = (key) => { return key ? key.active : false }
 
 @withRouter
 @connect(({ app, contextMenu, loading }) => ({ app, contextMenu, loading }))
@@ -29,17 +31,17 @@ class PrimaryLayout extends React.Component {
       collapsed: app_config.default_collapse_sider ? true : false,
       isMobile: false
     }
-    
+
     // include API extensions
     window.openLink = (e) => {
-      if(this.props.app.embedded){
+      if (this.props.app.embedded) {
         this.props.app.electron.shell.openExternal(e)
-      }else{
+      } else {
         window.open(e)
       }
     }
 
-    window.requireQuery = (require) =>{
+    window.requireQuery = (require) => {
       return new Promise(resolve => {
         this.props.dispatch({
           type: 'app/requireQuery',
@@ -57,7 +59,7 @@ class PrimaryLayout extends React.Component {
         key: "inspectElement",
         payload: { x: e.xPos, y: e.yPos }
       }
-    }) 
+    })
 
     window.toogleSidebarCollapse = () => {
       this.props.dispatch({
@@ -70,9 +72,9 @@ class PrimaryLayout extends React.Component {
   componentDidMount() {
     if (this.props.app.embedded) {
       window.contextMenu.addEventListener(
-        { 
-          priority: 1, 
-          onEventRender: contextMenuList, 
+        {
+          priority: 1,
+          onEventRender: contextMenuList,
           ref: document.getElementById("root")
         }
       )
@@ -107,43 +109,43 @@ class PrimaryLayout extends React.Component {
     const { collapsed, isMobile } = this.state
     const { onCollapseChange } = this
     const currentTheme = theme.get()
-  
+
     const SiderProps = { isMobile, collapsed, onCollapseChange }
     const OverlayProps = { isMobile }
 
-    window.darkMode = isActive(currentTheme["darkmode"])? true : false
-    document.getElementsByTagName("body")[0].setAttribute("class", window.darkMode? "dark" : "light")
+    window.darkMode = isActive(currentTheme["darkmode"]) ? true : false
+    document.getElementsByTagName("body")[0].setAttribute("class", window.darkMode ? "dark" : "light")
 
     return (
       <React.Fragment>
-          {isActive(currentTheme['backgroundImage'])
-          ?<div style={{ 
-                  backgroundImage: `url(${currentTheme.backgroundImage.src})`,
-                  transition: "all 150ms linear",
-                  position: 'absolute',
-                  width: '100vw', 
-                  height: '100vh', 
-                  backgroundRepeat: "repeat-x",
-                  backgroundSize: "cover",
-                  backgroundPositionY: "center",
-                  overflow: "hidden", 
-                  opacity: currentTheme.backgroundImage.opacity
-                }} /> : null}
-          <antd.Layout id="app" className={classnames(styles.app, {
-            [styles.interfaced]: this.props.app.electron, 
-            [styles.dark_mode]: window.darkMode 
-          } )}>
-            <Sider {...SiderProps} />
-            <div className={styles.primary_layout_container}>
-                <Content
-                  id="primaryContent"
-                  className={styles.primary_layout_content}
-                >
-                  {children? children : null}
-                </Content>
-            </div>
-            <Overlay {...OverlayProps} />
-          </antd.Layout>
+        {isActive(currentTheme['backgroundImage'])
+          ? <div style={{
+            backgroundImage: `url(${currentTheme.backgroundImage.src})`,
+            transition: "all 150ms linear",
+            position: 'absolute',
+            width: '100vw',
+            height: '100vh',
+            backgroundRepeat: "repeat-x",
+            backgroundSize: "cover",
+            backgroundPositionY: "center",
+            overflow: "hidden",
+            opacity: currentTheme.backgroundImage.opacity
+          }} /> : null}
+        <antd.Layout id="app" className={classnames(styles.app, {
+          [styles.interfaced]: this.props.app.electron,
+          [styles.dark_mode]: window.darkMode
+        })}>
+          <Sider {...SiderProps} />
+          <div className={styles.primary_layout_container}>
+            <Content
+              id="primaryContent"
+              className={styles.primary_layout_content}
+            >
+              {children ? children : null}
+            </Content>
+          </div>
+          <Overlay {...OverlayProps} />
+        </antd.Layout>
       </React.Fragment>
     )
   }

src/models/app.js

@@ -10,7 +10,7 @@ import { queryIndexer } from 'core'
 import jwt from 'jsonwebtoken'
 import cookie from 'cookie_js'
 import { usePlugins } from 'plugins'
-import { SocketConnection } from 'core/libs/socket/index.ts'
+import { SocketConnection, SocketModel } from 'core/libs/socket/index.ts'
 
 export default {
   namespace: 'app',
@@ -136,11 +136,6 @@ export default {
       const { user_id, access_token } = payload.authFrame
       yield put({ type: 'handleLogin', payload: { user_id, access_token, user_data: payload.dataFrame } })
     },
-    *initializeSocket({payload}, {select, put}){
-      if(!payload) return false
-      const { type, address } = payload
-      yield put({ type: "handleSocket", payload: new SocketConnection(payload) })
-    },
     *initializePlugins({ payload }, { select }){
         const extended = yield select(state => state.extended)
 
@@ -194,7 +189,7 @@ export default {
 
                   if (Array.isArray(RequireImport)) {
                     RequireImport.forEach((e) => {
-                      console.log(`Importing " ${e} " from [ ${RequireFrom} ]`)
+                      `console`.log(`Importing " ${e} " from [ ${RequireFrom} ]`)
                       extendedRequire[e] = require(RequireFrom)
                     })
                   }else{
@@ -275,11 +270,6 @@ export default {
         ...payload,
       };
     },
-
-    handleSocket(state, { payload }) {
-      state.socket_conn = payload
-      state.socket_opt = payload.opts
-    },
     handleUpdateAuthFrames(state, { payload }) {
       state.session_authframe = payload
       state.session_token = payload.session_token,

src/models/socket.ts

@@ -0,0 +1,56 @@
+import store from 'store'
+import { app_config } from 'config'
+import keys from 'config/app_keys'
+import { user, session } from 'core/models'
+import { router, verbosity, appInterface } from 'core/libs'
+import settings from 'core/libs/settings'
+import { __legacy__objectToArray } from 'core'
+
+import { SocketConnection, SocketModel } from 'core/libs/socket/index.ts'
+
+import jwt from 'jsonwebtoken'
+import cookie from 'cookie_js'
+
+const defaultSocketAddress = "localhost:7000"
+
+export default {
+  namespace: 'socket',
+  state: {
+    dispatcher: null,
+    resolvers: null,
+    socket_conn: null
+  },
+  subscriptions: {
+    setup({ dispatch }) {
+        dispatch({ type: 'updateState', payload: { dispatcher: dispatch } })
+        dispatch({ type: 'query' })
+    },
+  },
+  effects: {
+    *query({ payload }, { call, put, select }) {
+        const stateConnector = yield select(state => state)
+        
+        yield put({ type: "updateState", payload: { resolvers: stateConnector.app.resolvers } })
+
+    },
+    *initializeSocket({payload}, {select, put}){
+        if(!payload) return false
+        const stateConnector = yield select(state => state)
+
+        yield put({ type: "handleSocket", payload: new SocketConnection({payload, connector: stateConnector.socket}) })
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+        console.log(payload)
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    handleSocket(state, { payload }) {
+        state.socket_conn = payload
+        state.socket_opt = payload.opts
+    },
+  },
+};