Skip to content

Instantly share code, notes, and snippets.

@Mattchewone Mattchewone/message.component.js Secret
Last active Feb 12, 2019

Embed
What would you like to do?
Component.extend({
tag: 'messages',
view: `<div>
<h1>Messages</h1>
<div class="wrapper" >
{{# for(message of messages) }}
<section>
<div>
TO: {{ users.usersById[message.to].email }}
</div>
<div>
MSG: {{ message.name }}
</div>
<div>
FROM: {{ users.usersById[message.from].email }}
</div>
{{/ for}}
</section>
</div>
<div>
<form on:submit="sendMessage(scope.event)">
<input name="to" placeholder="To" value:bind="to">
<input name="msg" placeholder="Message.." value:bind="msg">
<button type="submit">Create</button>
</form>
</div>
</div>`,
ViewModel: {
msg: 'string',
to: 'string',
messages: 'any',
users: 'any',
roomId: 'string',
get messagesAndUsers () {
return Promise.all([
this.messagesPromise,
this.usersPromise
])
},
user: {
get: () => Session.current.user
},
messagesPromise: {
default: () => Messages.getList({ $or: [{ from: Session.current.user._id }, { to: Session.current.user._id }] })
},
usersPromise: {
default: () => User.getList()
},
sendMessage (event) {
event.preventDefault()
const toUser = this.users.usersByEmail[this.to]
if (toUser) {
new Messages({ name: this.msg, to: toUser._id, roomId: this.roomId })
.save()
.then(() => {
this.msg = ''
this.to = ''
})
}
},
connectedCallback () {
// Listen to the session prop so we can load messages
// once we have an user
this.listenTo('user', (e, newVal) => {
// Load both users and messages and assign to VM
this.messagesAndUsers.then(([messages, users]) => {
this.messages = messages
this.users = users
})
})
feathersClient.service('room-membership').create({ roomId: this.roomId })
// Teardown handler
return () => {
feathersClient.service('room-membership').remove(this.roomId)
// Remove all listeners
this.stopListening()
}
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.