Extract settings reducer

app/src/components/Tree/Tree.tsx

@@ -89,9 +89,7 @@ class Tree extends React.Component<Props, {}> {
       <div style={style}>
         <TreeNode
           animateChages={true}
-          autoExpandLimit={this.props.autoExpandLimit}
           isRoot={true}
-          didSelectNode={this.props.didSelectNode}
           treeNode={this.props.tree}
           name="/"
           collapsed={false}
@@ -110,7 +108,7 @@ class Tree extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    autoExpandLimit: state.tooBigReducer.settings.autoExpandLimit,
+    autoExpandLimit: state.settings.autoExpandLimit,
     tree: state.connection.tree,
   }
 }

app/src/components/Tree/TreeNode.tsx

@@ -10,6 +10,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { isElementInViewport } from '../helper/isElementInViewport'
 import { treeActions } from '../../actions'
+import { AppState } from '../../reducers'
 
 declare var performance: any
 
@@ -40,7 +41,7 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
-  actions: any
+  actions: typeof treeActions
   lastUpdate: number
   animateChages: boolean
   isRoot?: boolean
@@ -48,9 +49,8 @@ interface Props {
   name?: string | undefined
   collapsed?: boolean | undefined
   performanceCallback?: ((ms: number) => void) | undefined
-  didSelectNode?: (node: q.TreeNode) => void
-  classes: any
   autoExpandLimit: number
+  classes: any
   style?: React.CSSProperties
 }
 
@@ -220,7 +220,6 @@ class TreeNode extends React.Component<Props, State> {
         animateChanges={this.props.animateChages}
         collapsed={this.collapsed()}
         autoExpandLimit={this.props.autoExpandLimit}
-        didSelectNode={this.props.didSelectNode}
         treeNode={this.props.treeNode}
         lastUpdate={this.props.treeNode.lastUpdate}
       />
@@ -234,4 +233,10 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))
+const mapStateToProps = (state: AppState) => {
+  return {
+    autoExpandLimit: state.settings.autoExpandLimit,
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TreeNode))

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { AppState, NodeOrder } from '../../reducers'
+import { AppState } from '../../reducers'
 import { Theme, withTheme } from '@material-ui/core/styles'
 
 import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
+import { TopicOrder } from '../../reducers/Settings'
 
 export interface Props {
   lastUpdate: number
-  nodeOrder?: NodeOrder
+  topicOrder?: TopicOrder
   animateChanges: boolean
   treeNode: q.TreeNode
   autoExpandLimit: number
@@ -20,18 +21,18 @@ export interface Props {
 
 class TreeNodeSubnodes extends React.Component<Props, {}> {
   private sortedNodes(): q.TreeNode[] {
-    const { nodeOrder, treeNode } = this.props
+    const { topicOrder, treeNode } = this.props
 
     let edges = Object.values(treeNode.edges)
-    if (nodeOrder === NodeOrder.abc) {
+    if (topicOrder === TopicOrder.abc) {
       edges = edges.sort((a, b) => a.name.localeCompare(b.name))
     }
 
     let nodes = edges.map(edge => edge.target)
-    if (nodeOrder === NodeOrder.messages) {
+    if (topicOrder === TopicOrder.messages) {
       nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
     }
-    if (nodeOrder === NodeOrder.topics) {
+    if (topicOrder === TopicOrder.topics) {
       nodes = nodes.sort((a, b) => b.leafCount() - a.leafCount())
     }
 
@@ -54,8 +55,6 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
           <TreeNode
             animateChages={this.props.animateChanges}
             treeNode={node}
-            didSelectNode={this.props.didSelectNode}
-            autoExpandLimit={this.props.autoExpandLimit}
             lastUpdate={node.lastUpdate}
             style={listItemStyle}
           />
@@ -72,7 +71,7 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    nodeOrder: state.tooBigReducer.settings.nodeOrder,
+    topicOrder: state.settings.topicOrder,
   }
 }