diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 8e1928e..ce20c02 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/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 + nodePath?: string + tree?: q.Tree actions: typeof sidebarActions settingsActions: typeof settingsActions classes: any connectionId?: string } -function Sidebar(props: Props) { - const { classes, node } = props +function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode) { 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 ( -