diff --git a/app/index.html b/app/index.html
index 1499bfa..6fd8026 100644
--- a/app/index.html
+++ b/app/index.html
@@ -2,6 +2,10 @@
+
MQTT Explorer
diff --git a/app/src/actions/Connection.ts b/app/src/actions/Connection.ts
index 7b16ae6..1c94079 100644
--- a/app/src/actions/Connection.ts
+++ b/app/src/actions/Connection.ts
@@ -1,12 +1,13 @@
import * as q from '../../../backend/src/Model'
import * as url from 'url'
import { Action, ActionTypes } from '../reducers/Connection'
+import { Action as SettingsAction, ActionTypes as SettingsActionTypes } from '../reducers/Settings'
import { AppState } from '../reducers'
import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
import { Dispatch } from 'redux'
import { globalActions } from '.'
import { showError } from './Global'
-import { showTree } from './Tree'
+import { showTree, resetStore as resetTreeStore } from './Tree'
import { TopicViewModel } from '../model/TopicViewModel'
import {
addMqttConnectionEvent,
@@ -52,8 +53,6 @@ const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch (dispatch: Dispatch, getState: () => AppSta
}
tree && tree.stopUpdating()
+ // Clear topic filter
+ dispatch({
+ topicFilter: '',
+ type: SettingsActionTypes.SETTINGS_FILTER_TOPICS,
+ })
- dispatch(showTree(undefined))
+ dispatch(resetTreeStore())
dispatch({
type: ActionTypes.CONNECTION_SET_DISCONNECTED,
})
diff --git a/app/src/actions/Sidebar.ts b/app/src/actions/Sidebar.ts
index 2d7b1fe..07c48dd 100644
--- a/app/src/actions/Sidebar.ts
+++ b/app/src/actions/Sidebar.ts
@@ -4,7 +4,7 @@ import { AppState } from '../reducers'
import { makePublishEvent, rendererEvents } from '../../../events'
export const clearRetainedTopic = () => (dispatch: Dispatch, getState: () => AppState) => {
- const { selectedTopic } = getState().tree
+ const selectedTopic = getState().tree.get('selectedTopic')
if (!selectedTopic) {
return
}
diff --git a/app/src/actions/Tree.ts b/app/src/actions/Tree.ts
index 78dbed7..c4f902e 100644
--- a/app/src/actions/Tree.ts
+++ b/app/src/actions/Tree.ts
@@ -13,7 +13,7 @@ export const selectTopic = (topic: q.TreeNode) => (dispatch: Dis
}
const debouncedSelectTopic = debounce((topic: q.TreeNode, dispatch: Dispatch, getState: () => AppState) => {
- const { selectedTopic } = getState().tree
+ const selectedTopic = getState().tree.get('selectedTopic')
if (selectedTopic === topic) {
return
}
@@ -44,8 +44,14 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode, dispat
}
}, 70)
-export const showTree = (tree?: q.Tree) => (dispatch: Dispatch, getState: () => AppState): AnyAction => {
- const visibleTree = getState().tree.tree
+export const resetStore = () => (dispatch: Dispatch): AnyAction => {
+ return dispatch({
+ type: ActionTypes.TREE_RESET_STORE,
+ })
+}
+
+export const showTree = (tree: q.Tree | undefined) => (dispatch: Dispatch, getState: () => AppState): AnyAction => {
+ const visibleTree = getState().tree.get('tree')
const connectionTree = getState().connection.tree
// Stop updates of old tree
@@ -60,8 +66,8 @@ export const showTree = (tree?: q.Tree) => (dispatch: Dispatch) => (dispatch: Dispatch, getState: () => AppState) => {
- const paused = getState().tree.paused
- const tree = getState().tree.tree
+ const paused = getState().tree.get('paused')
+ const tree = getState().tree.get('tree')
const changes = tree ? tree.unmergedChanges().length : 0
if (paused && changes > 0) {
@@ -79,5 +85,4 @@ export const togglePause = (tree?: q.Tree) => (dispatch: Dispatc
dispatch({
type: paused ? ActionTypes.TREE_RESUME_UPDATES : ActionTypes.TREE_PAUSE_UPDATES,
})
-
}
diff --git a/app/src/components/Layout/PauseButton.tsx b/app/src/components/Layout/PauseButton.tsx
index 2464b2a..d9f743a 100644
--- a/app/src/components/Layout/PauseButton.tsx
+++ b/app/src/components/Layout/PauseButton.tsx
@@ -84,8 +84,8 @@ class PauseButton extends React.Component {
const mapStateToProps = (state: AppState) => {
return {
- paused: state.tree.paused,
- tree: state.tree.tree,
+ paused: state.tree.get('paused'),
+ tree: state.tree.get('tree'),
}
}
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index 5ebebf8..f8e2d98 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -185,7 +185,7 @@ class Sidebar extends React.Component {
const mapStateToProps = (state: AppState) => {
return {
- node: state.tree.selectedTopic,
+ node: state.tree.get('selectedTopic'),
}
}
diff --git a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
index 2d90d1d..139d056 100644
--- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -180,7 +180,7 @@ const mapDispatchToProps = (dispatch: any) => {
const mapStateToProps = (state: AppState) => {
return {
valueRendererDisplayMode: state.settings.get('valueRendererDisplayMode'),
- node: state.tree.selectedTopic,
+ node: state.tree.get('selectedTopic'),
}
}
diff --git a/app/src/components/Tree/Tree.tsx b/app/src/components/Tree/Tree.tsx
index 497ae77..191b99d 100644
--- a/app/src/components/Tree/Tree.tsx
+++ b/app/src/components/Tree/Tree.tsx
@@ -123,9 +123,9 @@ class Tree extends React.PureComponent {
const mapStateToProps = (state: AppState) => {
return {
- tree: state.tree.tree,
- paused: state.tree.paused,
- filter: state.tree.filter,
+ tree: state.tree.get('tree'),
+ paused: state.tree.get('paused'),
+ filter: state.tree.get('filter'),
host: state.connection.host,
settings: state.settings,
}
diff --git a/app/src/reducers/Tree.ts b/app/src/reducers/Tree.ts
index ecf5ade..27fe854 100644
--- a/app/src/reducers/Tree.ts
+++ b/app/src/reducers/Tree.ts
@@ -1,22 +1,26 @@
import * as q from '../../../backend/src/Model'
import { Action } from 'redux'
import { createReducer } from './lib'
+import { Record } from 'immutable'
import { TopicViewModel } from '../model/TopicViewModel'
-export interface TreeState {
+interface TreeStateModel {
tree?: q.Tree
selectedTopic?: q.TreeNode
filter?: string
paused: boolean
}
-export type Action = ShowTree | SelectTopic
+export type TreeState = Record
+
+export type Action = ShowTree | SelectTopic | ResetStore
export enum ActionTypes {
TREE_SHOW_TREE = 'TREE_SHOW_TREE',
TREE_SELECT_TOPIC = 'TREE_SELECT_TOPIC',
TREE_RESUME_UPDATES = 'TREE_RESUME_UPDATES',
TREE_PAUSE_UPDATES = 'TREE_PAUSE_UPDATES',
+ TREE_RESET_STORE = 'TREE_RESET_STORE',
}
export interface ShowTree {
@@ -34,35 +38,42 @@ export interface SetPause {
type: ActionTypes.TREE_PAUSE_UPDATES | ActionTypes.TREE_RESUME_UPDATES
}
-const initialState: TreeState = {
+const initialStateFactory = Record({
paused: false,
+ tree: undefined,
+ selectedTopic: undefined,
+ filter: undefined,
+})
+
+const setPaused = (pause: boolean) => (state: TreeState, action: ShowTree): TreeState => {
+ return state.set('paused', pause)
}
-const setPaused = (pause: boolean) => (state: TreeState, action: ShowTree) => {
- return {
- ...state,
- paused: pause,
- }
-}
-
-export const treeReducer = createReducer(initialState, {
+const actions: {[s: string]: (state: TreeState, action: Action) => TreeState} = {
TREE_SHOW_TREE: showTree,
TREE_SELECT_TOPIC: selectTopic,
TREE_PAUSE_UPDATES: setPaused(true),
TREE_RESUME_UPDATES: setPaused(false),
-})
+ TREE_RESET_STORE: resetStore,
+}
-function showTree(state: TreeState, action: ShowTree) {
- return {
- ...state,
+export const treeReducer = createReducer(initialStateFactory(), actions)
+
+function showTree(state: TreeState, action: ShowTree): TreeState {
+ return state.merge({
tree: action.tree,
filter: action.filter,
- }
+ })
}
-function selectTopic(state: TreeState, action: SelectTopic) {
- return {
- ...state,
- selectedTopic: action.selectedTopic,
- }
+function selectTopic(state: TreeState, action: SelectTopic): TreeState {
+ return state.set('selectedTopic', action.selectedTopic)
+}
+
+export interface ResetStore {
+ type: ActionTypes.TREE_RESET_STORE
+}
+
+function resetStore(state: TreeState, action: ResetStore): TreeState {
+ return initialStateFactory()
}