Update code formatting

.cspell.json

@@ -0,0 +1,8 @@
+{
+    "language": "en",
+    "words": [
+        "subheader",
+        "basepath",
+	"webdriverio"
+    ]
+}

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+build

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "files.exclude": {
+    "**/node_modules": true
+  }
+}

app/package.json

@@ -76,5 +76,8 @@
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.14"
+  },
+  "peerDependencies": {
+    "electron": "^5.0.4"
   }
 }

app/src/actions/Connection.ts

@@ -9,20 +9,18 @@ import { globalActions } from '.'
 import { resetStore as resetTreeStore, showTree } from './Tree'
 import { showError } from './Global'
 import { TopicViewModel } from '../model/TopicViewModel'
-import {
-  addMqttConnectionEvent,
-  makeConnectionStateEvent,
-  removeConnection,
-  rendererEvents,
-} from '../../../events'
+import { addMqttConnectionEvent, makeConnectionStateEvent, removeConnection, rendererEvents } from '../../../events'
 
-export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+export const connect = (options: MqttOptions, connectionId: string) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
   dispatch(connecting(connectionId))
   rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
   const event = makeConnectionStateEvent(connectionId)
   const host = url.parse(options.url).hostname
 
-  rendererEvents.subscribe(event, (dataSourceState) => {
+  rendererEvents.subscribe(event, dataSourceState => {
     console.log(dataSourceState)
     if (dataSourceState.connected) {
       const didReconnect = Boolean(getState().connection.tree)
@@ -59,7 +57,10 @@ const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<a
   })
 }
 
-export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (tree: q.Tree<TopicViewModel>, host: string) => ({
+export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (
+  tree: q.Tree<TopicViewModel>,
+  host: string
+) => ({
   tree,
   host,
   type: ActionTypes.CONNECTION_SET_CONNECTED,

app/src/actions/ConnectionManager.ts

@@ -1,19 +1,23 @@
 import { AppState } from '../reducers'
 import { clearLegacyConnectionOptions, loadLegacyConnectionOptions } from '../model/LegacyConnectionSettings'
-import { ConnectionOptions, createEmptyConnection, makeDefaultConnections, CertificateParameters } from '../model/ConnectionOptions'
+import {
+  ConnectionOptions,
+  createEmptyConnection,
+  makeDefaultConnections,
+  CertificateParameters,
+} from '../model/ConnectionOptions'
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
 import { remote } from 'electron'
 import * as fs from 'fs'
 import * as path from 'path'
 
-import {
-  ActionTypes,
-  Action,
-} from '../reducers/ConnectionManager'
+import { ActionTypes, Action } from '../reducers/ConnectionManager'
 
-const storedConnectionsIdentifier: StorageIdentifier<{[s: string]: ConnectionOptions}> = {
+const storedConnectionsIdentifier: StorageIdentifier<{
+  [s: string]: ConnectionOptions
+}> = {
   id: 'ConnectionManager_connections',
 }
 
@@ -37,13 +41,18 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
   }
 }
 
-export const selectCertificate = (connectionId: string) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+export const selectCertificate = (connectionId: string) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
   try {
     const certificate = await openCertificate()
     console.log(certificate)
-    dispatch(updateConnection(connectionId, {
-      selfSignedCertificate: certificate,
-    }))
+    dispatch(
+      updateConnection(connectionId, {
+        selfSignedCertificate: certificate,
+      })
+    )
   } catch (error) {
     console.log(error)
     dispatch(showError(error))
@@ -57,30 +66,33 @@ async function openCertificate(): Promise<CertificateParameters> {
   }
 
   return new Promise((resolve, reject) => {
-    remote.dialog.showOpenDialog({ properties: ['openFile'], securityScopedBookmarks: true }, (filePaths?: Array<string>) => {
-      const selectedFile = filePaths && filePaths[0]
-      if (!selectedFile) {
-        reject(rejectReasons.noCertificateSelected)
-        return
-      }
-
-      fs.readFile(selectedFile, (error, data) => {
-        if (error) {
-          reject(error)
+    remote.dialog.showOpenDialog(
+      { properties: ['openFile'], securityScopedBookmarks: true },
+      (filePaths?: Array<string>) => {
+        const selectedFile = filePaths && filePaths[0]
+        if (!selectedFile) {
+          reject(rejectReasons.noCertificateSelected)
           return
         }
 
-        if (data.length > 16_384 || data.length < 128) {
-          reject(rejectReasons.certificateSizeDoesNotMatch)
-          return
-        }
-
-        resolve({
-          data: data.toString('base64'),
-          name: path.basename(selectedFile),
+        fs.readFile(selectedFile, (error, data) => {
+          if (error) {
+            reject(error)
+            return
+          }
+
+          if (data.length > 16_384 || data.length < 128) {
+            reject(rejectReasons.certificateSizeDoesNotMatch)
+            return
+          }
+
+          resolve({
+            data: data.toString('base64'),
+            name: path.basename(selectedFile),
+          })
         })
-      })
-    })
+      }
+    )
   })
 }
 
@@ -117,7 +129,7 @@ export const createConnection = () => (dispatch: Dispatch<any>) => {
   dispatch(selectConnection(newConnection.id))
 }
 
-export const setConnections = (connections: {[s: string]: ConnectionOptions}): Action => ({
+export const setConnections = (connections: { [s: string]: ConnectionOptions }): Action => ({
   connections,
   type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS,
 })
@@ -132,7 +144,7 @@ export const addConnection = (connection: ConnectionOptions): Action => ({
   type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION,
 })
 
-export const toggleAdvancedSettings = (): Action  => ({
+export const toggleAdvancedSettings = (): Action => ({
   type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
 })
 

app/src/actions/Publish.ts

@@ -32,7 +32,7 @@ export const setEditorMode = (editorMode: string): Action => {
   }
 }
 
-export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
+export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState) => {
   const state = getState()
   const topic = state.publish.topic
 

app/src/actions/Settings.ts

@@ -7,11 +7,7 @@ import { Dispatch } from 'redux'
 import { showError } from './Global'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
-import {
-  ActionTypes,
-  SettingsState,
-  TopicOrder,
-} from '../reducers/Settings'
+import { ActionTypes, SettingsState, TopicOrder } from '../reducers/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { globalActions } from '.'
 
@@ -21,7 +17,7 @@ const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
 
 export const loadSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
   try {
-    const settings = await persistentStorage.load(settingsIdentifier) || {}
+    const settings = (await persistentStorage.load(settingsIdentifier)) || {}
     dispatch({
       settings: getState().settings.merge(settings),
       type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS,
@@ -102,26 +98,34 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
   })
 
   if (!filterStr || !tree) {
-    dispatch(batchActions([setAutoExpandLimit(0), (showTree(tree) as any)]))
+    dispatch(batchActions([setAutoExpandLimit(0), showTree(tree) as any]))
     return
   }
 
   const topicFilter = filterStr.toLowerCase()
 
   const nodeFilter = (node: q.TreeNode<TopicViewModel>): boolean => {
-    const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
+    const topicMatches =
+      node
+        .path()
+        .toLowerCase()
+        .indexOf(topicFilter) !== -1
     if (topicMatches) {
       return true
     }
 
-    const messageMatches = node.message
-      && node.message.value
-      && Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
+    const messageMatches =
+      node.message &&
+      node.message.value &&
+      Base64Message.toUnicodeString(node.message.value)
+        .toLowerCase()
+        .indexOf(filterStr) !== -1
 
     return Boolean(messageMatches)
   }
 
-  const resultTree = tree.childTopics()
+  const resultTree = tree
+    .childTopics()
     .filter(nodeFilter)
     .map((node: q.TreeNode<TopicViewModel>) => {
       const clone = node.unconnectedClone()
@@ -138,7 +142,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
     nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
   }
 
-  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), (showTree(nextTree) as any)]))
+  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), showTree(nextTree) as any]))
 }
 
 function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
@@ -158,7 +162,10 @@ function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
 
 export const toggleTheme = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   dispatch({
-    type: getState().settings.get('theme') === 'light' ? ActionTypes.SETTINGS_SET_THEME_DARK : ActionTypes.SETTINGS_SET_THEME_LIGHT,
+    type:
+      getState().settings.get('theme') === 'light'
+        ? ActionTypes.SETTINGS_SET_THEME_DARK
+        : ActionTypes.SETTINGS_SET_THEME_LIGHT,
   })
   dispatch(storeSettings())
 }

app/src/actions/Sidebar.ts

@@ -20,7 +20,10 @@ export const setCompareMessage = (message?: q.Message) => (dispatch: Dispatch<an
   })
 }
 
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
   const { connectionId } = getState().connection
   if (!connectionId) {
     return
@@ -36,10 +39,11 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicC
   rendererEvents.emit(publishEvent, mqttMessage)
 
   if (recursive) {
-    topic.childTopics()
+    topic
+      .childTopics()
       .filter(topic => Boolean(topic.message && topic.message.value))
       .slice(0, subtopicClearLimit)
-      .forEach((topic) => {
+      .forEach(topic => {
         console.log('deleting', topic.path())
         const mqttMessage = {
           topic: topic.path(),