Deselect message history message when topic selection changes

Fixes #93

app/src/actions/Sidebar.ts

@@ -1,6 +1,7 @@
 import * as q from '../../../backend/src/Model'
-import { Dispatch } from 'redux'
+import { ActionTypes } from '../reducers/Sidebar'
 import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
 import { makePublishEvent, rendererEvents } from '../../../events'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -12,6 +13,13 @@ export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () =
   dispatch(clearTopic(selectedTopic, false))
 }
 
+export const setCompareMessage = (message?: q.Message) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    message,
+    type: ActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
+  })
+}
+
 export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { connectionId } = getState().connection
   if (!connectionId) {
@@ -25,7 +33,6 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicC
     retain: true,
     qos: 0 as 0,
   }
-  console.log('deleting', topic.path())
   rendererEvents.emit(publishEvent, mqttMessage)
 
   if (recursive) {

app/src/actions/Tree.ts

@@ -1,5 +1,6 @@
 import * as q from '../../../backend/src/Model'
 import { ActionTypes } from '../reducers/Tree'
+import { ActionTypes as SidebarActionTypes } from '../reducers/Sidebar'
 import { AnyAction, Dispatch } from 'redux'
 import { AppState } from '../reducers'
 import { batchActions } from 'redux-batched-actions'
@@ -40,6 +41,11 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispat
     type: ActionTypes.TREE_SELECT_TOPIC,
   }
 
+  dispatch({
+    type: SidebarActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
+    message: undefined,
+  })
+
   if (setTopicDispatch) {
     dispatch(batchActions([selectTreeTopicDispatch, setTopicDispatch]))
   } else {

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -36,12 +36,11 @@ interface Props {
   settingsActions: typeof settingsActions
   classes: any
   lastUpdate: number
-}
-
-interface State {
   compareMessage?: q.Message
 }
 
+interface State {}
+
 class ValuePanel extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
@@ -58,7 +57,7 @@ class ValuePanel extends React.Component<Props, State> {
       <ValueRenderer
         message={node.message}
         messageHistory={node.messageHistory}
-        compareWith={this.state.compareMessage}
+        compareWith={this.props.compareMessage}
       />
     )
   }
@@ -138,10 +137,10 @@ class ValuePanel extends React.Component<Props, State> {
   }
 
   private handleMessageHistorySelect = (message: q.Message) => {
-    if (message !== this.state.compareMessage) {
-      this.setState({ compareMessage: message })
+    if (message !== this.props.compareMessage) {
+      this.props.sidebarActions.setCompareMessage(message)
     } else {
-      this.setState({ compareMessage: undefined })
+      this.props.sidebarActions.setCompareMessage(undefined)
     }
   }
 
@@ -163,7 +162,7 @@ class ValuePanel extends React.Component<Props, State> {
               {this.renderValue()}
             </React.Suspense>
           </div>
-          <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
+          <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.props.compareMessage} node={this.props.node} /></div>
         </ExpansionPanelDetails>
       </ExpansionPanel>
     )
@@ -181,6 +180,7 @@ const mapStateToProps = (state: AppState) => {
   return {
     valueRendererDisplayMode: state.settings.get('valueRendererDisplayMode'),
     node: state.tree.get('selectedTopic'),
+    compareMessage: state.sidebar.get('compareMessage'),
   }
 }
 

app/src/reducers/Sidebar.ts

@@ -0,0 +1,44 @@
+import * as q from '../../../backend/src/Model'
+import { Action } from 'redux'
+import { createReducer } from './lib'
+import { Record } from 'immutable'
+
+interface SidebarModel {
+  compareMessage?: q.Message
+}
+
+const initialStateFactory = Record<SidebarModel>({
+  compareMessage: undefined,
+})
+
+export type Action = SetCompareMessage
+export enum ActionTypes {
+  SIDEBAR_SET_COMPARE_MESSAGE = 'SIDEBAR_SET_COMPARE_MESSAGE',
+  SIDEBAR_RESET_STORE = 'SIDEBAR_RESET_STORE',
+}
+
+export type SidebarState = Record<SidebarModel>
+
+const actions: {[s: string]: (state: SidebarState, action: Action) => SidebarState} = {
+  SIDEBAR_SET_COMPARE_MESSAGE: setCompareMessage,
+  SIDEBAR_RESET_STORE: resetStore,
+}
+
+export const sidebarReducer = createReducer(initialStateFactory(), actions)
+
+export interface SetCompareMessage {
+  type: ActionTypes.SIDEBAR_SET_COMPARE_MESSAGE
+  message?: q.Message
+}
+
+function setCompareMessage(state: SidebarState, action: SetCompareMessage): SidebarState {
+  return state.set('compareMessage', action.message)
+}
+
+export interface ResetStore {
+  type: ActionTypes.SIDEBAR_RESET_STORE
+}
+
+function resetStore(): SidebarState {
+  return initialStateFactory()
+}

app/src/reducers/index.ts

@@ -5,6 +5,7 @@ import { GlobalState, globalState } from './Global'
 import { publishReducer, PublishState } from './Publish'
 import { Record } from 'immutable'
 import { settingsReducer, SettingsState } from './Settings'
+import { sidebarReducer, SidebarState } from './Sidebar'
 import { treeReducer, TreeState } from './Tree'
 
 export interface AppState {
@@ -12,6 +13,7 @@ export interface AppState {
   tree: TreeState
   settings: Record<SettingsState>,
   publish: PublishState
+  sidebar: SidebarState,
   connection: ConnectionState
   connectionManager: ConnectionManagerState
 }
@@ -19,6 +21,7 @@ export interface AppState {
 export default combineReducers({
   globalState,
   publish: publishReducer,
+  sidebar: sidebarReducer,
   connection: connectionReducer,
   settings: settingsReducer,
   tree: treeReducer,