From d6335e68de2a7c0282f3c67fc420dc55ad4725d2 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <thomas.nordquist@viison.com>
Date: Wed, 16 Jan 2019 02:19:09 +0100
Subject: [PATCH] Refactor history badge

---
 app/src/components/Sidebar/History.tsx | 22 +++++++++++++---------
 backend/src/DataSource/MqttSource.ts   |  2 +-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/src/components/Sidebar/History.tsx b/app/src/components/Sidebar/History.tsx
index e96e077..19201a7 100644
--- a/app/src/components/Sidebar/History.tsx
+++ b/app/src/components/Sidebar/History.tsx
@@ -47,13 +47,22 @@ class MessageHistory extends React.Component<Props, State> {
       </div>
     ))
 
+    const visible = this.props.items.length > 0 && this.state.collapsed
+
     return (
       <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
         <Typography
           onClick={this.toggle}
           style={{ cursor: 'pointer' }}
         >
-          {this.state.collapsed ? '▶' : '▼'} History
+          <Badge
+            classes={{ badge: this.props.classes.badge }}
+            invisible={!visible}
+            badgeContent={this.props.items.length}
+            color="primary"
+          >
+            {this.state.collapsed ? '▶' : '▼'} History
+          </Badge>
         </Typography>
         <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
           {this.state.collapsed ? null : elements}
@@ -63,17 +72,12 @@ class MessageHistory extends React.Component<Props, State> {
   }
 
   public render() {
-    const visible = this.props.items.length > 0 && this.state.collapsed
     return (
-      <Badge
+      <div
         style={{ display: 'block', width: '100%' }}
-        invisible={!visible}
-        badgeContent={this.props.items.length}
-        color="primary"
-        classes={{ badge: this.props.classes.badge }}
       >
         {this.renderHistory()}
-      </Badge>
+      </div>
     )
   }
 
@@ -83,7 +87,7 @@ class MessageHistory extends React.Component<Props, State> {
 }
 
 const styles = (theme: Theme) => ({
-  badge: { top: '-8px', left:'64px' },
+  badge: { right:'-25px' },
 })
 
 export default withStyles(styles)(MessageHistory)
diff --git a/backend/src/DataSource/MqttSource.ts b/backend/src/DataSource/MqttSource.ts
index f0380c6..8106e3e 100644
--- a/backend/src/DataSource/MqttSource.ts
+++ b/backend/src/DataSource/MqttSource.ts
@@ -65,7 +65,7 @@ export class MqttSource implements DataSource<MqttOptions> {
       })
     })
 
-    client.on('message', (topic, message) => {
+    client.on('message', (topic, message, packet) => {
       this.messageCallback && this.messageCallback(topic, message)
     })