Add theme toggle

app/src/components/BrokerStatistics.tsx

@@ -106,12 +106,13 @@ class BrokerStatistics extends React.Component<Props, {}> {
 
   public renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
     const node = tree.findNode(stat.topic)
-    if (!node) {
+    if (!node || !node.message) {
       return null
     }
 
-    let value = (node.message && node.message.value) ? parseFloat(Base64Message.toUnicodeString(node.message.value)) : NaN
-    value = !isNaN(value) ? abbreviate(value) : value
+    const str = node.message.value ? Base64Message.toUnicodeString(node.message.value) : ''
+    let value = (node.message && node.message.value) ? parseFloat(str) : NaN
+    value = !isNaN(value) ? abbreviate(value) : str
 
     return (
       <div key={stat.title}>

app/src/components/Settings.tsx

@@ -4,7 +4,7 @@ import ChevronRight from '@material-ui/icons/ChevronRight'
 import { AppState } from '../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
+import { settingsActions, globalActions } from '../actions'
 import { shell } from 'electron'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../reducers/Settings'
@@ -70,6 +70,7 @@ const styles: StyleRulesCallback = theme => ({
 
 interface Props {
   actions: typeof settingsActions
+  globalActions: typeof globalActions
   autoExpandLimit: number
   classes: any
   highlightTopicUpdates: boolean
@@ -77,6 +78,7 @@ interface Props {
   store?: any
   topicOrder: TopicOrder
   visible: boolean
+  theme: 'light' | 'dark'
 }
 
 class Settings extends React.Component<Props, {}> {
@@ -112,6 +114,7 @@ class Settings extends React.Component<Props, {}> {
           {this.renderNodeOrder()}
           {this.renderHighlightTopicUpdates()}
           {this.selectTopicsOnMouseOver()}
+          {this.toggleTheme()}
         </div>
         <Tooltip placement="top" title="App Author">
           <Typography className={classes.author} onClick={this.openGithubPage}>
@@ -173,6 +176,12 @@ class Settings extends React.Component<Props, {}> {
     return this.renderSwitch('Quick Preview', selectTopicWithMouseOver, toggle, 'Select topics on mouse over')
   }
 
+  private toggleTheme() {
+    const { globalActions, theme } = this.props
+
+    return this.renderSwitch('Theme', theme === 'light', globalActions.toggleTheme, 'Select a theme')
+  }
+
   private renderAutoExpand() {
     const { classes, autoExpandLimit } = this.props
 
@@ -233,12 +242,14 @@ const mapStateToProps = (state: AppState) => {
     visible: state.settings.visible,
     highlightTopicUpdates: state.settings.highlightTopicUpdates,
     selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
+    theme: state.globalState.theme,
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(settingsActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
   }
 }
 

app/src/components/Sidebar/Publish/Publish.tsx

@@ -284,7 +284,7 @@ class Publish extends React.Component<Props, State> {
   private history() {
     const items = this.state.history.reverse().map(message => ({
       title: message.topic,
-      value: message.payload,
+      value: message.payload || '',
     }))
 
     return <History items={items} onClick={this.didSelectHistoryEntry} />