Fix updating tree nodes when settings change
This commit is contained in:
Thomas Nordquist
@@ -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)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Action, combineReducers, Reducer } from 'redux'
|
||||
import { connectionManagerReducer, ConnectionManagerState } from './ConnectionManager'
|
||||
import { connectionReducer, ConnectionState } from './Connection'
|
||||
import { publishReducer, PublishState } from './Publish'
|
||||
import { Record } from 'immutable'
|
||||
import { settingsReducer, SettingsState } from './Settings'
|
||||
import { trackEvent } from '../utils/tracking'
|
||||
import { treeReducer, TreeState } from './Tree'
|
||||
@@ -23,7 +24,7 @@ export interface CustomAction extends Action {
|
||||
export interface AppState {
|
||||
globalState: GlobalState
|
||||
tree: TreeState
|
||||
settings: SettingsState,
|
||||
settings: Record<SettingsState>,
|
||||
publish: PublishState
|
||||
connection: ConnectionState
|
||||
connectionManager: ConnectionManagerState
|
||||
|
||||
Reference in New Issue
Block a user