Refactor

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}>