Add theme toggle

app/src/actions/Global.ts

@@ -1,6 +1,13 @@
-import { ActionTypes } from '../reducers'
+import { ActionTypes, AppState, CustomAction } from '../reducers'
+import { Dispatch } from 'redux';
 
 export const showError = (error?: string) => ({
  error,
  type: ActionTypes.showError,
 })
+
+export const toggleTheme = () => (dispatch: Dispatch<CustomAction>, getState: () => AppState) => {
+ dispatch({
+ type: getState().globalState.theme === 'light' ? ActionTypes.setDarkTheme : ActionTypes.setLightTheme,
+ })
+}

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,13 +70,15 @@ const styles: StyleRulesCallback = theme => ({
 
 interface Props {
  actions: typeof settingsActions
+ globalActions: typeof globalActions
  autoExpandLimit: number
  classes: any
  highlightTopicUpdates: boolean
  selectTopicWithMouseOver: boolean
  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} />

app/src/index.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import App from './App'
-import Demo from './components/demo'
-import reducers from './reducers'
+import Demo from './components/Demo'
+import reducers, { AppState } from './reducers'
 import reduxThunk from 'redux-thunk'
 import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
-import { Provider } from 'react-redux'
+import { createMuiTheme, MuiThemeProvider, Theme } from '@material-ui/core/styles'
+import { Provider, connect } from 'react-redux'
 import './tracking'
 
-
-
-
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
  reducers,
@@ -24,12 +21,6 @@ const store = createStore(
  ),
 )
 
-const theme = createMuiTheme({
- palette: {
- type: 'dark',
- },
-})
-
 setTimeout(() => {
  const splash = document.getElementById('splash')
  if (splash) {
@@ -38,12 +29,42 @@ setTimeout(() => {
  }
 }, 300)
 
+function createTheme(type: 'light' | 'dark') {
+ if (type === 'dark') {
+ return createMuiTheme({
+ palette: {
+ type: 'dark',
+ },
+ })
+ } else {
+ return createMuiTheme({
+ palette: {
+ type: 'light',
+ },
+ })
+ }
+}
+
+function ApplicationRenderer(props: {theme: 'light' | 'dark'}) {
+ return (
+ <MuiThemeProvider theme={createTheme(props.theme)}>
+ <App />
+ <Demo />
+ </MuiThemeProvider>
+ )
+}
+
+const mapStateToProps = (state: AppState) => {
+ return {
+ theme: state.globalState.theme,
+ }
+}
+
+const Application = connect(mapStateToProps)(ApplicationRenderer)
+
 ReactDOM.render(
- <MuiThemeProvider theme={theme}>
- <Provider store={store}>
- <App />
- <Demo />
- </Provider>
- </MuiThemeProvider>,
- document.getElementById('app'),
+ <Provider store={store}>
+ <Application />
+ </Provider>,
+ document.getElementById('app'),
 )

app/src/reducers/index.ts

@@ -6,11 +6,12 @@ import { settingsReducer, SettingsState } from './Settings'
 import { trackEvent } from '../tracking'
 import { treeReducer, TreeState } from './Tree'
 
-
 export enum ActionTypes {
  showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
  showUpdateDetails = 'SHOW_UPDATE_DETAILS',
  showError = 'SHOW_ERROR',
+ setDarkTheme = 'GLOBAL_SET_DARK_THEME',
+ setLightTheme = 'GLOBAL_SET_LIGHT_THEME',
 }
 
 export interface CustomAction extends Action {
@@ -33,13 +34,15 @@ export interface GlobalState {
  showUpdateNotification?: boolean
  showUpdateDetails: boolean
  error?: string
+ theme: 'light' | 'dark'
 }
 
-const initialBigState: GlobalState = {
+const initialGlobalState: GlobalState = {
  showUpdateDetails: false,
+ theme: 'dark',
 }
 
-const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialBigState, action) => {
+const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialGlobalState, action) => {
  if (!state) {
  throw Error('No initial state')
  }
@@ -58,6 +61,18 @@ const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = ini
  error: action.error,
  }
 
+ case ActionTypes.setDarkTheme:
+ return {
+ ...state,
+ theme: 'dark',
+ }
+
+ case ActionTypes.setLightTheme:
+ return {
+ ...state,
+ theme: 'light',
+ }
+
  case ActionTypes.showUpdateDetails:
  if (action.showUpdateDetails === undefined) {
  return state