Add clear button to topic search

app/src/actions/Connection.ts

@@ -5,16 +5,19 @@ import { rendererEvents, addMqttConnectionEvent, makeConnectionStateEvent, remov
 import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
 import { showTree } from './Tree'
+import * as url from 'url'
 
 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) => {
     if (dataSourceState.connected) {
       const tree = new q.Tree()
       tree.updateWithConnection(rendererEvents, connectionId)
-      dispatch(connected(tree))
+      dispatch(connected(tree, host!))
       dispatch(showTree(tree))
     } else if (dataSourceState.error) {
       dispatch(showError(dataSourceState.error))
@@ -23,8 +26,9 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   })
 }
 
-export const connected: (tree: q.Tree) => Action = (tree: q.Tree)  => ({
+export const connected: (tree: q.Tree, host: string) => Action = (tree: q.Tree, host: string)  => ({
   tree,
+  host,
   type: ActionTypes.CONNECTION_SET_CONNECTED,
 })
 

app/src/actions/Settings.ts

@@ -26,23 +26,20 @@ export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action
 }
 
 export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
-  const topicFilter = filterStr.toLowerCase()
+  const { tree } = getState().connection
 
   dispatch({
-    topicFilter,
+    topicFilter: filterStr,
     type: ActionTypes.SETTINGS_FILTER_TOPICS,
   })
 
-  const { tree } = getState().connection
-  if (!tree) {
-    return
-  }
-
-  if (!topicFilter) {
+  if (!filterStr || !tree) {
     dispatch(showTree(tree))
     return
   }
 
+  const topicFilter = filterStr.toLowerCase()
+
   const nodeFilter = (node: q.TreeNode): boolean => {
     const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
     if (topicMatches) {