From fc0223b83f5795bde00a4ffcaf99e6fb5ad0e4ee Mon Sep 17 00:00:00 2001
From: dotansimha <dotansimha@gmail.com>
Date: Tue, 24 Jan 2017 15:36:39 +0200
Subject: [PATCH] Step 6.19: Add group by date to the UI

---
 src/pages/messages/messages.ts | 61 +++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/pages/messages/messages.ts b/src/pages/messages/messages.ts
index fde46ff57..6968b7873 100644
--- a/src/pages/messages/messages.ts
+++ b/src/pages/messages/messages.ts
@@ -1,9 +1,10 @@
 import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { NavParams } from 'ionic-angular';
 import { Chat, Message, MessageType } from 'api/models';
-import { Observable } from 'rxjs';
 import { Messages } from 'api/collections';
 import { MeteorObservable } from 'meteor-rxjs';
+import * as moment from 'moment';
+import { _ } from 'meteor/underscore';
 
 @Component({
   selector: 'messages-page',
@@ -13,7 +14,7 @@ export class MessagesPage implements OnInit, OnDestroy {
   selectedChat: Chat;
   title: string;
   picture: string;
-  messages: Observable<Message[]>;
+  messagesDayGroups;
   message: string = '';
   autoScroller: MutationObserver;
   scrollOffset = 0;
@@ -41,26 +42,54 @@ export class MessagesPage implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.autoScroller = this.autoScroll();
-
-    let isEven = false;
-
-    this.messages = Messages.find(
-      {chatId: this.selectedChat._id},
-      {sort: {createdAt: 1}}
-    ).map((messages: Message[]) => {
-      messages.forEach((message: Message) => {
-        message.ownership = isEven ? 'mine' : 'other';
-        isEven = !isEven;
-      });
-
-      return messages;
-    });
+    this.subscribeMessages();
   }
 
   ngOnDestroy() {
     this.autoScroller.disconnect();
   }
 
+  subscribeMessages() {
+    this.scrollOffset = this.scroller.scrollHeight;
+    this.messagesDayGroups = this.findMessagesDayGroups();
+  }
+
+  findMessagesDayGroups() {
+    let isEven = false;
+
+    return Messages.find({
+      chatId: this.selectedChat._id
+    }, {
+      sort: { createdAt: 1 }
+    })
+      .map((messages: Message[]) => {
+        const format = 'D MMMM Y';
+
+        // Compose missing data that we would like to show in the view
+        messages.forEach((message) => {
+          message.ownership = isEven ? 'mine' : 'other';
+          isEven = !isEven;
+
+          return message;
+        });
+
+        // Group by creation day
+        const groupedMessages = _.groupBy(messages, (message) => {
+          return moment(message.createdAt).format(format);
+        });
+
+        // Transform dictionary into an array since Angular's view engine doesn't know how
+        // to iterate through it
+        return Object.keys(groupedMessages).map((timestamp: string) => {
+          return {
+            timestamp: timestamp,
+            messages: groupedMessages[timestamp],
+            today: moment().format(format) === timestamp
+          };
+        });
+      });
+  }
+
   autoScroll(): MutationObserver {
     const autoScroller = new MutationObserver(this.scrollDown.bind(this));