Adapt redux

Add hover-effect on nodes
Add Setting drawer
Ass auto expansion setting

app/src/components/ConnectionSetup/Connection.tsx

@@ -85,6 +85,7 @@ class Connection extends React.Component<Props, State> {
         this.props.onConnection(connectionId)
         this.setState({ visible: false })
       } else if (state.error) {
+        console.log('error', state.error)
         this.setState({ error: state.error })
       }
     })

app/src/components/Settings.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react'
+import * as q from '../../../backend/src/Model'
+
+import Drawer from '@material-ui/core/Drawer'
+import IconButton from '@material-ui/core/IconButton'
+import Paper from '@material-ui/core/Paper'
+import Divider from '@material-ui/core/Divider'
+import MenuItem from '@material-ui/core/MenuItem'
+import Select from '@material-ui/core/Select'
+
+import ChevronRight from '@material-ui/icons/ChevronRight'
+
+import { Typography, InputBase, Input, InputLabel } from '@material-ui/core'
+import { withStyles, StyleRulesCallback } from '@material-ui/core/styles'
+
+import { settingsActions } from '../actions'
+import { AppState } from '../reducers'
+
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+const styles: StyleRulesCallback = theme => ({
+  drawer: {
+    backgroundColor: theme.palette.background.default,
+    flexShrink: 0,
+  },
+  paper: {
+    width: '300px',
+  },
+  title: {
+    color: theme.palette.text.primary,
+    paddingTop: `${theme.spacing.unit}px`,
+    ...theme.mixins.toolbar,
+  },
+  input: {
+    margin: `auto ${theme.spacing.unit}px auto ${theme.spacing.unit}px`,
+  },
+})
+
+interface Props {
+  actions?: any
+  autoExpandLimit: number,
+  visible: boolean,
+  store?: any,
+  classes: any
+}
+
+interface State {
+}
+
+class Settings extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  public render() {
+    const { classes, actions, visible } = this.props
+    return <Drawer
+      anchor = "left"
+      className = { classes.drawer }
+      open = { visible }
+      variant = "persistent"
+    >
+      <div
+        className = { classes.paper }
+        tabIndex = { 0 }
+        role = "button"
+        onClick = {(e: React.MouseEvent) => e.stopPropagation()}
+        onKeyDown = {(e: React.KeyboardEvent) => e.stopPropagation()}
+      >
+
+        <Typography className = { classes.title } variant = "h6" color = "inherit">
+          <IconButton onClick = {actions.toggleSettingsVisibility}>
+            <ChevronRight />
+          </IconButton>
+          Settings
+        </Typography>
+        <Divider />
+
+        {this.renderAutoExpand()}
+      </div>
+    </Drawer>
+  }
+
+  private renderAutoExpand() {
+    const { classes, actions, autoExpandLimit } = this.props
+
+    return <span>
+      <InputLabel htmlFor="auto-expand">Auto Expand</InputLabel>
+      <Select
+          value = { autoExpandLimit }
+          onChange = { (e: React.ChangeEvent<HTMLSelectElement>) => actions.setAutoExpandLimit(e.target.value) }
+          input = {<Input name="auto-expand" id="auto-expand-label-placeholder" />}
+          displayEmpty
+          name = "auto-expand"
+          className = {classes.input}
+      >
+        <MenuItem value = {0}><em>Disabled</em></MenuItem>
+        <MenuItem value = {3}>Some</MenuItem>
+        <MenuItem value = {10}>Most</MenuItem>
+        <MenuItem value = {1E6}>All</MenuItem>
+      </Select>
+    </span>
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    autoExpandLimit: state.settings.autoExpandLimit,
+    visible: state.settings.visible,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(settingsActions, dispatch),
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Settings))

app/src/components/Sidebar/Sidebar.tsx

@@ -13,13 +13,13 @@ import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import Copy from '../Copy'
 
 interface Props {
-  node?: q.TreeNode | undefined,
+  node?: q.TreeNode,
   classes: any,
-  theme: Theme
+  theme: Theme,
 }
 
 interface State {
-  node?: q.TreeNode | undefined
+  node?: q.TreeNode
 }
 
 class Sidebar extends React.Component<Props, State> {

app/src/components/TitleBar.tsx

@@ -2,6 +2,22 @@ import * as React from 'react'
 import * as q from '../../../backend/src/Model'
 
 import Search from '@material-ui/icons/Search'
+import Drawer from '@material-ui/core/Drawer'
+import IconButton from '@material-ui/core/IconButton'
+import Menu from '@material-ui/icons/Menu'
+
+import List from '@material-ui/core/List'
+import Divider from '@material-ui/core/Divider'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Slider from '@material-ui/lab/Slider'
+
+import { settingsActions } from '../actions'
+import { AppState, SettingsModel } from '../reducers'
+
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 
 import { AppBar, Toolbar, Typography, InputBase } from '@material-ui/core'
 import { withStyles, StyleRulesCallback } from '@material-ui/core/styles'
@@ -53,17 +69,30 @@ const styles: StyleRulesCallback = theme => ({
       width: 200,
     },
   },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
 })
 
 interface Props {
   classes: any
+  actions: any
 }
 
-class TitleBar extends React.Component<Props, {}> {
+interface State {
+  selectedNode?: q.TreeNode
+  settingsVisible: boolean
+  autoExpandLimit: number
+}
+
+class TitleBar extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
     this.state = {
       selectedNode: undefined,
+      settingsVisible: false,
+      autoExpandLimit: 0,
     }
   }
 
@@ -72,6 +101,9 @@ class TitleBar extends React.Component<Props, {}> {
 
     return <AppBar position="static">
         <Toolbar>
+          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.props.actions.toggleSettingsVisibility}>
+            <Menu />
+          </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT-Xplorer</Typography>
           <div className={classes.search}>
             <div className={classes.searchIcon}>
@@ -90,4 +122,10 @@ class TitleBar extends React.Component<Props, {}> {
   }
 }
 
-export default withStyles(styles)(TitleBar)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(settingsActions, dispatch),
+  }
+}
+
+export default withStyles(styles)(connect(null, mapDispatchToProps)(TitleBar))

app/src/components/Tree/Tree.tsx

@@ -5,13 +5,16 @@ import { Typography } from '@material-ui/core'
 import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
 import {  } from '../../../../events/Events'
 const MovingAvaerage = require('moving-average')
+import { connect } from 'react-redux'
+import { AppState } from '../../reducers'
 
 declare const performance: any
 
 const timeInterval = 10 * 1000
 const average = MovingAvaerage(timeInterval)
 
-interface Props{
+interface Props {
+  autoExpandLimit: number
   didSelectNode?: (node: q.TreeNode) => void
   connectionId?: string
 }
@@ -21,7 +24,7 @@ interface TreeState {
   msg: any
 }
 
-export class Tree extends React.Component<Props, TreeState> {
+class Tree extends React.Component<Props, TreeState> {
   private renderDuration: number = 300
   private updateTimer?: any
   private lastUpdate: number = 0
@@ -98,12 +101,13 @@ export class Tree extends React.Component<Props, TreeState> {
 
     return <Typography style={ style }>
         <TreeNode
-          animateChages={true}
-          autoExpandLimit={3000}
-          isRoot={true}
-          didSelectNode={this.props.didSelectNode}
-          treeNode={this.state.tree}
-          name="/" collapsed={false}
+          animateChages = { true }
+          autoExpandLimit = { this.props.autoExpandLimit }
+          isRoot = { true }
+          didSelectNode = { this.props.didSelectNode }
+          treeNode = { this.state.tree }
+          name = "/"
+          collapsed = { false }
           key="rootNode"
           performanceCallback={(ms: number) => {
             average.push(Date.now(), ms)
@@ -113,3 +117,11 @@ export class Tree extends React.Component<Props, TreeState> {
     </Typography>
   }
 }
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    autoExpandLimit: state.settings.autoExpandLimit,
+  }
+}
+
+export default connect(mapStateToProps)(Tree)

app/src/components/Tree/TreeNode.tsx

@@ -1,13 +1,33 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-import { withTheme, Theme } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { isElementInViewport } from '../helper/isElementInViewport'
 import TreeNodeTitle from './TreeNodeTitle'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 
 declare var performance: any
 
-export interface TreeNodeProps {
+const styles = (theme: Theme) => {
+  return {
+    collapsedSubnodes: {
+      color: theme.palette.text.secondary,
+    },
+    displayBlock: {
+      display: 'block',
+    },
+    node: {
+      display: 'block',
+      marginLeft: '10px',
+    },
+    hover: {
+      '&:hover': {
+        backgroundColor: 'rgba(80, 80, 80, 0.35)',
+      },
+    },
+  }
+}
+
+interface Props {
   animateChages: boolean
   isRoot?: boolean
   treeNode: q.TreeNode
@@ -15,20 +35,16 @@ export interface TreeNodeProps {
   collapsed?: boolean | undefined
   performanceCallback?: ((ms: number) => void) | undefined
   didSelectNode?: (node: q.TreeNode) => void
-  theme: Theme
+  classes: any
   autoExpandLimit: number
 }
 
-interface TreeNodeState {
-  title: string | undefined
-  collapsed: boolean
+interface State {
   collapsedOverride: boolean | undefined
-  edgeCount: number
 }
 
-class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
+class TreeNode extends React.Component<Props, State> {
   private dirtySubnodes: boolean = true
-  private dirtyState: boolean = true
   private dirtyEdges: boolean = true
   private dirtyMessage: boolean = true
 
@@ -49,11 +65,12 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
     this.dirtyMessage = true
   }
 
-  constructor(props: TreeNodeProps) {
+  constructor(props: Props) {
     super(props)
-    const edgeCount = Object.keys(props.treeNode.edges).length
-    const collapsed = edgeCount > this.props.autoExpandLimit
-    this.state = { collapsed, edgeCount, collapsedOverride: props.collapsed, title: props.name }
+
+    this.state = {
+      collapsedOverride: props.collapsed,
+    }
   }
 
   public componentDidMount() {
@@ -70,32 +87,18 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
     treeNode.onMessage.unsubscribe(this.messageDidChange)
   }
 
-  private getStyles() {
-    return {
-      collapsedSubnodes: {
-        color: this.props.theme.palette.text.secondary,
-      },
-      displayBlock: {
-        display: 'block',
-      },
-    }
+  private stateHasChanged(newState: State) {
+    return this.state.collapsedOverride !== newState.collapsedOverride
   }
 
-  public setState(newState: any) {
-    this.dirtyState = this.stateHasChanged(newState)
-
-    super.setState(newState)
+  private propsHasChanged(newProps: Props) {
+    return this.props.autoExpandLimit !== newProps.autoExpandLimit
   }
 
-  private stateHasChanged(newState: any) {
-    return this.state.collapsed !== newState.collapsed
-      || this.state.collapsedOverride !== newState.collapsedOverride
-      || this.state.edgeCount !== newState.edgeCount
-  }
-
-  public shouldComponentUpdate() {
+  public shouldComponentUpdate(nextProps: Props, nextState: State) {
     const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
-    return this.dirtyState
+    return this.stateHasChanged(nextState)
+      || this.propsHasChanged(nextProps)
       || this.dirtyEdges
       || this.dirtyMessage
       || this.dirtySubnodes
@@ -124,25 +127,26 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
       return this.state.collapsedOverride
     }
 
-    return this.state.collapsed
-  }
-
-  public componentWillReceiveProps() {
-    const edgeCount = Object.keys(this.props.treeNode.edges).length
-    this.setState({ edgeCount, collapsed: edgeCount > this.props.autoExpandLimit })
+    return this.props.treeNode.edgeCount() > this.props.autoExpandLimit
   }
 
   public render() {
-    const { displayBlock } = this.getStyles()
     const animationStyle = this.indicatingChangeAnimationStyle()
+    const { classes } = this.props
+    this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
-    this.dirtyState = this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
-
-    return <div key={this.props.treeNode.hash()} style={ { display: 'block', marginLeft: '10px' } }>
+    return <div
+      key={this.props.treeNode.hash()}
+      className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
+      onClick={(event) => {
+        event.stopPropagation()
+        this.toggle()
+        this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
+      }}
+    >
       <span ref={this.titleRef} style={animationStyle}>
         <TreeNodeTitle
           onClick={() => this.toggle()}
-          edgeCount={this.state.edgeCount}
           collapsed={this.collapsed()}
           treeNode={this.props.treeNode}
           name={this.props.name}
@@ -186,4 +190,4 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
   }
 }
 
-export default withTheme()(TreeNode)
+export default withStyles(styles)(TreeNode)

app/src/components/Tree/TreeNodeTitle.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-import { Typography } from '@material-ui/core'
 import { withTheme, Theme } from '@material-ui/core/styles'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode
-  // ref: React.Ref<HTMLElement>
   name?: string | undefined
   collapsed?: boolean | undefined
   toggleCollapsed: () => void
   didSelectNode?: (node: q.TreeNode) => void
-  edgeCount: number
   theme: Theme
 }
 
@@ -81,7 +78,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
   }
 
   private renderExpander() {
-    if (this.props.edgeCount === 0) {
+    if (this.props.treeNode.edgeCount() === 0) {
       return null
     }
 
@@ -89,7 +86,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
   }
 
   private renderCollapsedSubnodes() {
-    if (this.props.edgeCount === 0 || !this.props.collapsed) {
+    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
       return null
     }