last message time and message in user boxes

chatto/src/main/javascript/package.json

@@ -14,6 +14,7 @@
         "fuse.js": "^3.4.6",
         "global": "^4.4.0",
         "handlebars": "^4.5.3",
+        "helper-moment": "^0.2.0",
         "loglevel": "^1.6.6",
         "markdown-it": "^10.0.0",
         "moment": "^2.24.0",

chatto/src/main/javascript/ts/src/main.ts

@@ -76,8 +76,8 @@ userModel.attach(userView);
 const userController = new UserController(userModel, userView);
 userController.getActiveUsers();
 
-
+// @ts-ignore
-
+Handlebars.registerHelper('moment', require('helper-moment'));
 Handlebars.registerHelper('avatar', function () {
     return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
 });

chatto/src/main/javascript/ts/src/model/ChatModel.ts

@@ -6,6 +6,7 @@ import { ChatModelHelper } from "./ChatModelHelper";
 import log = require('loglevel');
 import { ObserverData } from "../observe/ObserverData";
 import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
+import moment = require("moment");
 
 interface Params {
     userName: string,
@@ -114,6 +115,7 @@ export class ChatModel implements Subject<ChatMessageViewModel> {
 
         const pageNumber = this._messagePageMap.get(vm.userName!)
         const cVMs = await this._chatModelHelper.getMessages(vm.userName!, vm.passphrase, pageNumber!, vm.lastMessageTime!, op);
+        let cVMs2 = Array();
         if (cVMs != null) {
             log.info('Subject: My state has just changed')
             const existingMessages = this.getStoredUserMessages(vm.userName!);
@@ -121,21 +123,38 @@ export class ChatModel implements Subject<ChatMessageViewModel> {
             log.debug(existingMessages);
             log.debug('new messages:')
             log.debug(cVMs);
-            this.storeUserMessages(vm.userName!, cVMs, op);
+            cVMs2 = cVMs.filter(c => {
-            this.notify({ userName: vm.userName!, data: cVMs, op: op });
+                const res = existingMessages.filter(m => {
+                    if (moment(c.messageTime).isSame(moment(m.messageTime)))
+                        return true;
+                })
+                if (res.length > 0)
+                    return false;
+                return true;
+            })
+            if (cVMs2.length != 0 && op == "update") {
+                const lastMessageText = vm.lastMessageText = cVMs2[cVMs2.length - 1].message;
+                cVMs2.forEach(v => {
+                    if (v.userName == vm.userName) {
+                        v.lastMessageTime = cVMs2[cVMs2.length - 1].messageTime;
+                            v.lastMessageText = cVMs2[cVMs2.length - 1].message.slice(0, 15) + "..."
+                    }
+                })
+            };
+
+            if (cVMs2.length != 0 && op != "update") {
+
+                this._messagePageMap.set(vm.userName!, this._messagePageMap.get(vm.userName!)! + 1);
+            }
+
+            this.storeUserMessages(vm.userName!, cVMs2, op);
+            this.notify({ userName: vm.userName!, data: cVMs2, op: op });
         }
         else {
             log.error('Messages were null');
         }
 
-        if (cVMs.length != 0 && op == "update") vm.lastMessageTime = cVMs[cVMs.length - 1].messageTime;
+        return cVMs2;
-
-        if (cVMs.length != 0 && op != "update") {
-
-            this._messagePageMap.set(vm.userName!, this._messagePageMap.get(vm.userName!)! + 1);
-        }
-
-        return cVMs;
     }
 
     public async isPassphraseValid(passphrase: string, userName: string): Promise<boolean> {

chatto/src/main/javascript/ts/src/model/ChatModelHelper.ts

@@ -32,7 +32,8 @@ export class ChatModelHelper {
             }
             case "update": {
                 const data: ChatMessageDTO[] = await this._getNewMessagesAjax(userName, lastMessageTime!);
-                return data.map(vm => this._toChatMessageVM(vm, passphrase));
+                const cVMs = Promise.all(data.map(vm => this._toChatMessageVMAsync(vm, passphrase)).reverse());
+                return cVMs;
             }
             default: {
                 log.error("Invalid operation");
@@ -166,8 +167,8 @@ export class ChatModelHelper {
         headers.append('X-AUTH-TOKEN', JsonAPI.authToken);
         // const url = Sprintf(JsonAPI.CHAT_MESSAGES_GET, toUser, page, 5);
         // log.debug(url)
-        log.debug(lastMessageTimeStamp);
+        // log.debug(lastMessageTimeStamp);
-        log.debug(lastMessageTimeStamp.toISOString())
+        // log.debug(lastMessageTimeStamp.toISOString())
         const response = await fetch(`/api/chat/get/messages/${toUser}/${lastMessageTimeStamp.toISOString()}`, {
             method: 'GET',
             headers: headers

chatto/src/main/javascript/ts/src/service/AlertifyNotificationService.ts

@@ -103,15 +103,19 @@ export class AlertifyNotificationService implements NotificationService {
                         vm.unlocked = true
                         vm.passphrase = result;
                         const chatMessages: ChatMessageViewModel[] = await cb1(vm, "new");
-                        log.debug("here", chatMessages)
 
                         vms.filter(v => v.userName == vm.userName).map(v => {
                             v.passphrase = result;
                             v.unlocked = true;
+                            if (chatMessages.length != 0) {
                                 v.lastMessageTime = new Date(chatMessages[chatMessages.length - 1].messageTime);
+                                const lastMessageText = v.lastMessageText = chatMessages[chatMessages.length - 1].message;
+                                if (lastMessageText.length > 15) {
+                                    v.lastMessageText = chatMessages[chatMessages.length - 1].message.slice(0, 15) + "..."
+                                }
+                            }
                         })
-                        log.debug("last message time = ", chatMessages[chatMessages.length - 1].messageTime)
+                        // vm.lastMessageTime = new Date(chatMessages[chatMessages.length - 1].messageTime);
-                        vm.lastMessageTime = new Date(chatMessages[chatMessages.length - 1].messageTime);
                         cb2(vm, vms);
                         log.debug(vm)
                         log.debug(vms)
@@ -124,7 +128,3 @@ export class AlertifyNotificationService implements NotificationService {
         }
     }
 }
-
-// log.debug("LOOK HERE",vm.lastMessageTime)
-//         setInterval(this._chatModel.getMessages.bind(this._chatModel,
-//             vm.userName!, vm.passphrase, vm.lastMessageTime!, "new"), 2000);

chatto/src/main/javascript/ts/src/view/ChatView.ts

@@ -96,9 +96,12 @@ export class ChatView implements Observer<ChatMessageViewModel> {
                     }
                     $(this._messageContainer).append(rendered);
                 });
+                if(rev.length > 0) {
                     // $(this._messageContainer).stop().animate({
                     //     scrollTop: $(this._messageContainer)[0].scrollHeight
                     // }, 1500);
+                    this._userModel.notify();
+                }
             } break;
             default: {
                 const rev: ChatMessageViewModel[] = Object.create(cd.data)
@@ -164,6 +167,7 @@ export class ChatView implements Observer<ChatMessageViewModel> {
         const vm = this._userModel.activeUsersList.find(u => u.userName == JsonAPI.contactName);
         // new Date().     
         vm!.lastMessageTime = new Date();
+        
         const passphrase = vm?.passphrase
 
         if (chatInput.value == '' || chatInput.value == null) {
@@ -179,6 +183,7 @@ export class ChatView implements Observer<ChatMessageViewModel> {
         // }
 
         const messageContent = chatInput.value;
+        vm!.lastMessageText = messageContent;
         const msgTime = new Date();
         const context: ChatMessageViewModel = {
             fromUser: JsonAPI.principleName || "error",
@@ -188,6 +193,7 @@ export class ChatView implements Observer<ChatMessageViewModel> {
         };
 
         this.update({ data: new Array(context), op: "new" })
+        this._userModel.notify();
 
         let messageCipher: MessageCipherDTO = this._encryptionService.encrypt(passphrase!, messageContent)
         let chatMessageDTO = {

chatto/src/main/javascript/ts/src/view/UserView.ts

@@ -125,18 +125,19 @@ export class UserView implements Observer<ActiveUserViewModel> {
         // this._chatModel.getMessages(userName, vm.passphrase, null, "new");
         el.className += " active";
         log.debug("loop", this._newMessagesLoop)
-        if (this._newMessagesLoop != null) {
+        if (vm.unlocked) {
             this._newMessagesLoop = setInterval(this._chatModel.getMessages.bind(this._chatModel,
-                vm, "update"), 2000);
+                vm, "update"), 10_000);
         }
     }
 
     private _promptHandler(vm: ActiveUserViewModel, vms: ActiveUserViewModel[]) {
         // vms.filter(v => v.userName == vm.userName).map(v => v.userName = vm.userName)
         log.debug(vms)
-        this._model.notify();
+
         this._newMessagesLoop = setInterval(this._chatModel.getMessages.bind(this._chatModel,
-            vm, "update"), 2000);
+            vm, "update"), 10_000);
+        this._model.notify();
     }
 
     private _addSearchButtonEL() {

chatto/src/main/javascript/ts/src/viewmodel/ActiveUserViewModel.ts

@@ -5,4 +5,5 @@ export class ActiveUserViewModel {
     passphrase: string = "";
     lastActive: Date | undefined;
     lastMessageTime: Date | undefined;
+    lastMessageText: string = "";
 }

chatto/src/main/javascript/yarn.lock

@@ -1449,6 +1449,15 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+helper-moment@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/helper-moment/-/helper-moment-0.2.0.tgz#128983ed13e48adb83621157a7d9b55734e2296d"
+  integrity sha1-EomD7RPkituDYhFXp9m1VzTiKW0=
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^3.1.0"
+    moment "^2.17.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -1752,7 +1761,7 @@ jsonparse@^1.2.0:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
@@ -1995,7 +2004,7 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-moment@^2.10.2, moment@^2.24.0:
+moment@^2.10.2, moment@^2.17.1, moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==

chatto/src/main/resources/templates/chat.html

@@ -260,8 +260,8 @@
                             <p>{{userName}} is online</p>
                         </div>
                         <div class="d-flex flex-column ml-auto">
-                            <div class="text-right">Dec 25</div>
+                            <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
-                            <div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
+                            <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
                         </div>
                     </div>
                 </li>
@@ -277,8 +277,8 @@
                             <p>Last active {{fromNow lastActive}}</p>
                         </div>
                         <div class="d-flex flex-column ml-auto">
-                            <div class="text-right">Dec 25</div>
+                            <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
-                            <div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
+                            <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
                         </div>
                     </div>
                 </li>