show correct type and content of sent messages

Author: JoJordens

package-lock.json

@@ -12,10 +12,11 @@
   },
   "devDependencies": {
     "asar": "^0.13.0",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-preset-react": "^6.24.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-react": "^6.24.1",
     "babelify": "^8.0.0",
     "browser-sync": "^2.18.5",
     "browserify": "^16.1.0",

package.json

@@ -4,7 +4,7 @@
  * Message editor
  */
 
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import Autosuggest from 'react-autosuggest'
 import Editor from './Editor'
 
@@ -264,7 +264,7 @@ class MessageSender extends Component {
     noMessageArgument () {
         this.setState({
             messageCollection: [],
-            messageInEditor: 0
+            messageInEditor: -1
         })
     }
 
@@ -281,7 +281,7 @@ class MessageSender extends Component {
         };
 
         let sendIsEnabled = true
-        if ( !connected || !state.eventName || !state.messageCollection.map( m => m.isValid ).reduce( (a, b) => a && b) )
+        if (  !connected || !state.eventName || ( ~messageInEditor && !state.messageCollection.map( m => m.isValid ).reduce( (a, b) => a && b) ) )
             sendIsEnabled = false
 
         return (
@@ -349,27 +349,32 @@ class MessageSender extends Component {
                         </div>
                     </div>
 
-                    <div className="column-string">
-                        <span>
-                            <select value={messageInEditorObject.type} onChange={this.changeType}>
-                                <option value="String">String</option>
-                                <option value="JSON">JSON</option>
-                                <option value="Array">Array</option>
-                                <option value="Object">Object</option>
-                                <option value="Number">Number</option>
-                                <option value="Boolean">Boolean</option>
-                            </select>
-                        </span>
-                    </div>
-
-                    <button
-                        className="column-button"
-                        onClick={this.handleClearClick}
-                    >
-                        Clear
-                    </button>
+                    { ~messageInEditor ?
+                        <Fragment>
+                            <div className="column-string">
+                                <span>
+                                    <select value={messageInEditorObject.type} onChange={this.changeType}>
+                                        <option value="String">String</option>
+                                        <option value="JSON">JSON</option>
+                                        <option value="Array">Array</option>
+                                        <option value="Object">Object</option>
+                                        <option value="Number">Number</option>
+                                        <option value="Boolean">Boolean</option>
+                                    </select>
+                                </span>
+                            </div>
 
-                    <Editor message={messageInEditorObject} handleMessageChange={this.handleMessageChange} />
+                            <button
+                                className="column-button"
+                                onClick={this.handleClearClick}
+                            >
+                                Clear
+                            </button>
+
+                            <Editor message={messageInEditorObject} handleMessageChange={this.handleMessageChange} />
+                        </Fragment>
+                        : null
+                    }
 
                     <button
                         className="column-button"

src/app/js/components/column/messageSender/MessageSenderView.js

@@ -18,8 +18,8 @@ const Message = ({message}) =>
             <span className="message-text-content">{message.eventName}</span>
             <span className="message-text-date">{formatDate(message.timestamp)}</span>
         </div>
-        {message.message.map( (message, i) =>
-            <MessageView key={i} index={i} message={message} />
+        {message.message.map( (messageContent, i) =>
+            <MessageView key={i} index={i} message={messageContent} isSentMessage={!!message.right} />
         )}
     </div>
 

src/app/js/components/messages/Message.js

@@ -13,16 +13,24 @@ class MessageViewer extends Component {
     constructor (props) {
         super(props)
 
-        const message = props.message
-        const messageType = Object.prototype.toString.apply(message).slice(8, -1)
-        const parsed = this.formatMessage(message)
-        const isJson = Object.prototype.toString.apply(parsed).slice(8, -1) !== 'String' && messageType === 'String'
+        const state = {}
+
+        if ( props.isSentMessage ) {
+            state.messageType = props.message.type
+            state.parsed = this.parseMessage(props.message.value, props.message.type)
+            state.isJson = state.messageType === 'JSON'
+            state.raw = props.message.value
+        } else {
+            const message = props.message
+            state.messageType = Object.prototype.toString.apply(message).slice(8, -1)
+            state.parsed = this.tryToParseJSONMessage(message)
+            state.isJson = Object.prototype.toString.apply(state.parsed).slice(8, -1) !== 'String' && state.messageType === 'String'
+            state.raw = props.message
+        }
 
         this.state = {
             showRaw: false,
-            messageType,
-            parsed,
-            isJson
+            ...state
         }
 
         this.toggleRaw = this.toggleRaw.bind(this)
@@ -35,7 +43,7 @@ class MessageViewer extends Component {
      * 
      * @return {Object or String} parsed JSON or original string of invalid
      */
-    formatMessage (string) {
+    tryToParseJSONMessage (string) {
         let result
         try {
             result = JSON.parse(string)
@@ -46,15 +54,40 @@ class MessageViewer extends Component {
         return result
     }
 
+    parseMessage (string, type) {
+        console.log('parse', string, type)
+        switch ( type ) {
+            case 'String':
+            return string
+
+            case 'Array':
+            case 'Object':
+            let result
+            eval(`result = ${string}`)
+            return result
+
+            case 'Number':
+            return ~~string
+
+            case 'JSON':
+            return this.tryToParseJSONMessage(string)
+
+            case 'Boolean':
+            return string === 'true'
+
+            default:
+            return string
+        }
+    }
+
     toggleRaw (e) {
         this.setState({
             showRaw: !this.state.showRaw
         })
     }
 
     render () {
-        const {isJson, parsed, messageType} = this.state
-        const raw = this.props.message
+        const {isJson, parsed, messageType, raw} = this.state
         const showRaw = this.state.showRaw
         return (
             <div className="message-preview">