Remove "empty payload" toggle switch

This function is redundat, simply send an empty message wil suffice

app/src/actions/Publish.ts

@@ -17,12 +17,6 @@ export const setPayload = (payload?: string): Action => {
   }
 }
 
-export const toggleEmptyPayload = (): Action => {
-  return {
-    type: ActionTypes.PUBLISH_TOGGLE_EMPTY_PAYLOAD,
-  }
-}
-
 export const setQoS = (qos: 0 | 1 | 2): Action => {
   return {
     qos,
@@ -48,7 +42,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
   const publishEvent = makePublishEvent(connectionId)
   const mqttMessage = {
     topic,
-    payload: state.publish.emptyPayload ? null : state.publish.payload,
+    payload: state.publish.payload,
     retain: state.publish.retain,
     qos: state.publish.qos,
   }

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

@@ -39,7 +39,6 @@ interface Props {
   topic?: string
   payload?: string
   actions: typeof publishActions
-  emptyPayload: boolean
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
@@ -164,9 +163,6 @@ class Publish extends React.Component<Props, State> {
   }
 
   private renderEditorModeSelection() {
-    if (this.props.emptyPayload) {
-      return null
-    }
     const labelStyle = { margin: '0 8px 0 8px' }
     return (
       <RadioGroup
@@ -234,20 +230,13 @@ class Publish extends React.Component<Props, State> {
     )
     return (
       <div style={{ marginTop: '8px', clear: 'both' }}>
-        <div style={{ width: '100%' }}>
+        <div style={{ width: '100%', textAlign: 'right' }}>
           <FormControlLabel
             style={labelStyle}
             control={qosSelect}
             label="QoS"
             labelPlacement="start"
           />
-          <FormControlLabel
-            value="empty"
-            style={labelStyle}
-            control={<Checkbox color="primary" checked={this.props.emptyPayload} onChange={this.props.actions.toggleEmptyPayload} />}
-            label="no message"
-            labelPlacement="end"
-          />
           <FormControlLabel
             value="retain"
             style={labelStyle}
@@ -286,10 +275,6 @@ class Publish extends React.Component<Props, State> {
   }
 
   private renderEditor() {
-    if (this.props.emptyPayload) {
-      return null
-    }
-
     return (
       <AceEditor
         mode={this.props.editorMode}
@@ -317,7 +302,6 @@ const mapStateToProps = (state: AppState) => {
   return {
     topic: state.publish.topic,
     payload: state.publish.payload,
-    emptyPayload: state.publish.emptyPayload,
     editorMode: state.publish.editorMode,
     retain: state.publish.retain,
     qos: state.publish.qos,

app/src/components/Tree/TreeNodeTitle.tsx

@@ -67,7 +67,8 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       marginLeft: '5px',
       display: 'inline-block',
     }
-    return this.props.treeNode.message
+
+    return this.props.treeNode.message && this.props.treeNode.message.length > 0
       ? <span style={style}> = {this.props.treeNode.message.value.toString()}</span>
       : null
   }

app/src/reducers/Publish.ts

@@ -4,18 +4,16 @@ import { createReducer } from './lib'
 export interface PublishState {
   topic?: string
   payload?: string
-  emptyPayload: boolean
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
 }
 
-export type Action = SetPayload | SetTopic | ToggleEmptyPayload | ToggleRetain | SetEditorMode | SetQoS
+export type Action = SetPayload | SetTopic | ToggleRetain | SetEditorMode | SetQoS
 
 export enum ActionTypes {
   PUBLISH_SET_TOPIC = 'PUBLISH_SET_TOPIC',
   PUBLISH_SET_PAYLOAD = 'PUBLISH_SET_PAYLOAD',
-  PUBLISH_TOGGLE_EMPTY_PAYLOAD = 'PUBLISH_TOGGLE_EMPTY_PAYLOAD',
   PUBLISH_TOGGLE_RETAIN = 'PUBLISH_TOGGLE_RETAIN',
   PUBLISH_SET_EDITOR_MODE = 'PUBLISH_SET_EDITOR_MODE',
   PUBLISH_SET_QOS = 'PUBLISH_SET_QOS',
@@ -36,10 +34,6 @@ export interface SetQoS {
   qos: 0 | 1 | 2
 }
 
-export interface ToggleEmptyPayload {
-  type: ActionTypes.PUBLISH_TOGGLE_EMPTY_PAYLOAD
-}
-
 export interface SetEditorMode {
   type: ActionTypes.PUBLISH_SET_EDITOR_MODE
   editorMode: string
@@ -51,7 +45,6 @@ export interface ToggleRetain {
 
 const initialState: PublishState = {
   editorMode: 'text',
-  emptyPayload: false,
   retain: false,
   qos: 0,
 }
@@ -59,7 +52,6 @@ const initialState: PublishState = {
 export const publishReducer = createReducer(initialState, {
   PUBLISH_SET_TOPIC: setTopic,
   PUBLISH_SET_PAYLOAD: setPayload,
-  PUBLISH_TOGGLE_EMPTY_PAYLOAD: toggleEmptyPayload,
   PUBLISH_TOGGLE_RETAIN: toggleRetain,
   PUBLISH_SET_EDITOR_MODE: setEditorMode,
   PUBLISH_SET_QOS: setQoS,
@@ -93,13 +85,6 @@ function setEditorMode(state: PublishState, action: SetEditorMode) {
   }
 }
 
-function toggleEmptyPayload(state: PublishState) {
-  return {
-    ...state,
-    emptyPayload: !state.emptyPayload,
-  }
-}
-
 function toggleRetain(state: PublishState) {
   return {
     ...state,