Enforce codestyle

2019-01-02 16:37:36 +01:00
parent 48aa317c7c
commit 2b7e9a5ef7
24 changed files with 492 additions and 195 deletions
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react'
 import * as q from '../../../backend/src/Model'
-import Drawer from '@material-ui/core/Drawer';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
+import Drawer from '@material-ui/core/Drawer'
+import TextField from '@material-ui/core/TextField'
+import Paper from '@material-ui/core/Paper'
 import { ValueRenderer } from './ValueRenderer'

 interface Props {
@@ -16,13 +16,13 @@ interface State {
 export class Sidebar extends React.Component<Props, State> {
  private updateNode: (node?: q.TreeNode | undefined) => void
  constructor(props: any) {
-    super(props);
+    super(props)
    this.state = {}
    this.updateNode = (node) => {
      if (!node) {
        this.setState(this.state)
      } else {
-        this.setState({node: node})
+        this.setState({ node })
      }
    }
  }
@@ -44,11 +44,11 @@ export class Sidebar extends React.Component<Props, State> {
  }

  private renderNode() {
-    let style: React.CSSProperties = {display: 'block', width: '40vw'}
-    let topicStyle: React.CSSProperties = {width: '100%'}
+    const style: React.CSSProperties = { display: 'block', width: '40vw' }
+    const topicStyle: React.CSSProperties = { width: '100%' }

    if (!this.state.node) {
-        return null
+      return null
    }

    return <div style={style}>
--- a/app/src/components/TitleBar.tsx
+++ b/app/src/components/TitleBar.tsx
@@ -1,13 +1,13 @@
-import * as React from "react";
+import * as React from 'react'
 import * as q from '../../../backend/src/Model'

-import SearchIcon from '@material-ui/icons/Search';
+import Search 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';
+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) => ({
+const styles: StyleRulesCallback = theme => ({
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
@@ -52,8 +52,8 @@ const styles: StyleRulesCallback = (theme) => ({
    [theme.breakpoints.up('md')]: {
      width: 200,
    },
-  }
-});
+  },
+})

 interface Props {
  classes: any
@@ -61,21 +61,21 @@ interface Props {

 class TitleBar extends React.Component<Props, {}> {
  constructor(props: any) {
-    super(props);
+    super(props)
    this.state = {
-      selectedNode: undefined
+      selectedNode: undefined,
    }
  }

  public render() {
-    const { classes } = this.props;
+    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 />
+              <Search />
            </div>
            <InputBase
              placeholder="Search…"
--- a/app/src/components/Tree.tsx
+++ b/app/src/components/Tree.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as io from 'socket.io-client';
+import * as React from 'react'
+import * as io from 'socket.io-client'
 import * as q from '../../../backend/src/Model'
 import { TreeNode } from './TreeNode'
-import List from '@material-ui/core/List';
+import List from '@material-ui/core/List'

-var throttle = require('lodash.throttle');
+const throttle = require('lodash.throttle')

 class TreeState {
  public tree: q.Tree
@@ -24,10 +24,10 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
  private renderDuration: number = 300

  constructor(props: any) {
-    super(props);
-    let tree = new q.Tree()
+    super(props)
+    const tree = new q.Tree()
    this.state = new TreeState(tree, {})
-    this.socket = io('http://localhost:3000');
+    this.socket = io('http://localhost:3000')
  }

  public componentDidMount() {
@@ -36,15 +36,15 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
      updateState.cancel()
      updateState = throttle(() => {
        this.setState(state)
-      }, Math.max(this.renderDuration * 5, 300), {trailing: true})
+      }, Math.max(this.renderDuration * 5, 300), { trailing: true })
    }, 1000)

    this.socket.on('message', (msg: any) => {
      const edges = msg.topic.split('/')
-      const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, "base64").toString())
+      const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
      this.state.tree.updateWithNode(node.firstNode())

-      updateState({tree: this.state.tree, msg: msg})
+      updateState({ msg, tree: this.state.tree })
    })
  }

@@ -59,9 +59,9 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
          didSelectNode={this.props.didSelectNode}
          treeNode={this.state.tree}
          name="/" collapsed={false}
-          performanceCallback={(ms) => this.renderDuration = ms}
+          performanceCallback={ms => this.renderDuration = ms}
        />
      </List>
-    </div>;
+    </div>
  }
 }
--- a/app/src/components/TreeNode.tsx
+++ b/app/src/components/TreeNode.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as React from 'react'
 import * as q from '../../../backend/src/Model'
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import Collapse from '@material-ui/core/Collapse';
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import Collapse from '@material-ui/core/Collapse'

 export interface TreeNodeProps {
-  treeNode: q.TreeNode,
+  treeNode: q.TreeNode
  name?: string | undefined
  collapsed?: boolean | undefined
  performanceCallback?: ((ms: number) => void) | undefined
@@ -13,13 +13,13 @@ export interface TreeNodeProps {
 }

 interface TreeNodeState {
-  title: string | undefined,
-  collapsed: boolean,
-  collapsedOverride: boolean | undefined,
+  title: string | undefined
+  collapsed: boolean
+  collapsedOverride: boolean | undefined
  edgeCount: number
 }

-let collapseLimit = 0
+const collapseLimit = 0
 declare var performance: any

 export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
@@ -29,14 +29,14 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  constructor(props: TreeNodeProps, state: TreeNodeState) {
    super(props, state)

-    let edgeCount = Object.keys(props.treeNode.edges).length
-    let collapsed = edgeCount > collapseLimit
+    const edgeCount = Object.keys(props.treeNode.edges).length
+    const collapsed = edgeCount > collapseLimit

    this.props.treeNode.on('update', () => {
      this.dirty = true
    })

-    this.state = {collapsed, edgeCount: edgeCount, collapsedOverride: props.collapsed, title: props.name}
+    this.state = { collapsed, edgeCount, collapsedOverride: props.collapsed, title: props.name }
  }

  public setState(state: any) {
@@ -51,7 +51,7 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  public componentDidUpdate() {
    this.dirty = false
    if (this.props.performanceCallback) {
-      let renderTime = performance.now()-this.willUpdateTime
+      const renderTime = performance.now() - this.willUpdateTime
      this.props.performanceCallback(renderTime)
    }
  }
@@ -73,10 +73,10 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  private renderNodes() {
    const edges = Object.values(this.props.treeNode.edges)
    const listItemStyle = {
-      padding: '3px 8px 3px 8px'
+      padding: '3px 8px 3px 8px',
    }
    const listStyle = {
-      padding: '3px 8px 3px 16px'
+      padding: '3px 8px 3px 16px',
    }

    if (edges.length > 0) {
@@ -94,11 +94,11 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {

  private renderSourceEdge() {
    const style: React.CSSProperties = {
-      fontWeight: "bold",
+      fontWeight: 'bold',
      overflow: 'hidden',
      display: 'inline-block',
    }
-    let name = this.state.title || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
+    const name = this.state.title || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)

    return <span style={style} onClick={() => this.toggle()}>{name}</span>
  }
@@ -110,13 +110,13 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  }

  public componentWillReceiveProps() {
-    let edgeCount = Object.keys(this.props.treeNode.edges).length
-    this.setState({collapsed: edgeCount > collapseLimit, edgeCount: edgeCount})
+    const edgeCount = Object.keys(this.props.treeNode.edges).length
+    this.setState({ edgeCount, collapsed: edgeCount > collapseLimit })
  }

  private renderValue() {
    const style: React.CSSProperties = {
-      width: "15em",
+      width: '15em',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
@@ -133,12 +133,12 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  }

  private clear() {
-    return <div style={{clear: 'both'}} />
+    return <div style={{ clear: 'both' }} />
  }

  private renderTitleLine() {
    const style = {
-      lineHeight: '1em'
+      lineHeight: '1em',
    }
    return <div style={style}>{this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}</div>
  }
@@ -160,7 +160,7 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  }

  private toggle() {
-    this.setState({collapsedOverride: !this.collapsed()})
+    this.setState({ collapsedOverride: !this.collapsed() })
  }

  private renderExpander() {
@@ -178,8 +178,8 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
      return null
    }

-    let style = {
-      color: '#333'
+    const style = {
+      color: '#333',
    }
    return <span style={style}>({this.props.treeNode.leafes().length} nodes)</span>
  }
--- a/app/src/components/ValueRenderer.tsx
+++ b/app/src/components/ValueRenderer.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react'
 import * as q from '../../../backend/src/Model'
-import ReactJson from 'react-json-view'
+import { default as ReactJson } from 'react-json-view'

 interface Props {
  node?: q.TreeNode | undefined
@@ -13,13 +13,13 @@ interface State {
 export class ValueRenderer extends React.Component<Props, State> {
  private updateNode: (node?: q.TreeNode | undefined) => void
  constructor(props: any) {
-    super(props);
+    super(props)
    this.state = {}
    this.updateNode = (node) => {
      if (!node) {
        this.setState(this.state)
      } else {
-        this.setState({node: node})
+        this.setState({ node })
      }
    }
  }
@@ -31,7 +31,7 @@ export class ValueRenderer extends React.Component<Props, State> {
  }

  public render() {
-    let node = this.props.node
+    const node = this.props.node
    if (!node || !node.message) {
      return null
    }
@@ -39,7 +39,7 @@ export class ValueRenderer extends React.Component<Props, State> {
    let json
    try {
      json = JSON.parse(node.message.value)
-    } catch(error) {
+    } catch (error) {
      return this.renderRawValue(node.message.value)
    }

@@ -53,13 +53,13 @@ export class ValueRenderer extends React.Component<Props, State> {
  }

  private renderRawValue(value: string) {
-    let style: React.CSSProperties = {
+    const style: React.CSSProperties = {
      wordBreak: 'break-all',
      width: '100%',
      overflow: 'scroll',
      display: 'block',
      lineHeight: '1.2em',
-      padding: '12px 5px 12px 5px'
+      padding: '12px 5px 12px 5px',
    }

    return <pre><code style={style}>{value}</code></pre>