Skip to content
This repository has been archived by the owner on May 5, 2020. It is now read-only.

Commit

Permalink
added support for multiple message arguments #12
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoJordens
JoJordens committed May 10, 2017
1 parent a48c9f2 commit 85b2c58
Show file tree
Hide file tree
Showing 8 changed files with 157 additions and 70 deletions.
6 changes: 3 additions & 3 deletions socketTest/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
});
});

Expand Down
23 changes: 22 additions & 1 deletion src/app/css/components/_column.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@
background-color: #7a54a8;
font-size: 18px;
display: flex;
// align-items: center;
border: none;
outline: none;
cursor: pointer;
Expand All @@ -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%;
}
Expand Down
4 changes: 4 additions & 0 deletions src/app/css/components/_messages.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@
}

.message-preview {
.message-preview-title {
margin-top: 10px;
font-weight: bold;
}
.message-text {
margin-bottom: 10px;
}
Expand Down
101 changes: 77 additions & 24 deletions src/app/js/components/column/messageSender/MessageSenderView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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)
})
}
Expand All @@ -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
})
}

Expand Down Expand Up @@ -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
};

Expand Down Expand Up @@ -193,7 +223,30 @@ class MessageSender extends Component {
/>
</div>


<div>
<span>Message arguments</span>
<div className="column-button-row">
{
state.messageCollection.map( (m, i) =>
<button key={i} className={`column-button-row-button ${ messageInEditor === i ? 'active' : '' }`} onClick={() => this.setState({messageInEditor: i})}>{i+1}</button>
)
}
</div>
<div className="column-button-row">
<button
onClick={this.addMessageArgument}
className="column-button-row-button"
>
Add
</button>
<button
onClick={this.removeMessageArgument}
className="column-button-row-button"
>
Remove
</button>
</div>
</div>

<div className="column-string">
<span>
Expand All @@ -206,27 +259,27 @@ class MessageSender extends Component {
</span>
</div>

<input
type="button"
value="Clear"
<button
className="column-button"
onClick={this.handleClearClick}
/>
>
Clear
</button>

<CodeMirror
className="column-editor"
value={this.state.message}
value={state.messageCollection[state.messageInEditor]}
onChange={this.handleMessageChange}
options={{mode: {name: 'javascript', json: true}}}
/>

<input
type="submit"
<button
className="column-button"
disabled={!connected}
value="Send message"
onClick={this.handleFormSubmit}
/>
onClick={this.handleMessageSend}
>
Send message
</button>
</div>

</div>
Expand Down
8 changes: 3 additions & 5 deletions src/app/js/components/messages/Message.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,9 @@ const Message = ({message}) =>
<span className="message-text-content">{message.eventName}</span>
<span className="message-text-date">{formatDate(message.timestamp)}</span>
</div>
<div className="message-text">
<span className="message-text-title">Type:</span>
<span className="message-text-content">{message.isJson ? 'JSON' : message.messageType}</span>
</div>
<MessageView message={message} />
{message.message.map( (message, i) =>
<MessageView key={i} index={i} message={message} />
)}
</div>

export default Message
Expand Down
42 changes: 39 additions & 3 deletions src/app/js/components/messages/MessageView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,60 @@ 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
})
}

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 (
<div className="message-preview">
<hr />
<div className="message-preview-title">
<span>Argument&nbsp;</span>
<span>{this.props.index + 1}</span>
</div>
<div className="message-text">
<span className="message-text-title">Type:</span>
<span className="message-text-content">{isJson ? 'JSON' : messageType}</span>
</div>
<div className="message-text">
<span className="message-text-title">Message:</span>
<button
Expand All @@ -41,7 +77,7 @@ class MessageViewer extends Component {
</button>
</div>
<ObjectInspector
data={showRaw ? rawMessage : message}
data={showRaw ? raw : parsed}
/>
</div>
)
Expand Down
35 changes: 5 additions & 30 deletions src/app/js/components/messages/MessagesView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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(
<Message
key={message.timestamp}
message={message}
/>
)
}
{messages.map( message =>
<Message
key={message.timestamp}
message={message}
/>
)}
<RemoveButton deleteMessages={ e => {this.props.deleteAllMessages(); this.props.deleteAllSentMessages()} } />
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/js/socketManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)})
}

/**
Expand Down Expand Up @@ -198,7 +198,7 @@ function subscribeSendMessageListener () {

const socket = connection.socket

socket.emit(newMessage.eventName, newMessage.message)
socket.emit(newMessage.eventName, ...newMessage.message)
}
})
}
Expand Down

0 comments on commit 85b2c58

Please sign in to comment.