Improve data model & fix tests

app/src/App.tsx

@@ -1,37 +1,55 @@
 import * as React from "react";
 import * as q from '../../backend/src/Model'
 
-import { AppBar, Toolbar, Typography, InputBase } from '@material-ui/core';
-
-import { Tree } from "./components/Tree";
+import { Tree } from "./components/Tree"
+import TitleBar from "./components/TitleBar";
 import { Sidebar } from "./components/Sidebar";
-import { withStyles } from '@material-ui/core/styles';
+
+import { withTheme, Theme } from '@material-ui/core/styles';
 
 class State {
   public selectedNode?: q.TreeNode | undefined
 }
 
-export class App extends React.Component<{}, State> {
+interface Props {
+  theme: Theme
+}
+
+class App extends React.Component<Props, State> {
   constructor(props: any) {
     super(props);
     this.state = {
       selectedNode: undefined
     }
+
+    console.log("asd", this.props)
+    this.theme = this.props.theme
+    this.styles = {
+      primaryText: {
+        backgroundColor: this.theme.palette.background.default,
+        padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
+        color: this.theme.palette.text.primary,
+      },
+      primaryColor: {
+        backgroundColor: this.theme.palette.background.default,
+        //padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
+        color: this.theme.palette.common.white,
+      },
+    }
   }
 
+  private theme: Theme
+  private styles: any
+
   public render() {
-    return <div>
-      <AppBar>
-        <Toolbar>
-          <Typography variant="h6" color="inherit">MQTT-Xplorer</Typography>
-        </Toolbar>
-        <InputBase />
-      </AppBar>
+    return <div style={this.styles.primaryColor}>
+      <TitleBar />
       <Tree didSelectNode={(node: q.TreeNode) => {
         this.setState({selectedNode: node})
         console.log('did select', node)
-      }}/>
-      // <Sidebar node={this.state.selectedNode} />
+      }} />
     </div>
   }
 }
+
+export default withTheme()(App)

app/src/components/Sidebar.tsx

@@ -27,12 +27,6 @@ export class Sidebar extends React.Component<Props, State> {
     }
   }
 
-  private getStyle(): {[s: string]: any} {
-    return {
-      marginTop: '64px'
-    }
-  }
-
   public componentWillReceiveProps(nextProps: Props) {
     this.props.node && this.props.node.removeListener('update', this.updateNode)
     nextProps.node && nextProps.node.on('update', this.updateNode)
@@ -69,6 +63,4 @@ export class Sidebar extends React.Component<Props, State> {
         </Paper>
     </div>
   }
-
-
 }

app/src/components/TitleBar.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import * as q from '../../../backend/src/Model'
+
+import SearchIcon from '@material-ui/icons/Search';
+
+import { AppBar, Toolbar, Typography, InputBase } from '@material-ui/core';
+import { withStyles, StyleRulesCallback } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+const styles: StyleRulesCallback = (theme) => ({
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing.unit * 2,
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit * 3,
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: 200,
+    },
+  }
+});
+
+interface Props {
+  classes: any
+}
+
+class TitleBar extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      selectedNode: undefined
+    }
+  }
+
+  public render() {
+    const { classes } = this.props;
+
+    return <AppBar position="static">
+        <Toolbar>
+          <Typography className={classes.title} variant="h6" color="inherit">MQTT-Xplorer</Typography>
+          <div className={classes.search}>
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search…"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+            />
+          </div>
+        </Toolbar>
+      </AppBar>
+  }
+}
+
+export default withStyles(styles)(TitleBar)

app/src/components/Tree.tsx

@@ -52,21 +52,15 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
     this.socket.removeAllListeners()
   }
 
-  private getStyle(): {[s: string]: any} {
-    return {
-      marginTop: '64px'
-    }
-  }
-
   public render() {
-    return <div {...this.props}>
-        <List style={this.getStyle()}>
-          <TreeNode
-            didSelectNode={this.props.didSelectNode}
-            treeNode={this.state.tree}
-            name="/" collapsed={false}
-            performanceCallback={(ms) => this.renderDuration = ms}
-            />
+    return <div>
+      <List>
+        <TreeNode
+          didSelectNode={this.props.didSelectNode}
+          treeNode={this.state.tree}
+          name="/" collapsed={false}
+          performanceCallback={(ms) => this.renderDuration = ms}
+        />
       </List>
     </div>;
   }

app/src/components/TreeNode.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as io from 'socket.io-client';
 import * as q from '../../../backend/src/Model'
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -82,7 +81,7 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
 
     if (edges.length > 0) {
       const listItems = edges
-        .map(edge => edge.node)
+        .map(edge => edge.target)
         .map(node => <ListItem style={listItemStyle} button key={node.hash()}>
           <TreeNode didSelectNode={this.props.didSelectNode} treeNode={node} />
         </ListItem>)
@@ -125,11 +124,11 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
       paddingLeft: '5px',
       display: 'inline-block',
     }
-    return this.props.treeNode.value
+    return this.props.treeNode.message
       ? <span
           style={style}
           onMouseOver={() => this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)}
-          > = {this.props.treeNode.value.toString()}</span>
+          > = {this.props.treeNode.message.toString()}</span>
       : null
   }
 
@@ -146,7 +145,6 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
 
   public render() {
     const nodeStyle: React.CSSProperties = {
-      //marginLeft: '10px',
       display: 'block',
     }
 

app/src/components/ValueRenderer.tsx

@@ -32,21 +32,21 @@ export class ValueRenderer extends React.Component<Props, State> {
 
   public render() {
     let node = this.props.node
-    if (!node) {
+    if (!node || !node.message) {
       return null
     }
 
     let json
     try {
-      json = JSON.parse(node.value)
+      json = JSON.parse(node.message.value)
     } catch(error) {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     }
 
     if (typeof json === 'string') {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     } else if (typeof json === 'number') {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     } else {
       return <ReactJson src={json} />
     }

app/src/index.tsx

@@ -1,10 +1,21 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { App } from './App'
+
+import App from './App'
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark', // Switching the dark mode on is a single property value change.
+  },
+  typography: { useNextVariants: true },
+});
 
 declare var document: any
 
 ReactDOM.render(
-    <App />,
+    <MuiThemeProvider theme={theme}>
+      <App />
+    </MuiThemeProvider>,
     document.getElementById("example")
 );