Refactor

app/src/actions/Settings.ts

@@ -1,19 +1,19 @@
-import { ActionTypes, NodeOrder } from '../reducers'
+import { ActionTypes, NodeOrder, CustomAction } from '../reducers'
 
-export const setAutoExpandLimit = (autoExpandLimit: number = 0) => {
+export const setAutoExpandLimit = (autoExpandLimit: number = 0): CustomAction => {
   return {
     autoExpandLimit,
     type: ActionTypes.setAutoExpandLimit,
   }
 }
 
-export const toggleSettingsVisibility = () => {
+export const toggleSettingsVisibility = (): CustomAction => {
   return {
     type: ActionTypes.toggleSettingsVisibility,
   }
 }
 
-export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none) => {
+export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none): CustomAction => {
   return {
     nodeOrder,
     type: ActionTypes.setNodeOrder,

app/src/actions/Sidebar.ts

@@ -0,0 +1,15 @@
+import { ActionTypes, CustomAction } from '../reducers'
+
+export const setPublishTopic = (topic: string): CustomAction  => {
+  return {
+    publishTopic: topic,
+    type: ActionTypes.setPublishTopic,
+  }
+}
+
+export const setPublishPayload = (payload: string): CustomAction => {
+  return {
+    publishPayload: payload,
+    type: ActionTypes.setPublishPayload,
+  }
+}

app/src/actions/Tree.ts

@@ -1,7 +1,7 @@
-import { ActionTypes } from '../reducers'
+import { ActionTypes, CustomAction } from '../reducers'
 import * as q from '../../../backend/src/Model'
 
-export const selectTopic = (topic: q.TreeNode) => {
+export const selectTopic = (topic: q.TreeNode): CustomAction => {
   return {
     selectedTopic: topic,
     type: ActionTypes.selectTopic,

app/src/actions/index.ts

@@ -1,4 +1,5 @@
 import * as settingsActions from './Settings'
 import * as treeActions from './Tree'
+import * as sidebarActions from './Sidebar'
 
-export { settingsActions, treeActions }
+export { settingsActions, treeActions, sidebarActions }

app/src/components/Settings.tsx

@@ -66,11 +66,9 @@ class Settings extends React.Component<Props, {}> {
           className={classes.paper}
           tabIndex={0}
           role="button"
-          onClick={(e: React.MouseEvent) => e.stopPropagation()}
-          onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
         >
 
-          <Typography className={ classes.title } variant="h6" color="inherit">
+          <Typography className={classes.title} variant="h6" color="inherit">
             <IconButton onClick={actions.toggleSettingsVisibility}>
               <ChevronRight />
             </IconButton>
@@ -93,7 +91,7 @@ class Settings extends React.Component<Props, {}> {
         <InputLabel htmlFor="auto-expand">Auto Expand</InputLabel>
         <Select
             value={autoExpandLimit}
-            onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => actions.setAutoExpandLimit(e.target.value) }
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => actions.setAutoExpandLimit(e.target.value)}
             input={<Input name="auto-expand" id="auto-expand-label-placeholder" />}
             displayEmpty={true}
             name="auto-expand"
@@ -110,16 +108,14 @@ class Settings extends React.Component<Props, {}> {
   }
 
   private renderNodeOrder() {
-    const { classes, actions, nodeOrder } = this.props
+    const { classes, nodeOrder } = this.props
 
     return (
       <div style={{ padding: '8px' }}>
       <InputLabel htmlFor="auto-expand">Topic order</InputLabel>
       <Select
           value={nodeOrder}
-          onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => {
-            actions.setNodeOrder(e.target.value)
-          }}
+          onChange={this.onChangeSorting}
           input={<Input name="node-order" id="node-order-label-placeholder" />}
           displayEmpty={true}
           name="node-order"
@@ -132,6 +128,10 @@ class Settings extends React.Component<Props, {}> {
       </Select>
     </div>)
   }
+
+  private onChangeSorting = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    this.props.actions.setNodeOrder(e.target.value)
+  }
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/Sidebar/Publish/HistoryEntry.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { sidebarActions } from '../../../actions'
+import { Typography } from '@material-ui/core'
+import Message from './Model/Message'
+
+interface Props {
+  message: Message
+  actions: any
+}
+
+class HystoryEntry extends React.Component<Props, {}> {
+  public render() {
+    const { message } = this.props
+    return (
+      <Typography onClick={this.setPublishPreset}>
+        <div style={{ width: '100%', cursor: 'pointer', marginTop: '8px' }}>
+          <div><b>{message.topic}</b></div>
+          <div><i>{message.payload}</i></div>
+        </div>
+      </Typography>
+    )
+  }
+
+  private setPublishPreset = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    this.props.actions.setPublishTopic(this.props.message.topic)
+    this.props.actions.setPublishPayload(this.props.message.payload)
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(sidebarActions, dispatch),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(HystoryEntry)

app/src/components/Sidebar/Publish/Model/Message.ts

@@ -0,0 +1,7 @@
+interface Message {
+  topic: string
+  payload?: string
+  sent: Date
+}
+
+export default Message

app/src/components/Sidebar/Publish/Publish.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-import { makePublishEvent, rendererEvents } from '../../../../events'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as q from '../../../../../backend/src/Model'
+import { AppState } from '../../../reducers'
+import { rendererEvents, makePublishEvent } from '../../../../../events'
+import { sidebarActions } from '../../../actions'
 import Navigation from '@material-ui/icons/Navigation'
 import {
   Button, Fab, InputAdornment, FormControlLabel, Radio,
   RadioGroup, TextField, Typography,
 } from '@material-ui/core'
+import Message from './Model/Message'
+import HistoryEntry from './HistoryEntry'
 
 import * as brace from 'brace'
 import { default as AceEditor } from 'react-ace'
@@ -19,17 +25,12 @@ import 'brace/theme/monokai'
 interface Props {
   node?: q.TreeNode
   connectionId?: string
-}
-
-interface Message {
-  topic: string
+  topic?: string
   payload?: string
-  sent: Date
+  actions: any
 }
 
 interface State {
-  customTopic?: string
-  payload?: string
   mode: string
   history: Message[]
 }
@@ -41,11 +42,12 @@ class Publisher extends React.Component<Props, State> {
   }
 
   private updatePayload = (value: string, event?: any) => {
-    this.setState({ payload: value })
+    this.props.actions.setPublishPayload(value)
   }
 
   private updateTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ customTopic: e.target.value })
+    console.log(e.target.value)
+    this.props.actions.setPublishTopic(e.target.value)
   }
 
   private updateMode = (e: React.ChangeEvent<{}>, value: string) => {
@@ -55,7 +57,7 @@ class Publisher extends React.Component<Props, State> {
   private publish = (e: React.MouseEvent) => {
     e.stopPropagation()
     const topic = this.currentTopic() || ''
-    const payload = this.state.payload
+    const payload = this.props.payload
 
     if (this.props.connectionId && topic) {
       rendererEvents.emit(makePublishEvent(this.props.connectionId), { topic, payload })
@@ -82,8 +84,10 @@ class Publisher extends React.Component<Props, State> {
   }
 
   private currentTopic(): string | undefined {
-    const { node } = this.props
-    return (this.state.customTopic !== undefined) ? this.state.customTopic : (node ? node.path() : undefined)
+    const { node, topic } = this.props
+    const selectedNodePath = (node ? node.path() : undefined)
+
+    return (topic !== undefined) ? topic : selectedNodePath
   }
 
   private topic() {
@@ -107,7 +111,7 @@ class Publisher extends React.Component<Props, State> {
 
   private onTopicBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     if (!e.target.value) {
-      this.setState({ customTopic: undefined })
+      this.props.actions.setPublishTopic(undefined)
     }
   }
 
@@ -173,21 +177,9 @@ class Publisher extends React.Component<Props, State> {
     )
   }
 
-  private loadHistoryEntry(entry: Message) {
-    this.setState({
-      customTopic: entry.topic,
-      payload: entry.payload,
-    })
-  }
-
   private history() {
     const entries = this.state.history.map(message => (
-      <Typography onClick={() => this.loadHistoryEntry(message)}>
-        <div style={{ width: '100%', cursor: 'pointer', marginTop: '8px' }}>
-          <div><b>{message.topic}</b></div>
-          <div><i>{message.payload}</i></div>
-        </div>
-      </Typography>
+      <HistoryEntry message={message} />
     ))
 
     return (
@@ -209,7 +201,7 @@ class Publisher extends React.Component<Props, State> {
           width="100%"
           height="200px"
           showGutter={true}
-          value={this.state.payload}
+          value={this.props.payload}
           onChange={this.updatePayload}
           setOptions={this.editorOptions}
           editorProps={{ $blockScrolling: true }}
@@ -219,4 +211,17 @@ class Publisher extends React.Component<Props, State> {
   }
 }
 
-export default Publisher
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(sidebarActions, dispatch),
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    topic: state.sidebar.publishTopic,
+    payload: state.sidebar.publishPayload,
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Publisher)

app/src/components/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import * as q from '../../../../backend/src/Model'
 import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import ExpandMore from '@material-ui/icons/ExpandMore'
-import Publisher from './Publisher'
+import Publish from './Publish/Publish'
 
 import Copy from '../Copy'
 import ValueRenderer from './ValueRenderer'
@@ -104,7 +104,7 @@ class Sidebar extends React.Component<Props, State> {
             <Typography className={classes.heading}>Publish</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={detailsStyle}>
-            <Publisher node={this.props.node} connectionId={this.props.connectionId} />
+            <Publish node={this.props.node} connectionId={this.props.connectionId} />
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>

app/src/index.tsx

@@ -3,19 +3,17 @@ import * as ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-
-import reducers, { NodeOrder } from './reducers'
+import reducers, { NodeOrder, AppState } from './reducers'
 import App from './App'
 
-declare var document: any
-
-const initialAppState = {
+const initialAppState: AppState = {
   settings: {
     autoExpandLimit: 0,
     nodeOrder: NodeOrder.none,
     visible: false,
   },
-  selectedNode: undefined,
+  sidebar: {},
+  selectedTopic: undefined,
 }
 const store = createStore(reducers, initialAppState)
 

app/src/reducers/index.ts

@@ -6,18 +6,28 @@ export enum ActionTypes {
   toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY',
   setNodeOrder = 'SET_NODE_ORDER',
   selectTopic = 'SELECT_TOPIC',
+  setPublishTopic = 'SET_PUBLISH_TOPIC',
+  setPublishPayload = 'SET_PUBLISH_PAYLOAD',
 }
 
-interface CustomAction extends Action {
+export interface CustomAction extends Action {
   type: ActionTypes,
   autoExpandLimit?: number
   nodeOrder?: NodeOrder
   selectedTopic?: q.TreeNode
+  publishTopic?: string
+  publishPayload?: string
+}
+
+export interface SidebarState {
+  publishTopic?: string
+  publishPayload?: string
 }
 
 export interface AppState {
   settings: SettingsState,
   selectedTopic?: q.TreeNode
+  sidebar: SidebarState
 }
 
 export interface SettingsState {
@@ -47,18 +57,27 @@ const reducer: Reducer<AppState | undefined, CustomAction> = (state, action) =>
       return {
         ...state,
         settings: {
-          visible: state.settings.visible,
+          ...state.settings,
           autoExpandLimit: action.autoExpandLimit,
-          nodeOrder: state.settings.nodeOrder,
         },
       }
+    case ActionTypes.setPublishTopic:
+      console.log(state)
+      return {
+        ...state,
+        sidebar: { ...state.sidebar, publishTopic: action.publishTopic },
+      }
+    case ActionTypes.setPublishPayload:
+      return {
+        ...state,
+        sidebar: { ...state.sidebar, publishPayload: action.publishPayload },
+      }
     case ActionTypes.toggleSettingsVisibility:
       return {
         ...state,
         settings: {
+          ...state.settings,
           visible: !state.settings.visible,
-          autoExpandLimit: state.settings.autoExpandLimit,
-          nodeOrder: state.settings.nodeOrder,
         },
       }
     case ActionTypes.selectTopic:
@@ -67,7 +86,6 @@ const reducer: Reducer<AppState | undefined, CustomAction> = (state, action) =>
       }
       return {
         ...state,
-        settings: state.settings,
         selectedTopic: action.selectedTopic,
       }
     case ActionTypes.setNodeOrder:
@@ -76,11 +94,7 @@ const reducer: Reducer<AppState | undefined, CustomAction> = (state, action) =>
       }
       return {
         ...state,
-        settings: {
-          visible: state.settings.visible,
-          autoExpandLimit: state.settings.autoExpandLimit,
-          nodeOrder: action.nodeOrder,
-        },
+        settings: { ...state.settings, autoExpandLimit: state.settings.autoExpandLimit },
       }
     default:
       return state