Reset store after disconnect

This commit is contained in:
Thomas Nordquist
2019-04-15 14:14:43 +02:00
parent 6d6b35d5f8
commit 47d1e74852
9 changed files with 63 additions and 39 deletions

View File

@@ -2,6 +2,10 @@
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>MQTT Explorer</title>
<script src="./bugtracking.bundle.js"></script>

View File

@@ -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<a
state = undefined
}
console.log(state)
dispatch({
type: ActionTypes.CONNECTION_SET_HEALTH,
health: state,
@@ -79,8 +78,13 @@ export const disconnect = () => (dispatch: Dispatch<any>, 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,
})

View File

@@ -4,7 +4,7 @@ import { AppState } from '../reducers'
import { makePublishEvent, rendererEvents } from '../../../events'
export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
const { selectedTopic } = getState().tree
const selectedTopic = getState().tree.get('selectedTopic')
if (!selectedTopic) {
return
}

View File

@@ -13,7 +13,7 @@ export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dis
}
const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, 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<TopicViewModel>, dispat
}
}, 70)
export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
const visibleTree = getState().tree.tree
export const resetStore = () => (dispatch: Dispatch<any>): AnyAction => {
return dispatch({
type: ActionTypes.TREE_RESET_STORE,
})
}
export const showTree = (tree: q.Tree<TopicViewModel> | undefined) => (dispatch: Dispatch<any>, 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<TopicViewModel>) => (dispatch: Dispatch<a
}
export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, 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<TopicViewModel>) => (dispatch: Dispatc
dispatch({
type: paused ? ActionTypes.TREE_RESUME_UPDATES : ActionTypes.TREE_PAUSE_UPDATES,
})
}

View File

@@ -84,8 +84,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {
const mapStateToProps = (state: AppState) => {
return {
paused: state.tree.paused,
tree: state.tree.tree,
paused: state.tree.get('paused'),
tree: state.tree.get('tree'),
}
}

View File

@@ -185,7 +185,7 @@ class Sidebar extends React.Component<Props, State> {
const mapStateToProps = (state: AppState) => {
return {
node: state.tree.selectedTopic,
node: state.tree.get('selectedTopic'),
}
}

View File

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

View File

@@ -123,9 +123,9 @@ class Tree extends React.PureComponent<Props, State> {
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,
}

View File

@@ -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<TopicViewModel>
selectedTopic?: q.TreeNode<TopicViewModel>
filter?: string
paused: boolean
}
export type Action = ShowTree | SelectTopic
export type TreeState = Record<TreeStateModel>
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<TreeStateModel>({
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()
}