Fix updating tree nodes when settings change

app/src/reducers/Settings.ts

@@ -1,5 +1,5 @@
-import { Action } from 'redux'
 import { createReducer } from './lib'
+import { Record } from 'immutable'
 
 export enum TopicOrder {
   none = 'none',
@@ -21,7 +21,15 @@ export interface SettingsState {
   theme: 'light' | 'dark'
 }
 
-export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode | SetTheme
+export type Actions = SetAutoExpandLimitAction
+  & DidLoadSettingsAction
+  & ToggleVisibilityAction
+  & SetTopicOrderAction
+  & FilterTopicsAction
+  & ToggleHighlightTopicUpdatesAction
+  & SetValueRendererDisplayModeAction
+  & SetTheme
+  & SetSelectTopicWithMouseOverAction
 
 export enum ActionTypes {
   SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
@@ -36,131 +44,108 @@ export enum ActionTypes {
   SETTINGS_SET_THEME_DARK = 'SETTINGS_SET_THEME_DARK',
 }
 
-const initialState: SettingsState = {
+const initialState = Record<SettingsState>({
   autoExpandLimit: 0,
   topicOrder: TopicOrder.none,
   visible: false,
   highlightTopicUpdates: true,
   valueRendererDisplayMode: 'diff',
   selectTopicWithMouseOver: false,
-  theme: 'dark',
+  theme: 'light',
+})
+
+const setTheme = (theme: 'light' | 'dark') => (state: Record<SettingsState>) => {
+  return state.set('theme', theme)
 }
 
-const setTheme = (theme: 'light' | 'dark') => (state: SettingsState) => {
-  return {
-    ...state,
-    theme,
-  }
-}
-
-export const settingsReducer = createReducer(initialState, {
+const reducerActions: {[s: string]: (state: Record<SettingsState>, action: Actions) => Record<SettingsState>} = {
   SETTINGS_SET_AUTO_EXPAND_LIMIT: setAutoExpandLimit,
   SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
   SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
   SETTINGS_FILTER_TOPICS: filterTopics,
-  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
+  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: toggleHighlightTopicUpdates,
   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 const settingsReducer = createReducer(initialState(), reducerActions)
 
 export interface SetTheme {
   type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK
   theme: 'light'
 }
 
-export interface DidLoadSettings {
+export interface DidLoadSettingsAction {
   type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS
   settings: Partial<SettingsState>
 }
 
-function didLoadSettings(state: SettingsState, action: DidLoadSettings) {
-  return {
-    ...state,
-    ...action.settings,
-  }
+function didLoadSettings(state: Record<SettingsState>, action: DidLoadSettingsAction) {
+  return state.merge(action.settings)
 }
 
-export interface SetSelectTopicWithMouseOver {
+export interface SetSelectTopicWithMouseOverAction {
   type: ActionTypes.SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER
   selectTopicWithMouseOver: boolean
 }
 
-export function setSelectTopicWithMouseOver(state: SettingsState, action: SetSelectTopicWithMouseOver) {
-  return {
-    ...state,
-    selectTopicWithMouseOver: action.selectTopicWithMouseOver,
-  }
+export function setSelectTopicWithMouseOver(state: Record<SettingsState>, action: SetSelectTopicWithMouseOverAction) {
+  return state.set('selectTopicWithMouseOver', !state.get('selectTopicWithMouseOver'))
 }
 
-export interface SetValueRendererDisplayMode {
+export interface SetValueRendererDisplayModeAction {
   type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE
   valueRendererDisplayMode: ValueRendererDisplayMode
 }
 
-export function setValueRendererDisplayMode(state: SettingsState, action: SetValueRendererDisplayMode) {
-  return {
-    ...state,
-    valueRendererDisplayMode: action.valueRendererDisplayMode,
-  }
+export function setValueRendererDisplayMode(state: Record<SettingsState>, action: SetValueRendererDisplayModeAction) {
+  return state.set('valueRendererDisplayMode', action.valueRendererDisplayMode)
 }
 
-export interface SetAutoExpandLimit {
+export interface SetAutoExpandLimitAction {
   type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
   autoExpandLimit: number
 }
 
-function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
-  return {
-    ...state,
-    autoExpandLimit: action.autoExpandLimit,
-  }
+function setAutoExpandLimit(state: Record<SettingsState>, action: SetAutoExpandLimitAction) {
+  return state.set('autoExpandLimit', action.autoExpandLimit)
 }
 
-export interface TogglehighlightTopicUpdates {
+export interface ToggleHighlightTopicUpdatesAction {
   type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
 }
 
-function togglehighlightTopicUpdates(state: SettingsState, _action: TogglehighlightTopicUpdates) {
-  return {
-    ...state,
-    highlightTopicUpdates: !state.highlightTopicUpdates,
-  }
+function toggleHighlightTopicUpdates(state: Record<SettingsState>, action: ToggleHighlightTopicUpdatesAction) {
+  return state.set('highlightTopicUpdates', !state.get('highlightTopicUpdates'))
 }
 
-export interface ToggleVisibility {
+export interface ToggleVisibilityAction {
   type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
 }
 
-function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
-  return {
-    ...state,
-    visible: !state.visible,
-  }
+// Todo: Should not be part of the settings store, it would require all tree nodes to re-render when toggeling settings
+function toggleVisibility(state: Record<SettingsState>, action: ToggleVisibilityAction) {
+  return state.set('visible', !state.get('visible'))
 }
 
-function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
-  return {
-    ...state,
-    topicOrder: action.topicOrder,
-  }
-}
-
-export interface SetTopicOrder {
+export interface SetTopicOrderAction {
   type: ActionTypes.SETTINGS_SET_TOPIC_ORDER
-  topicOrder: string
+  topicOrder: TopicOrder
 }
 
-function filterTopics(state: SettingsState, action: FilterTopics) {
-  return {
-    ...state,
-    topicFilter: action.topicFilter,
-  }
+function setTopicOrder(state: Record<SettingsState>, action: SetTopicOrderAction) {
+  return state.set('topicOrder', action.topicOrder)
 }
 
-export interface FilterTopics {
+export interface FilterTopicsAction {
   type: ActionTypes.SETTINGS_FILTER_TOPICS
   topicFilter: string
 }
+
+// @Todo: move to tree reducer, should not be persisted / is no application setting
+function filterTopics(state: Record<SettingsState>, action: FilterTopicsAction) {
+  return state.set('topicFilter', action.topicFilter)
+}