refactor(types): imporve types defined

emqx · Jul 23, 2021 · c6131ce · c6131ce
1 parent 4c2a531
commit c6131ce
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 46 deletions.
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -21,10 +21,6 @@ declare global {
     [key in ProtocolOption]: string
   }
 
-  type searchCallBack = (data: ConnectionModel[]) => ConnectionModel[]
-
-  type nameCallBack = (name: string) => string
-
   enum ProtocolOption {
     ws = 'ws',
     wss = 'wss',
@@ -67,15 +63,18 @@ declare global {
     disabled?: boolean
   }
 
-  interface SearchCallBack {
-    callBack: searchCallBack
-  }
+  type SearchCallBack = (data: ConnectionModel[]) => ConnectionModel[]
 
-  interface NameCallBack {
-    callBack: nameCallBack
-  }
+  type NameCallBack = (name: string) => string
 
   // Vuex state
+  interface ActiveConnection {
+    [id: string]: {
+      client: MqttClient | {}
+      messages: MessageModel[]
+      subscriptions?: SubscriptionModel[]
+    }
+  }
   interface App {
     currentTheme: Theme
     currentLang: Language
@@ -90,13 +89,7 @@ declare global {
       [id: string]: number
     }
     connectionCollection: ConnectionModelCollection[]
-    activeConnection: {
-      [id: string]: {
-        client: MqttClient | {}
-        messages: MessageModel[]
-        subscriptions?: SubscriptionModel[]
-      }
-    }
+    activeConnection: ActiveConnection
     willMessageVisible: boolean
     advancedVisible: boolean
     allConnections: ConnectionModel[]
@@ -118,28 +111,29 @@ declare global {
   }
 
   // Connections
-  interface ActiveConnection {
+  interface Client {
     readonly id: string
-  }
-
-  interface Client extends ActiveConnection {
-    client: MqttClient | {}
+    client: Partial<MqttClient>
     messages: MessageModel[]
   }
 
-  interface Message extends ActiveConnection {
+  interface Message {
+    readonly id: string
     message: MessageModel
   }
 
-  interface ClientInfo extends ActiveConnection {
+  interface ClientInfo {
+    readonly id: string
     showClientInfo: boolean
   }
 
-  interface Subscriptions extends ActiveConnection {
+  interface Subscriptions {
+    readonly id: string
     subscriptions: SubscriptionModel[]
   }
 
-  interface UnreadMessage extends ActiveConnection {
+  interface UnreadMessage {
+    readonly id: string
     unreadMessageCount?: 0
   }
 
@@ -194,6 +188,14 @@ declare global {
     contentType?: string
   }
 
+  interface WillModel {
+    lastWillTopic: string
+    lastWillPayload: string
+    lastWillQos: QoS
+    lastWillRetain: boolean
+    properties?: WillPropertiesModel
+  }
+
   interface ConnectionModel extends SSLPath {
     readonly id?: string
     clientId: string
@@ -214,25 +216,15 @@ declare global {
     unreadMessageCount: number
     messages: MessageModel[]
     subscriptions: SubscriptionModel[]
-    client:
-      | MqttClient
-      | {
-          connected: boolean
-        }
+    client: Partial<MqttClient>
     sessionExpiryInterval?: number
     receiveMaximum?: number
     topicAliasMaximum?: number
     requestResponseInformation?: boolean
     requestProblemInformation?: boolean
-    will?: {
-      lastWillTopic: string
-      lastWillPayload: string
-      lastWillQos: QoS
-      lastWillRetain: boolean
-      properties?: WillPropertiesModel
-    }
-    clientIdWithTime?: boolean // fill in client_id.Ensure that client_id field is unique.
-    collectionId?: string | null // if collection is null set to default
+    will?: WillModel
+    clientIdWithTime?: boolean
+    collectionId?: string | null
     isCollection: false
     orderId?: number
   }
@@ -246,7 +238,6 @@ declare global {
     orderId?: number
   }
 
-  // leaf: ConnectionModel | collection: ConnectionModelCollection
   type ConnectionModelTree = ConnectionModelCollection | ConnectionModel
 
   interface SSLContent {

diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
@@ -618,7 +618,9 @@ export default class ConnectionCreate extends Vue {
       if (res) {
         this.changeActiveConnection({
           id: res.id as string,
-          client: {},
+          client: {
+            connected: false,
+          },
           messages: [],
         })
         this.$emit('connect')
@@ -700,7 +702,7 @@ export default class ConnectionCreate extends Vue {
     }
   }
 
-  private async validateName(rule: FormRule, name: string, callBack: NameCallBack['callBack']) {
+  private async validateName(rule: FormRule, name: string, callBack: NameCallBack) {
     for (const connection of this.allConnections) {
       if (this.oper === 'create' && connection.name === name) {
         callBack(`${this.$t('connections.duplicateName')}`)
@@ -720,7 +722,7 @@ export default class ConnectionCreate extends Vue {
     }
   }
 
-  private querySearchName(queryName: string, cb: SearchCallBack['callBack']) {
+  private querySearchName(queryName: string, cb: SearchCallBack) {
     const connections = [...this.suggestConnections]
     const results = queryName ? connections.filter(this.createFilter(queryName)) : connections
     cb(results.reverse())

diff --git a/src/views/connections/ConnectionInfo.vue b/src/views/connections/ConnectionInfo.vue
@@ -167,7 +167,7 @@ export default class ConnectionInfo extends Vue {
     this.connection.clientIdWithTime = !this.connection.clientIdWithTime
   }
 
-  private async validateName(rule: FormRule, name: string, callBack: NameCallBack['callBack']) {
+  private async validateName(rule: FormRule, name: string, callBack: NameCallBack) {
     for (const oneConnection of this.allConnections) {
       if (name !== this.oldName && oneConnection.name === name) {
         callBack(`${this.$t('connections.duplicateName')}`)

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -359,7 +359,7 @@ export default class ConnectionsDetail extends Vue {
 
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
   @Action('CHANGE_ACTIVE_CONNECTION') private changeActiveConnection!: (payload: Client) => void
-  @Action('REMOVE_ACTIVE_CONNECTION') private removeActiveConnection!: (payload: ActiveConnection) => void
+  @Action('REMOVE_ACTIVE_CONNECTION') private removeActiveConnection!: (payload: { readonly id: string }) => void
   @Action('SHOW_CLIENT_INFO') private changeShowClientInfo!: (payload: ClientInfo) => void
   @Action('SHOW_SUBSCRIPTIONS') private changeShowSubscriptions!: (payload: SubscriptionsVisible) => void
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void