Extract settings reducer

app/src/components/Settings.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../backend/src/Model'
 
-import { AppState, NodeOrder } from '../reducers'
+import { AppState } from '../reducers'
 import {
   Divider,
   Drawer,
@@ -18,6 +18,7 @@ import ChevronRight from '@material-ui/icons/ChevronRight'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions } from '../actions'
+import { TopicOrder } from '../reducers/Settings'
 
 const styles: StyleRulesCallback = theme => ({
   drawer: {
@@ -44,7 +45,7 @@ interface Props {
   visible: boolean
   store?: any
   classes: any
-  nodeOrder: NodeOrder
+  topicOrder: TopicOrder
 }
 
 class Settings extends React.Component<Props, {}> {
@@ -110,23 +111,23 @@ class Settings extends React.Component<Props, {}> {
   }
 
   private renderNodeOrder() {
-    const { classes, nodeOrder } = this.props
+    const { classes, topicOrder } = this.props
 
     return (
       <div style={{ padding: '8px' }}>
       <InputLabel htmlFor="auto-expand">Topic order</InputLabel>
       <Select
-          value={nodeOrder}
+          value={topicOrder}
           onChange={this.onChangeSorting}
           input={<Input name="node-order" id="node-order-label-placeholder" />}
           displayEmpty={true}
           name="node-order"
           className={classes.input}
       >
-        <MenuItem value={NodeOrder.none}><em>default</em></MenuItem>
-        <MenuItem value={NodeOrder.abc}>a-z</MenuItem>
-        <MenuItem value={NodeOrder.messages}>{NodeOrder.messages}</MenuItem>
-        <MenuItem value={NodeOrder.topics}>{NodeOrder.topics}</MenuItem>
+        <MenuItem value={TopicOrder.none}><em>default</em></MenuItem>
+        <MenuItem value={TopicOrder.abc}>a-z</MenuItem>
+        <MenuItem value={TopicOrder.messages}>{TopicOrder.messages}</MenuItem>
+        <MenuItem value={TopicOrder.topics}>{TopicOrder.topics}</MenuItem>
       </Select>
     </div>)
   }
@@ -138,9 +139,9 @@ class Settings extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    autoExpandLimit: state.tooBigReducer.settings.autoExpandLimit,
-    nodeOrder: state.tooBigReducer.settings.nodeOrder,
-    visible: state.tooBigReducer.settings.visible,
+    autoExpandLimit: state.settings.autoExpandLimit,
+    topicOrder: state.settings.topicOrder,
+    visible: state.settings.visible,
   }
 }
 

app/src/components/Sidebar/History.tsx

@@ -54,6 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
     return (
       <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
         <Typography
+          component={'span'}
           onClick={this.toggle}
           style={{ cursor: 'pointer' }}
         >

app/src/components/TitleBar.tsx

@@ -11,6 +11,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import { settingsActions, connectionActions } from '../actions'
+import { AppState } from '../reducers'
 
 const styles: StyleRulesCallback = theme => ({
   title: {
@@ -70,22 +71,13 @@ interface Props {
     settings: typeof settingsActions,
     connection: typeof connectionActions,
   }
+  topicFilter?: string
 }
 
-interface State {
-  selectedNode?: q.TreeNode
-  settingsVisible: boolean
-  autoExpandLimit: number
-}
-
-class TitleBar extends React.Component<Props, State> {
+class TitleBar extends React.Component<Props, {}> {
   constructor(props: any) {
     super(props)
-    this.state = {
-      selectedNode: undefined,
-      settingsVisible: false,
-      autoExpandLimit: 0,
-    }
+    this.state = { }
   }
 
   public render() {
@@ -98,6 +90,7 @@ class TitleBar extends React.Component<Props, State> {
             <Menu />
           </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT-Explorer</Typography>
+          {this.renderSearch()}
           <Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
             Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
           </Button>
@@ -115,12 +108,24 @@ class TitleBar extends React.Component<Props, State> {
           <Search />
         </div>
         <InputBase
+          value={this.props.topicFilter}
+          onChange={this.onFilterChange}
           placeholder="Search…"
           classes={{ root: classes.inputRoot, input: classes.inputInput }}
         />
       </div>
     )
   }
+
+  private onFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.actions.settings.filterTopics(event.target.value)
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    topicFilter: state.settings.topicFilter,
+  }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
@@ -132,4 +137,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(TitleBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))

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