Move theme setting to settings store

app/src/actions/Settings.ts

@@ -11,6 +11,7 @@ import {
   ActionTypes,
   SettingsState,
   TopicOrder,
+  Action,
 } from '../reducers/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
@@ -152,3 +153,10 @@ function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
 
   return closestExistingLimit(calculatedLimit)
 }
+
+export const toggleTheme = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  dispatch({
+    type: getState().settings.theme === 'light' ? ActionTypes.SETTINGS_SET_THEME_DARK : ActionTypes.SETTINGS_SET_THEME_LIGHT,
+  })
+  dispatch(storeSettings())
+}

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, globalActions } from '../actions'
+import { settingsActions } from '../actions'
 import { shell } from 'electron'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../reducers/Settings'
@@ -70,7 +70,6 @@ const styles: StyleRulesCallback = theme => ({
 
 interface Props {
   actions: typeof settingsActions
-  globalActions: typeof globalActions
   autoExpandLimit: number
   classes: any
   highlightTopicUpdates: boolean
@@ -177,9 +176,9 @@ class Settings extends React.Component<Props, {}> {
   }
 
   private toggleTheme() {
-    const { globalActions, theme } = this.props
+    const { actions, theme } = this.props
 
-    return this.renderSwitch('Theme', theme === 'light', globalActions.toggleTheme, 'Select a theme')
+    return this.renderSwitch('Theme', theme === 'light', actions.toggleTheme, 'Select a theme')
   }
 
   private renderAutoExpand() {
@@ -242,14 +241,13 @@ const mapStateToProps = (state: AppState) => {
     visible: state.settings.visible,
     highlightTopicUpdates: state.settings.highlightTopicUpdates,
     selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
-    theme: state.globalState.theme,
+    theme: state.settings.theme,
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(settingsActions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
   }
 }
 

app/src/index.tsx

@@ -56,7 +56,7 @@ function ApplicationRenderer(props: {theme: 'light' | 'dark'}) {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    theme: state.globalState.theme,
+    theme: state.settings.theme,
   }
 }
 

app/src/reducers/Settings.ts

@@ -18,9 +18,10 @@ export interface SettingsState {
   highlightTopicUpdates: boolean
   valueRendererDisplayMode: ValueRendererDisplayMode
   selectTopicWithMouseOver: boolean
+  theme: 'light' | 'dark'
 }
 
-export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode
+export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode | SetTheme
 
 export enum ActionTypes {
   SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
@@ -31,7 +32,8 @@ export enum ActionTypes {
   SETTINGS_DID_LOAD_SETTINGS = 'SETTINGS_DID_LOAD_SETTINGS',
   SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE = 'SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE',
   SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER = 'SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER',
-
+  SETTINGS_SET_THEME_LIGHT = 'SETTINGS_SET_THEME_LIGHT',
+  SETTINGS_SET_THEME_DARK = 'SETTINGS_SET_THEME_DARK',
 }
 
 const initialState: SettingsState = {
@@ -41,6 +43,14 @@ const initialState: SettingsState = {
   highlightTopicUpdates: true,
   valueRendererDisplayMode: 'diff',
   selectTopicWithMouseOver: false,
+  theme: 'dark',
+}
+
+const setTheme = (theme: 'light' | 'dark') => (state: SettingsState) => {
+  return {
+    ...state,
+    theme,
+  }
 }
 
 export const settingsReducer = createReducer(initialState, {
@@ -52,8 +62,14 @@ export const settingsReducer = createReducer(initialState, {
   SETTINGS_DID_LOAD_SETTINGS: didLoadSettings,
   SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE: setValueRendererDisplayMode,
   SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER: setSelectTopicWithMouseOver,
+  SETTINGS_SET_THEME_LIGHT: setTheme('light'),
+  SETTINGS_SET_THEME_DARK: setTheme('dark'),
 })
 
+export interface SetTheme {
+  type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK
+}
+
 export interface DidLoadSettings {
   type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS
   settings: Partial<SettingsState>

app/src/reducers/index.ts

@@ -34,12 +34,10 @@ export interface GlobalState {
   showUpdateNotification?: boolean
   showUpdateDetails: boolean
   error?: string
-  theme: 'light' | 'dark'
 }
 
 const initialGlobalState: GlobalState = {
   showUpdateDetails: false,
-  theme: 'dark',
 }
 
 const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialGlobalState, action) => {
@@ -61,18 +59,6 @@ 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