Fix animations update dependencies

app/src/components/Tree/Tree.tsx

@@ -6,6 +6,8 @@ import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
+import { treeActions } from '../../actions'
+import { bindActionCreators } from 'redux'
 
 const MovingAverage = require('moving-average')
 
@@ -15,6 +17,7 @@ const average = MovingAverage(averagingTimeInterval)
 declare var window: any
 
 interface Props {
+  actions: typeof treeActions
   connectionId?: string
   tree?: q.Tree<TopicViewModel>
   filter: string
@@ -107,6 +110,7 @@ class Tree extends React.PureComponent<Props, State> {
           autoExpandLimit={this.props.autoExpandLimit}
           topicOrder={this.props.topicOrder}
           lastUpdate={tree.lastUpdate}
+          didSelectTopic={this.props.actions.selectTopic}
         />
       </div>
     )
@@ -127,4 +131,10 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps)(Tree)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tree)

app/src/components/Tree/TreeNode.tsx

@@ -5,11 +5,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { isElementInViewport } from '../helper/isElementInViewport'
-import { treeActions } from '../../actions'
-import { AppState } from '../../reducers'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 const debounce = require('lodash.debounce')
@@ -44,7 +39,6 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
-  actions: typeof treeActions
   animateChages: boolean
   isRoot?: boolean
   treeNode: q.TreeNode<TopicViewModel>
@@ -56,6 +50,7 @@ interface Props {
   topicOrder: TopicOrder
   autoExpandLimit: number
   lastUpdate: number
+  didSelectTopic: any
 }
 
 interface State {
@@ -215,7 +210,7 @@ class TreeNode extends React.Component<Props, State> {
   }
 
   private didSelectTopic = () => {
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.props.didSelectTopic(this.props.treeNode)
   }
 
   private mouseOver = (event: React.MouseEvent) => {
@@ -232,15 +227,10 @@ class TreeNode extends React.Component<Props, State> {
     this.setState({ mouseOver: hover })
   }, 5)
 
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.didSelectTopic()
-  }
-
   private didClickNode = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.didSelectTopic()
   }
 
   private renderNodes() {
@@ -252,15 +242,10 @@ class TreeNode extends React.Component<Props, State> {
         autoExpandLimit={this.props.autoExpandLimit}
         topicOrder={this.props.topicOrder}
         lastUpdate={this.props.treeNode.lastUpdate}
+        didSelectTopic={this.props.didSelectTopic}
       />
     )
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))
+export default withStyles(styles)(TreeNode)

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -21,6 +21,7 @@ export interface Props {
   topicOrder: TopicOrder
   selectedTopic?: q.TreeNode<TopicViewModel>
   autoExpandLimit: number
+  didSelectTopic: any
 }
 
 interface State {
@@ -85,6 +86,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
           topicOrder={this.props.topicOrder}
           autoExpandLimit={this.props.autoExpandLimit}
           lastUpdate={node.lastUpdate}
+          didSelectTopic={this.props.didSelectTopic}
         />
       )
     })