Refactor

app/src/components/helper/ConnectionHealthIndicator.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
+import { AppState } from '../../reducers'
+import { connect } from 'react-redux'
+import { ConnectionHealth } from '../../reducers/Connection'
+import { green, orange, red } from '@material-ui/core/colors'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { Tooltip } from '@material-ui/core'
+
+const styles: StyleRulesCallback = theme => ({
+  offline: {
+    color: red[700],
+  },
+  online: {
+    color: green[400],
+  },
+  connecting: {
+    color: orange[600],
+  },
+  icon: {
+    boxShadow: theme.shadows[2].split('),').map(s => `inset ${s}`).join('),'),
+    padding: '6px',
+    borderRadius: '50%',
+    backgroundColor: '#eee',
+    width: '35px',
+    height: '35px',
+  },
+})
+
+interface Props {
+  classes: any
+  connected: boolean
+  health?: ConnectionHealth
+  withBackground?: boolean
+}
+
+class ConnectionHealthIndicator extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props)
+  }
+
+  public render() {
+    const { classes, health, connected } = this.props
+    if (!health || !connected) {
+      return null
+    }
+
+    return (
+      <Tooltip title={`Connection health "${health}"`}>
+        <DeviceHubOutlined className={`${[classes[health]]} ${this.props.withBackground ? classes.icon : ''}`} />
+      </Tooltip>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    health: state.connection.health,
+    connected: state.connection.connected || state.connection.connecting,
+  }
+}
+
+export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))

app/src/components/helper/Copy.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import Check from '@material-ui/icons/Check'
+import CustomIconButton from '../CustomIconButton'
+import FileCopy from '@material-ui/icons/FileCopy'
+import green from '@material-ui/core/colors/green'
+import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+const copy = require('copy-text-to-clipboard')
+
+interface Props {
+  value: string
+  classes: any
+}
+
+interface State {
+  didCopy: boolean
+  snackBarOpen: boolean
+}
+
+const styles = (theme: Theme) => ({
+  snackbar: {
+    backgroundColor: green[600],
+    color: theme.typography.button.color,
+  },
+})
+
+class Copy extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { didCopy: false, snackBarOpen: false }
+  }
+
+  private handleClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+
+    copy(this.props.value)
+    this.setState({ didCopy: true, snackBarOpen: true })
+    setTimeout(() => {
+      this.setState({ didCopy: false })
+    }, 1500)
+  }
+
+  public render() {
+    const icon = !this.state.didCopy
+      ? <FileCopy fontSize="inherit" />
+      : <Check fontSize="inherit" style={{ cursor: 'default' }} />
+
+    return (
+      <span>
+        <Tooltip placement="top" title="Copy to clipboard">
+          <span style={{ fontSize: '16px' }}>
+          <CustomIconButton onClick={this.handleClick} >
+            {icon}
+          </CustomIconButton>
+          </span>
+        </Tooltip>
+        <span>
+          <Snackbar
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            open={this.state.snackBarOpen}
+            autoHideDuration={2000}
+            onClose={() => { this.setState({ snackBarOpen: false }) }}
+          >
+            <SnackbarContent
+              className={this.props.classes.snackbar}
+              message="Copied to clipboard"
+            />
+          </Snackbar>
+        </span>
+      </span>
+    )
+  }
+}
+
+export default withStyles(styles)(Copy)