Update sidebar when topic is deleted

app/src/components/Sidebar/Sidebar.tsx

@@ -12,23 +12,23 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import TopicPanel from './TopicPanel/TopicPanel'
 import Panel from './Panel'
+import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 
 const throttle = require('lodash.throttle')
 
 const Publish = React.lazy(() => import('./Publish/Publish'))
 
 interface Props {
-  node?: q.TreeNode<TopicViewModel>
+  nodePath?: string
+  tree?: q.Tree<TopicViewModel>
   actions: typeof sidebarActions
   settingsActions: typeof settingsActions
   classes: any
   connectionId?: string
 }
 
-function Sidebar(props: Props) {
-  const { classes, node } = props
+function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
   const [lastUpdate, setLastUpdate] = useState(0)
-
   const updateNode = useCallback(
     throttle(() => {
       setLastUpdate(node ? node.lastUpdate : 0)
@@ -46,11 +46,18 @@ function Sidebar(props: Props) {
       node && node.onMessage.unsubscribe(updateCallback)
     }
   }, [node])
+}
+
+function Sidebar(props: Props) {
+  const { classes, tree, nodePath } = props
+  const node = usePollingToFetchTreeNode(tree, nodePath || '')
+  useUpdateNodeWhenNodeReceivesUpdates(node)
+  // console.log(node && node.path(), tree, nodePath)
 
   return (
-    <div id="Sidebar" className={props.classes.drawer}>
+    <div id="Sidebar" className={classes.drawer}>
       <div>
-        <TopicPanel node={node} updateNode={updateNode} />
+        <TopicPanel node={node} />
         <ValuePanel lastUpdate={node ? node.lastUpdate : 0} />
         <Panel>
           <span>Publish</span>
@@ -58,7 +65,7 @@ function Sidebar(props: Props) {
         </Panel>
         <Panel detailsHidden={!node}>
           <span>Stats</span>
-          <ExpansionPanelDetails className={props.classes.details}>
+          <ExpansionPanelDetails className={classes.details}>
             <NodeStats node={node} />
           </ExpansionPanelDetails>
         </Panel>
@@ -68,8 +75,10 @@ function Sidebar(props: Props) {
 }
 
 const mapStateToProps = (state: AppState) => {
+  const node = state.tree.get('selectedTopic')
   return {
-    node: state.tree.get('selectedTopic'),
+    tree: state.connection.tree,
+    nodePath: node && node.path(),
   }
 }
 
@@ -84,14 +93,9 @@ const styles = (theme: Theme) => ({
   drawer: {
     display: 'block' as 'block',
   },
-  valuePaper: {
-    margin: theme.spacing(1),
-  },
-  summary: { minHeight: '0' },
-  details: { padding: '0px 16px 8px 8px', display: 'block' },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular,
+  details: {
+    padding: '0px 16px 8px 8px',
+    display: 'block',
   },
 })