From f2d632959b166aa96d0c96e998f0c0c96359d61e Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Wed, 17 Jul 2019 15:56:38 +0200
Subject: [PATCH] Fix broker statistic updates

---
 .../SettingsDrawer/BrokerStatistics.tsx         |  2 ++
 .../useUpdateComponentWhenNodeUpdates.tsx       | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx

diff --git a/app/src/components/SettingsDrawer/BrokerStatistics.tsx b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
index aabf2a8..04b3c7c 100644
--- a/app/src/components/SettingsDrawer/BrokerStatistics.tsx
+++ b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
@@ -7,6 +7,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
 
 interface Stats {
@@ -32,6 +33,7 @@ interface Props {
 function BrokerStatistics(props: Props) {
   const { tree, classes } = props
   const sysTopic = usePollingToFetchTreeNode(props.tree, '$SYS')
+  useUpdateComponentWhenNodeUpdates(sysTopic)
 
   return useMemo(() => {
     if (!Boolean(sysTopic)) {
diff --git a/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx b/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx
new file mode 100644
index 0000000..e8385d9
--- /dev/null
+++ b/app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx
@@ -0,0 +1,17 @@
+import * as q from '../../../../backend/src/Model'
+import { useEffect, useState } from 'react'
+
+export function useUpdateComponentWhenNodeUpdates(node?: q.TreeNode<any>): number {
+  const [lastUpdate, setLastUpdate] = useState(0)
+  useEffect(() => {
+    if (!node) {
+      return
+    }
+    const updateComponent = () => setLastUpdate(Date.now())
+    node.onMerge.subscribe(updateComponent)
+    return function cleanup() {
+      node.onMerge.unsubscribe(updateComponent)
+    }
+  }, [node])
+  return lastUpdate
+}