diff --git a/app/src/actions/Global.ts b/app/src/actions/Global.ts index 79cf6c2..49ee179 100644 --- a/app/src/actions/Global.ts +++ b/app/src/actions/Global.ts @@ -1,4 +1,5 @@ -import { ActionTypes } from '../reducers' +import { ActionTypes } from '../reducers/Global' +import { Dispatch } from 'redux' export const showError = (error?: string) => ({ error, @@ -13,3 +14,9 @@ export const showNotification = (notification?: string) => ({ export const didLaunch = () => ({ type: ActionTypes.didLaunch, }) + +export const toggleSettingsVisibility = () => (dispatch: Dispatch) => { + dispatch({ + type: ActionTypes.toggleSettingsVisibility, + }) +} \ No newline at end of file diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts index 3b56cf3..f9906ae 100644 --- a/app/src/actions/Settings.ts +++ b/app/src/actions/Settings.ts @@ -52,7 +52,6 @@ export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Di autoExpandLimit, type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT, }) - dispatch(storeSettings()) } export const selectTopicWithMouseOver = (doSelect: boolean) => (dispatch: Dispatch) => { @@ -71,13 +70,6 @@ export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') => dispatch(storeSettings()) } -export const toggleSettingsVisibility = () => (dispatch: Dispatch) => { - dispatch({ - type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY, - }) - dispatch(storeSettings()) -} - export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch) => { dispatch({ type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY, diff --git a/app/src/actions/UpdateNotifier.ts b/app/src/actions/UpdateNotifier.ts index 19c3400..ed8ad32 100644 --- a/app/src/actions/UpdateNotifier.ts +++ b/app/src/actions/UpdateNotifier.ts @@ -1,13 +1,13 @@ -import { ActionTypes, CustomAction } from '../reducers' +import { ActionTypes, GlobalAction } from '../reducers/Global' -export const showUpdateNotification = (show: boolean): CustomAction => { +export const showUpdateNotification = (show: boolean): GlobalAction => { return { type: ActionTypes.showUpdateNotification, showUpdateNotification: show, } } -export const showUpdateDetails = (show: boolean): CustomAction => { +export const showUpdateDetails = (show: boolean): GlobalAction => { return { type: ActionTypes.showUpdateDetails, showUpdateDetails: show, diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx index 69448fe..23a70b7 100644 --- a/app/src/components/App.tsx +++ b/app/src/components/App.tsx @@ -138,12 +138,12 @@ const mapDispatchToProps = (dispatch: any) => { const mapStateToProps = (state: AppState) => { return { - settingsVisible: state.settings.get('visible'), + settingsVisible: state.globalState.get('settingsVisible'), connectionId: state.connection.connectionId, - error: state.globalState.error, - notification: state.globalState.notification, + error: state.globalState.get('error'), + notification: state.globalState.get('notification'), highlightTopicUpdates: state.settings.get('highlightTopicUpdates'), - launching: state.globalState.launching, + launching: state.globalState.get('launching'), } } diff --git a/app/src/components/Layout/TitleBar.tsx b/app/src/components/Layout/TitleBar.tsx index b795227..c92d371 100644 --- a/app/src/components/Layout/TitleBar.tsx +++ b/app/src/components/Layout/TitleBar.tsx @@ -7,7 +7,7 @@ import Search from '@material-ui/icons/Search' import { AppState } from '../../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { connectionActions, settingsActions, treeActions } from '../../actions' +import { connectionActions, settingsActions, globalActions } from '../../actions' import { fade } from '@material-ui/core/styles/colorManipulator' import { StyleRulesCallback, withStyles } from '@material-ui/core/styles' import { @@ -81,6 +81,7 @@ interface Props { actions: { settings: typeof settingsActions, connection: typeof connectionActions, + global: typeof globalActions, } topicFilter?: string } @@ -124,7 +125,7 @@ class TitleBar extends React.Component { return ( - + MQTT Explorer @@ -150,6 +151,7 @@ const mapDispatchToProps = (dispatch: any) => { return { actions: { settings: bindActionCreators(settingsActions, dispatch), + global: bindActionCreators(globalActions, dispatch), connection: bindActionCreators(connectionActions, dispatch), }, } diff --git a/app/src/components/SettingsDrawer/BooleanSwitch.tsx b/app/src/components/SettingsDrawer/BooleanSwitch.tsx index d0662c9..16cbe43 100644 --- a/app/src/components/SettingsDrawer/BooleanSwitch.tsx +++ b/app/src/components/SettingsDrawer/BooleanSwitch.tsx @@ -1,5 +1,10 @@ import * as React from 'react' -import { InputLabel, Switch, Tooltip, Theme } from '@material-ui/core' +import { + InputLabel, + Switch, + Theme, + Tooltip + } from '@material-ui/core' import { withStyles } from '@material-ui/styles' const sha1 = require('sha1') diff --git a/app/src/components/SettingsDrawer/Settings.tsx b/app/src/components/SettingsDrawer/Settings.tsx index 592a1f2..25bd5c9 100644 --- a/app/src/components/SettingsDrawer/Settings.tsx +++ b/app/src/components/SettingsDrawer/Settings.tsx @@ -204,7 +204,7 @@ const mapStateToProps = (state: AppState) => { return { autoExpandLimit: state.settings.get('autoExpandLimit'), topicOrder: state.settings.get('topicOrder'), - visible: state.settings.get('visible'), + visible: state.globalState.get('settingsVisible'), highlightTopicUpdates: state.settings.get('highlightTopicUpdates'), selectTopicWithMouseOver: state.settings.get('selectTopicWithMouseOver'), theme: state.settings.get('theme'), diff --git a/app/src/reducers/Global.ts b/app/src/reducers/Global.ts index 1afa893..b6ab124 100644 --- a/app/src/reducers/Global.ts +++ b/app/src/reducers/Global.ts @@ -17,26 +17,29 @@ export interface GlobalAction extends Action { showUpdateDetails?: boolean error?: string notification?: string - settingsVisible: boolean } -export interface GlobalState { +interface GlobalStateInterface { showUpdateNotification?: boolean showUpdateDetails: boolean error?: string notification?: string launching: boolean + settingsVisible: boolean } -const initialGlobalState = Record({ +export type GlobalState = Record + +const initialStateFactory = Record({ showUpdateNotification: false, showUpdateDetails: false, error: undefined, notification: undefined, launching: true, + settingsVisible: false, }) -export const globalState: Reducer, GlobalAction> = (state = initialGlobalState(), action): Record => { +export const globalState: Reducer, GlobalAction> = (state = initialStateFactory(), action): GlobalState => { trackEvent(action.type) console.log(action.type) @@ -44,6 +47,9 @@ export const globalState: Reducer, GlobalAction> = (state = case ActionTypes.showUpdateNotification: return state.set('showUpdateNotification', action.showUpdateNotification) + case ActionTypes.toggleSettingsVisibility: + return state.set('settingsVisible', !state.get('settingsVisible')) + case ActionTypes.showError: return state.set('error', action.error) diff --git a/app/src/reducers/Settings.ts b/app/src/reducers/Settings.ts index b155d84..c19f1ac 100644 --- a/app/src/reducers/Settings.ts +++ b/app/src/reducers/Settings.ts @@ -12,7 +12,6 @@ export type ValueRendererDisplayMode = 'diff' | 'raw' export interface SettingsState { autoExpandLimit: number - visible: boolean topicOrder: TopicOrder topicFilter?: string highlightTopicUpdates: boolean @@ -23,7 +22,6 @@ export interface SettingsState { export type Actions = SetAutoExpandLimitAction & DidLoadSettingsAction - & ToggleVisibilityAction & SetTopicOrderAction & FilterTopicsAction & ToggleHighlightTopicUpdatesAction @@ -33,7 +31,6 @@ export type Actions = SetAutoExpandLimitAction export enum ActionTypes { SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT', - SETTINGS_TOGGLE_VISIBILITY = 'SETTINGS_TOGGLE_VISIBILITY', SETTINGS_SET_TOPIC_ORDER = 'SETTINGS_SET_TOPIC_ORDER', SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS', SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY', @@ -47,7 +44,6 @@ export enum ActionTypes { const initialState = Record({ autoExpandLimit: 0, topicOrder: TopicOrder.none, - visible: false, highlightTopicUpdates: true, valueRendererDisplayMode: 'diff', selectTopicWithMouseOver: false, @@ -61,7 +57,6 @@ const setTheme = (theme: 'light' | 'dark') => (state: Record) => const reducerActions: {[s: string]: (state: Record, action: Actions) => Record} = { SETTINGS_SET_AUTO_EXPAND_LIMIT: setAutoExpandLimit, - SETTINGS_TOGGLE_VISIBILITY: toggleVisibility, SETTINGS_SET_TOPIC_ORDER: setTopicOrder, SETTINGS_FILTER_TOPICS: filterTopics, SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: toggleHighlightTopicUpdates, @@ -123,15 +118,6 @@ function toggleHighlightTopicUpdates(state: Record, action: Toggl return state.set('highlightTopicUpdates', !state.get('highlightTopicUpdates')) } -export interface ToggleVisibilityAction { - type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY -} - -// 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, action: ToggleVisibilityAction) { - return state.set('visible', !state.get('visible')) -} - export interface SetTopicOrderAction { type: ActionTypes.SETTINGS_SET_TOPIC_ORDER topicOrder: TopicOrder