From 47d1e748525b257d012b90ed5a9ac28b9f78e9e2 Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Mon, 15 Apr 2019 14:14:43 +0200 Subject: [PATCH] Reset store after disconnect --- app/index.html | 4 ++ app/src/actions/Connection.ts | 12 +++-- app/src/actions/Sidebar.ts | 2 +- app/src/actions/Tree.ts | 17 +++--- app/src/components/Layout/PauseButton.tsx | 4 +- app/src/components/Sidebar/Sidebar.tsx | 2 +- .../Sidebar/ValueRenderer/ValuePanel.tsx | 2 +- app/src/components/Tree/Tree.tsx | 6 +-- app/src/reducers/Tree.ts | 53 +++++++++++-------- 9 files changed, 63 insertions(+), 39 deletions(-) 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() }