diff --git a/socketTest/index.js b/socketTest/index.js index 18bc0b8..917daeb 100644 --- a/socketTest/index.js +++ b/socketTest/index.js @@ -17,9 +17,9 @@ io.on('connection', function(socket){ console.log(msg) console.log(Object.prototype.toString.apply(msg).slice(8, -1)) }) - socket.on('chat message', function(msg){ - console.log('message: ' + msg); - io.emit('chat message', msg); + socket.on('chat message', function(){ + console.log('message:', ...[].slice.call(arguments)); + io.emit('chat message', ...[].slice.call(arguments)); }); }); diff --git a/src/app/css/components/_column.scss b/src/app/css/components/_column.scss index 92bb51c..248c84a 100644 --- a/src/app/css/components/_column.scss +++ b/src/app/css/components/_column.scss @@ -85,7 +85,6 @@ background-color: #7a54a8; font-size: 18px; display: flex; - // align-items: center; border: none; outline: none; cursor: pointer; @@ -98,6 +97,28 @@ } } +.column-button-row { + margin-bottom: 7px; + .column-button-row-button { + margin-top: 1px; + margin-right: 5px; + min-width: 20px; + height: 20px; + color: white; + background-color: #7a54a8; + font-size: 12px; + border: none; + outline: none; + cursor: pointer; + &.active { + background-color: #a088bd; + } + &:hover { + background-color: #7046a3; + } + } +} + .column-form-button { width: 100%; } diff --git a/src/app/css/components/_messages.scss b/src/app/css/components/_messages.scss index 1f66619..2589a69 100644 --- a/src/app/css/components/_messages.scss +++ b/src/app/css/components/_messages.scss @@ -44,6 +44,10 @@ } .message-preview { + .message-preview-title { + margin-top: 10px; + font-weight: bold; + } .message-text { margin-bottom: 10px; } diff --git a/src/app/js/components/column/messageSender/MessageSenderView.js b/src/app/js/components/column/messageSender/MessageSenderView.js index b93c873..3f88fa3 100644 --- a/src/app/js/components/column/messageSender/MessageSenderView.js +++ b/src/app/js/components/column/messageSender/MessageSenderView.js @@ -18,18 +18,22 @@ class MessageSender extends Component { this.state = { tab: this.getThisTab(props), eventName: '', - message: '', + messageCollection: [''], + messageInEditor: 0, + // message: '', messageIsJson: false, autosuggestResults: [] } - this.handleFormSubmit = this.handleFormSubmit.bind(this) + this.handleMessageSend = this.handleMessageSend.bind(this) this.handleEventNameChange = this.handleEventNameChange.bind(this) this.handleMessageChange = this.handleMessageChange.bind(this) this.handleClearClick = this.handleClearClick.bind(this) this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this) this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this) this.getSuggestionValue = this.getSuggestionValue.bind(this) + this.addMessageArgument = this.addMessageArgument.bind(this) + this.removeMessageArgument = this.removeMessageArgument.bind(this) } componentWillReceiveProps(nextProps) { @@ -60,8 +64,12 @@ class MessageSender extends Component { } handleMessageChange (newValue) { + const state = this.state + const messageCollection = state.messageCollection.slice() + messageCollection[state.messageInEditor] = newValue this.setState({ - message: newValue, + messageCollection, + // message: newValue, messageIsJson: this.jsonOrText(newValue) }) } @@ -88,24 +96,23 @@ class MessageSender extends Component { /** * Saves new message in redux store if name and message are valid */ - handleFormSubmit (e) { - e.preventDefault() - + handleMessageSend () { if ( !this.state.tab.connected ) return - if ( this.state.eventName && this.state.message ) - this.props.sendMessage(this.props.activeTab, this.state.eventName, this.state.message) + if ( this.state.eventName && this.state.messageCollection.length ) + this.props.sendMessage(this.props.activeTab, this.state.eventName, this.state.messageCollection) } /** * Clears message */ - handleClearClick (e) { - e.preventDefault() - + handleClearClick () { + const state = this.state + const messageCollection = state.messageCollection.slice() + messageCollection[state.messageInEditor] = '' this.setState({ - message: '' + messageCollection }) } @@ -151,13 +158,36 @@ class MessageSender extends Component { return true } + addMessageArgument () { + const messageCollection = this.state.messageCollection + this.setState({ + messageCollection: messageCollection.concat(''), + messageInEditor: messageCollection.length + }) + } + + removeMessageArgument () { + const editing = this.state.messageInEditor + const messageCollection = this.state.messageCollection + + if ( messageCollection.length <= 1 ) return // don't remove the last item in the array + + const newMessageCollection = [].concat(messageCollection.slice(0, editing), messageCollection.slice(editing+1)) + const newMessageInEditor = editing - 1 + this.setState({ + messageCollection: newMessageCollection, + messageInEditor: ~newMessageInEditor ? newMessageInEditor : 0 + }) + } + render () { const state = this.state const connected = state.tab.connected + const messageInEditor = state.messageInEditor const autosuggestInputProps = { placeholder: 'Event name', - value: this.state.eventName, + value: state.eventName, onChange: this.handleEventNameChange }; @@ -193,7 +223,30 @@ class MessageSender extends Component { /> - +
+ Message arguments +
+ { + state.messageCollection.map( (m, i) => + + ) + } +
+
+ + +
+
@@ -206,27 +259,27 @@ class MessageSender extends Component {
- + > + Clear + - + onClick={this.handleMessageSend} + > + Send message + diff --git a/src/app/js/components/messages/Message.js b/src/app/js/components/messages/Message.js index 63d4495..bcabf44 100644 --- a/src/app/js/components/messages/Message.js +++ b/src/app/js/components/messages/Message.js @@ -18,11 +18,9 @@ const Message = ({message}) => {message.eventName} {formatDate(message.timestamp)} -
- Type: - {message.isJson ? 'JSON' : message.messageType} -
- + {message.message.map( (message, i) => + + )} export default Message diff --git a/src/app/js/components/messages/MessageView.js b/src/app/js/components/messages/MessageView.js index 866ba33..a14f85d 100644 --- a/src/app/js/components/messages/MessageView.js +++ b/src/app/js/components/messages/MessageView.js @@ -13,13 +13,39 @@ 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' + this.state = { - showRaw: false + showRaw: false, + messageType, + parsed, + isJson } this.toggleRaw = this.toggleRaw.bind(this) } + /** + * Attempts to parse a JSON string and returns the result + * + * @param {String} string JSON string + * + * @return {Object or String} parsed JSON or original string of invalid + */ + formatMessage (string) { + let result + try { + result = JSON.parse(string) + } + catch (error) { + result = string + } + return result + } + toggleRaw (e) { this.setState({ showRaw: !this.state.showRaw @@ -27,10 +53,20 @@ class MessageViewer extends Component { } render () { - const {isJson, parsed: message, message: rawMessage} = this.props.message + const {isJson, parsed, messageType} = this.state + const raw = this.props.message const showRaw = this.state.showRaw return (
+
+
+ Argument  + {this.props.index + 1} +
+
+ Type: + {isJson ? 'JSON' : messageType} +
Message:
) diff --git a/src/app/js/components/messages/MessagesView.js b/src/app/js/components/messages/MessagesView.js index 3ec0fcc..0098a25 100644 --- a/src/app/js/components/messages/MessagesView.js +++ b/src/app/js/components/messages/MessagesView.js @@ -252,24 +252,6 @@ class Messages extends Component { return newVisibleMessages } - /** - * Attempts to parse a JSON string and returns the result - * - * @param {String} string JSON string - * - * @return {Object or String} parsed JSON or original string of invalid - */ - formatMessage (string) { - let result - try { - result = JSON.parse(string) - } - catch (error) { - result = string - } - return result - } - render () { const messages = this.state.visibleMessages return ( @@ -279,18 +261,11 @@ class Messages extends Component { resumeAutoScroll={this.resumeAutoScroll} showMoreMessages={this.showMoreMessages} /> - {messages.map( (message) => { - const messageType = Object.prototype.toString.apply(message.message).slice(8, -1) - message.parsed = this.formatMessage(message.message) - message.isJson = Object.prototype.toString.apply(message.parsed).slice(8, -1) !== 'String' && messageType === 'String' - message.messageType = messageType - return( - - ) - } + {messages.map( message => + )} {this.props.deleteAllMessages(); this.props.deleteAllSentMessages()} } /> diff --git a/src/app/js/socketManager.js b/src/app/js/socketManager.js index ecdf502..e0d4f06 100644 --- a/src/app/js/socketManager.js +++ b/src/app/js/socketManager.js @@ -123,10 +123,10 @@ function listenForChanges () { * * @param {String} id unique socket id * @param {String} eventName name of the event the message was received on - * @param {Mixed} message received message + * @param {Mixed} message received messagem can be multiple arguments */ -function messageHandler (id, eventName, message) { - store.dispatch({type: 'ADD_MESSAGE', id, eventName, message}) +function messageHandler (id, eventName/*, message arguments*/) { + store.dispatch({type: 'ADD_MESSAGE', id, eventName, message: [].slice.call(arguments, 2)}) } /** @@ -198,7 +198,7 @@ function subscribeSendMessageListener () { const socket = connection.socket - socket.emit(newMessage.eventName, newMessage.message) + socket.emit(newMessage.eventName, ...newMessage.message) } }) }