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',
   },
 })
 

app/src/components/Sidebar/TopicPanel/Topic.tsx

@@ -13,7 +13,6 @@ interface Props {
   node?: q.TreeNode<TopicViewModel>
   selected?: q.TreeNode<TopicViewModel>
   actions: typeof treeActions
-  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }
 
 const styles = (theme: Theme) => ({

app/src/components/Sidebar/TopicPanel/TopicPanel.tsx

@@ -1,7 +1,7 @@
 import * as q from '../../../../../backend/src/Model'
 import Copy from '../../helper/Copy'
 import Panel from '../Panel'
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import Topic from './Topic'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -9,17 +9,18 @@ import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
 import { sidebarActions } from '../../../actions'
 import { TopicDeleteButton } from './TopicDeleteButton'
 
-const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions; updateNode: () => void }) => {
-  const { node, updateNode } = props
+const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions }) => {
+  const { node } = props
+  console.log(node && node.path())
   const copyTopic = node ? <Copy value={node.path()} /> : null
 
-  const deleteTopic = (topic?: q.TreeNode<any>, recursive: boolean = false, maxCount = 50) => {
+  const deleteTopic = useCallback((topic?: q.TreeNode<any>, recursive: boolean = false, maxCount = 50) => {
     if (!topic) {
       return
     }
 
     props.actions.clearTopic(topic, recursive, maxCount)
-  }
+  }, [])
 
   return useMemo(
     () => (
@@ -29,7 +30,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
           <TopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
           <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
         </span>
-        <Topic node={node} didSelectNode={updateNode} />
+        <Topic node={node} />
       </Panel>
     ),
     [node, node && node.childTopicCount()]

app/src/components/helper/usePollingToFetchTreeNode.tsx

@@ -19,12 +19,12 @@ export function usePollingToFetchTreeNode(tree: q.Tree<any> | undefined, path: s
   }, [treeNode])
 
   function pollUntilTreeNodeHasBeenFound() {
-    if (!tree || treeNode) {
+    if (!tree) {
       return
     }
 
     const initialTreeNode = tree.findNode(path)
-    if (initialTreeNode) {
+    if (initialTreeNode && initialTreeNode !== treeNode) {
       setTreeNode(initialTreeNode)
       return
     }
@@ -44,6 +44,6 @@ export function usePollingToFetchTreeNode(tree: q.Tree<any> | undefined, path: s
     }
   }
 
-  useEffect(pollUntilTreeNodeHasBeenFound, [tree, treeNode])
+  useEffect(pollUntilTreeNodeHasBeenFound, [tree, treeNode, path])
   return treeNode
 }