Prepend message author to invididual messages.

client/chat_message.html

@@ -1,8 +1,8 @@
 <!-- simple template that displays a message -->
 <template name="chat_message">
   <div class="row">
-    <div class="col-xs-1 thumbnail"><img src="/{{ other.profile.avatar }}" alt="Avatar of user {{ other.profile.username }}" /></div>
-    <div class="col-md-1">{{ other.profile.username }}</div>
-    <div class="col-md-10">{{ text.text }}</div>
+    <div class="col-xs-1 thumbnail"><img src="/{{ sender.profile.avatar }}" alt="Avatar of user {{ sender.profile.username }}" /></div>
+    <div class="col-md-1">{{ sender.profile.username }}</div>
+    <div class="col-md-10">{{ message.text }}</div>
   </div>
 </template>

client/chat_message.js

@@ -1,6 +1,17 @@
 Template.chat_message.helpers({
-  author: function () {
-    console.log('chat message, this', this);
-    return "someone";
+  sender: function () {
+    const me = Meteor.userId();
+    let result;
+    if (this.message.sender === me) {
+      result = Meteor.user();
+    }
+    else if (this.message.sender === this.other._id) {
+      result = this.other;
+    }
+    else {
+      result = `Unknown user ${this.message.sender}.`;
+    }
+    console.log("chat_message sender", result);
+    return result;
   }
 });

client/chat_page.html

@@ -3,7 +3,7 @@
   <h2>Chatting with {{ other.profile.username }} </h2>
   <div class="well well-lg">
   {{#each message in messages}}
-    {{> chat_message other=other text=message }}
+    {{> chat_message other=other message=message }}
   {{/each}}
   </div>
   <p>Type in the box below to send a message!</p>

client/chat_page.js

@@ -1,13 +1,12 @@
 
 Template.chat_page.helpers({
   messages: function () {
-    console.log("messages context", this);
     const chat = Chats.findOne({ _id: Session.get("chatId") });
+    console.log("messages context", this, chat.messages);
     return chat.messages;
   },
 
   other_user: function () {
-    return this;
   }
 });
 
@@ -18,7 +17,7 @@ Template.chat_page.events({
     event.preventDefault();
     // see if we can find a chat object in the database
     // to which we'll add the message
-    const chat = Chats.findOne({_id: Session.get("chatId")});
+    const chat = Chats.findOne({ _id: Session.get("chatId") });
     if (chat) {// ok - we have a chat to use
       let msgs = chat.messages; // pull the messages property
       if (!msgs) {// no messages yet, create a new array
@@ -27,7 +26,10 @@ Template.chat_page.events({
       // is a good idea to insert data straight from the form
       // (i.e. the user) into the database?? certainly not.
       // push adds the message to the end of the array
-      msgs.push({ text: event.target.chat.value });
+      msgs.push({
+        text: event.target.chat.value,
+        sender: Meteor.userId()
+      });
       // reset the form
       event.target.chat.value = "";
       // put the messages array onto the chat object

client/minstant.html

@@ -12,11 +12,18 @@
 	<div class="container">
 	{{> yield "main"}}
 	</div>
+
 </template>
 
 <!-- Top level template for the lobby page -->
 <template name="lobby_page">
 	{{> available_user_list}}
+
+  <div class="container">
+    <div class="panel panel-default">
+      <div class="panel-body">Users are now sorted by name, unlike the original code.</div>
+    </div>
+  </div>
 </template>
 
 

client/routes.js

@@ -7,7 +7,7 @@ Router.configure({
 
 // specify the top level route, the page users see when they arrive at the site
 Router.route("/", function () {
-  console.log("rendering root /");
+  console.log("Routing root /");
   this.render("navbar", { to: "header" });
   this.render("lobby_page", { to: "main" });
 });

shared/methods.js

@@ -0,0 +1,3 @@
+Meteor.methods({
+
+});