Correctly change to map icon when mqtt has connected successfully

config/rzl.js

@@ -7,7 +7,7 @@ const config : Config = {
     color: "orange",
     mqtt: "ws://map.rzl:1884"
   },
-  topics: Object.assign({}, {
+  topics: {
     led_stahltraeger: {
       state: "/service/openhab/out/pca301_ledstrips/state",
       command: "/service/openhab/in/pca301_ledstrips/command",
@@ -116,14 +116,13 @@ const config : Config = {
       command: "/service/openhab/in/pca301_infoscreen/command",
       defaultValue: "OFF",
       values: { on: "ON", off: "OFF" }
-    }},
-    utils.esper_topics("afba40")
-  ),
+    }
+  },
   controls: {
     led_stahltrager: {
       name: "LED Stahlträger",
-      position: [380, 300],
-      icon: "white-balance-iridescent rotate-90",
+      position: [380, 590],
+      icon: "white-balance-iridescent",
       iconColor: ({led_stahltraeger}) => led_stahltraeger == "on" ? utils.rainbow : "#000000",
       ui: [
         {
@@ -221,14 +220,14 @@ const config : Config = {
       position: [450, 590],
       icon: "fire",
       iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000",
-      ui: utils.esper_statistics("afba40", [
+      ui: [
         {
           type: "toggle",
           text: "Fliegenbratgerät",
           topic: "flyfry",
           icon: "power"
         }
-      ])
+      ]
     },
     artnet: {
       name: "Artnet",

src/components/App.js

@@ -25,7 +25,8 @@ export type AppState = {
   selectedControl: ?Control,
   drawerOpened: boolean,
   mqttState: State,
-  mqttSend: (topic: string, value: any) => void
+  mqttSend: (topic: string, value: any) => void,
+  mqttConnected: boolean,
 };
 
 class App extends React.Component<AppProps & Classes, AppState> {
@@ -40,8 +41,12 @@ class App extends React.Component<AppProps & Classes, AppState> {
       })),
       mqttSend: connectMqtt(props.config.space.mqtt, {
         onMessage: this.receiveMessage.bind(this),
+        onConnect: () => this.setState({ mqttConnected: true }),
+        onReconnect: () => this.setState({ mqttConnected: false }),
+        onDisconnect: () => this.setState({ mqttConnected: false }),
         subscribe: _.map(props.config.topics, (x) => x.state)
-      })
+      }),
+      mqttConnected: false
     };
   }
 
@@ -103,7 +108,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
         <MuiThemeProvider theme={this.theme}>
           <div>
             <TopBar title={`${this.props.config.space.name} Map`}
-              connected={false} />
+              connected={this.state.mqttConnected} />
             <SideBar open={this.state.drawerOpened}
               control={this.state.selectedControl}
               onCloseRequest={this.closeDrawer.bind(this)}