luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enforce codestyle

Browse Source
This commit is contained in:
Thomas Nordquist
2019-01-02 16:37:36 +01:00
parent 48aa317c7c
commit 2b7e9a5ef7
24 changed files with 492 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/App.tsx
View File

@@ -1,11 +1,11 @@
import * as React from "react";
import * as React from 'react'
import * as q from '../../backend/src/Model'
import { Tree } from "./components/Tree"
import TitleBar from "./components/TitleBar";
import { Sidebar } from "./components/Sidebar";
import { Tree } from './components/Tree'
import TitleBar from './components/TitleBar'
import { Sidebar } from './components/Sidebar'
import { withTheme, Theme } from '@material-ui/core/styles';
import { withTheme, Theme } from '@material-ui/core/styles'
class State {
public selectedNode?: q.TreeNode | undefined
@@ -17,12 +17,12 @@ interface Props {
class App extends React.Component<Props, State> {
constructor(props: any) {
super(props);
super(props)
this.state = {
selectedNode: undefined
selectedNode: undefined,
}
console.log("asd", this.props)
console.log('asd', this.props)
this.theme = this.props.theme
this.styles = {
primaryText: {
@@ -32,7 +32,7 @@ class App extends React.Component<Props, State> {
},
primaryColor: {
backgroundColor: this.theme.palette.background.default,
//padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
// padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
color: this.theme.palette.common.white,
},
}
@@ -45,7 +45,7 @@ class App extends React.Component<Props, State> {
return <div style={this.styles.primaryColor}>
<TitleBar />
<Tree didSelectNode={(node: q.TreeNode) => {
this.setState({selectedNode: node})
this.setState({ selectedNode: node })
console.log('did select', node)
}} />
</div>

18
app/src/components/Sidebar.tsx
View File

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

24
app/src/components/TitleBar.tsx
View File

@@ -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…"

24
app/src/components/Tree.tsx
View File

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

50
app/src/components/TreeNode.tsx
View File

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

16
app/src/components/ValueRenderer.tsx
View File

@@ -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>

12
app/src/index.tsx
View File

@@ -1,15 +1,15 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
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
@@ -17,5 +17,5 @@ ReactDOM.render(
<MuiThemeProvider theme={theme}>
<App />
</MuiThemeProvider>,
document.getElementById("example")
);
document.getElementById('example'),
)