Display name and avatar of other chat participan on each message.

.meteor/packages

@@ -21,3 +21,4 @@ accounts-password
 twbs:bootstrap
 ian:accounts-ui-bootstrap-3
 insecure
+msavin:mongol

.meteor/versions

@@ -14,6 +14,7 @@ caching-compiler@1.0.0
 caching-html-compiler@1.0.2
 callback-hook@1.0.4
 check@1.1.0
+dburles:mongo-collection-instances@0.3.4
 ddp@1.2.2
 ddp-client@1.2.1
 ddp-common@1.2.2
@@ -44,18 +45,21 @@ iron:middleware-stack@1.0.11
 iron:router@1.0.12
 iron:url@1.0.11
 jquery@1.11.4
+lai:collection-extensions@0.1.4
 launch-screen@1.0.4
 livedata@1.0.15
 localstorage@1.0.5
 logging@1.0.8
 meteor@1.1.10
 meteor-base@1.0.1
+meteortoys:toykit@2.2.1
 minifiers@1.1.7
 minimongo@1.0.10
 mobile-experience@1.0.1
 mobile-status-bar@1.0.6
 mongo@1.1.3
 mongo-id@1.0.1
+msavin:mongol@1.6.2
 npm-bcrypt@0.7.8_2
 npm-mongo@1.4.39_1
 observe-sequence@1.0.7

client/chat_message.html

@@ -0,0 +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>
+</template>

client/chat_message.js

@@ -0,0 +1,6 @@
+Template.chat_message.helpers({
+  author: function () {
+    console.log('chat message, this', this);
+    return "someone";
+  }
+});

client/chat_page.html

@@ -1,15 +1,12 @@
 <!-- Top level template for the chat page -->
 <template name="chat_page">
-  <h2>Type in the box below to send a message!</h2>
-  <div class="row">
-    <div class="col-md-12">
-      <div class="well well-lg">
-        {{#each messages}}
-          {{> chat_message}}
-        {{/each}}
-      </div>
-    </div>
+  <h2>Chatting with {{ other.profile.username }} </h2>
+  <div class="well well-lg">
+  {{#each message in messages}}
+    {{> chat_message other=other text=message }}
+  {{/each}}
   </div>
+  <p>Type in the box below to send a message!</p>
   <div class="row">
     <div class="col-md-12">
       <form class="js-send-chat">

client/chat_page.js

@@ -1,12 +1,13 @@
 
 Template.chat_page.helpers({
   messages: function () {
-    const chat = Chats.findOne({ _id: Session.get("chatId" )});
+    console.log("messages context", this);
+    const chat = Chats.findOne({ _id: Session.get("chatId") });
     return chat.messages;
   },
 
   other_user: function () {
-    return "";
+    return this;
   }
 });
 

client/minstant.html

@@ -20,12 +20,6 @@
 </template>
 
 
-<!-- simple template that displays a message -->
-<template name="chat_message">
-	someone said: {{text}}
-	<br>
-</template>
-
 <template name="Loading">
   Loading...
 </template>

client/routes.js

@@ -15,16 +15,16 @@ Router.route("/", function () {
 // specify a route that allows the current user to chat to another users
 Router.route("/chat/:_id", {
   subscriptions: function () {
-    Meteor._debug('subscriptions', arguments);
+    Meteor._debug("Subscriptions");
     return Meteor.subscribe("chats");
   },
 
-  action: function () {
-    Meteor._debug('action', arguments);
+  action: function (req, wtf, func) {
+    Meteor._debug("Action", req.url);
     if (this.ready()) {
-      Meteor._debug("Ready");
-      // the user they want to chat to has id equal to
-      // the id sent in after /chat/...
+      console.log("- Now ready");
+
+      // The user they want to chat to has id equal to the id sent in after /chat/...
       const otherUserId = this.params._id;
       // find a chat that has two users that match current user id
       // and the requested user id
@@ -41,7 +41,8 @@ Router.route("/chat/:_id", {
         ]
       };
       const chat = Chats.findOne(filter);
-      Meteor._debug(filter, chat);
+      // Meteor._debug(filter, chat);
+
       // No chat matching the filter - need to insert a new one.
       let chatId;
       if (!chat) {
@@ -49,22 +50,31 @@ Router.route("/chat/:_id", {
           user1Id: Meteor.userId(),
           user2Id: otherUserId
         });
-        Meteor._debug("No chat found between " + Meteor.userId() + " and " + otherUserId + ". Created " + chatId);
+        console.log("--- No chat found between " + Meteor.userId() + " and " + otherUserId + ". Created " + chatId);
       }
       // There is a chat going already - use that.
       else {
         chatId = chat._id;
-        Meteor._debug("Chat " + chatId + " found between " + Meteor.userId() + " and " + otherUserId + ".");
+        console.log("--- Chat " + chatId + " found between " + Meteor.userId() + " and " + otherUserId + ".");
       }
       // Looking good, save the id to the session.
       if (chatId) {
         Session.set("chatId", chatId);
       }
       this.render("navbar", { to: "header" });
-      this.render("chat_page", { to: "main" });
+      this.render("chat_page", {
+        to: "main",
+        data: function () {
+          const other = Meteor.users.findOne({ _id: otherUserId });
+          console.log("--- Routing data, other: " + (other ? other.profile.username : "not available"));
+          return {
+            other: other
+          };
+        }
+      });
     }
     else {
-      Meteor._debug('not ready');
+      console.log("- Not yet ready");
       this.render("Loading");
     }
   }