Move settings visibility to global state

Fixes #95

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<any>) => {
+  dispatch({
+    type: ActionTypes.toggleSettingsVisibility,
+  })
+}

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<any>) => {
@@ -71,13 +70,6 @@ export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') =>
   dispatch(storeSettings())
 }
 
-export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>) => {
-  dispatch({
-    type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
-  })
-  dispatch(storeSettings())
-}
-
 export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch<any>) => {
   dispatch({
     type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY,

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,

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'),
   }
 }
 

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<Props, {}> {
     return (
       <AppBar position="static">
         <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={actions.settings.toggleSettingsVisibility}>
+          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={actions.global.toggleSettingsVisibility}>
             <Menu />
           </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
@@ -150,6 +151,7 @@ const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: {
       settings: bindActionCreators(settingsActions, dispatch),
+      global: bindActionCreators(globalActions, dispatch),
       connection: bindActionCreators(connectionActions, dispatch),
     },
   }

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')
 

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'),

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<GlobalState>({
+export type GlobalState = Record<GlobalStateInterface>
+
+const initialStateFactory = Record<GlobalStateInterface>({
   showUpdateNotification: false,
   showUpdateDetails: false,
   error: undefined,
   notification: undefined,
   launching: true,
+  settingsVisible: false,
 })
 
-export const globalState: Reducer<Record<GlobalState>, GlobalAction> = (state = initialGlobalState(), action): Record<GlobalState> => {
+export const globalState: Reducer<Record<GlobalStateInterface>, GlobalAction> = (state = initialStateFactory(), action): GlobalState => {
   trackEvent(action.type)
   console.log(action.type)
 
@@ -44,6 +47,9 @@ export const globalState: Reducer<Record<GlobalState>, 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)
 

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<SettingsState>({
   autoExpandLimit: 0,
   topicOrder: TopicOrder.none,
-  visible: false,
   highlightTopicUpdates: true,
   valueRendererDisplayMode: 'diff',
   selectTopicWithMouseOver: false,
@@ -61,7 +57,6 @@ const setTheme = (theme: 'light' | 'dark') => (state: Record<SettingsState>) =>
 
 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,
@@ -123,15 +118,6 @@ function toggleHighlightTopicUpdates(state: Record<SettingsState>, 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<SettingsState>, action: ToggleVisibilityAction) {
-  return state.set('visible', !state.get('visible'))
-}
-
 export interface SetTopicOrderAction {
   type: ActionTypes.SETTINGS_SET_TOPIC_ORDER
   topicOrder: TopicOrder