improve chat

src/app/ui/chat/component/messages/messages.page.html

@@ -1,9 +1,9 @@
 <ion-header class="ion-no-border" >
   <ion-toolbar class="header-toolbar" >
-    <div class="main-header" *ngIf="roomData$ | async as roomData">
+    <div class="main-header">
       <div class="header-top">
         <div class="middle" >
-          <ion-label class="title"> {{ roomData.roomName }}</ion-label>
+          <ion-label class="title"  *ngIf="roomData$ | async as roomData"> {{ roomData.roomName }}</ion-label>
           <!-- <button (click)="ChatMessageDebuggingPage()">Dev</button> -->
           <span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus" class="online" name="ellipse"></ion-icon></span>
         </div>
@@ -44,7 +44,7 @@
   <div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
 
     <div
-    *ngFor="let message of messages1[roomId]" class="messages-list-item-wrapper"
+    *ngFor="let message of messages1[roomId]; let messageIndex = index" class="messages-list-item-wrapper"
     [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
     >
     <div class="message-container">
@@ -67,7 +67,10 @@
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
-              <img [src]="attachment.safeFile">
+              <img  
+              [src]="attachment.safeFile"
+              (load)="onImageLoad(message, messageIndex)"
+              (error)="onImageError()">
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">

src/app/ui/chat/component/messages/messages.page.ts

@@ -3,8 +3,6 @@ import { AnimationController, GestureController, IonRange, ModalController, Popo
 import { ToastService } from 'src/app/services/toast.service';
 import { ContactsPage } from '../new-group/contacts/contacts.page';
 import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/chat-options-features.page';
-import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
-import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { TimeService } from 'src/app/services/functions/time.service';
 import { FileService } from 'src/app/services/functions/file.service';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
@@ -43,6 +41,7 @@ import { allowedDocExtension } from 'src/app/utils/allowedDocExtension';
 import { SpeakerService, StartRecordingResultError, StopRecordingResultError } from 'src/app/infra/speaker/speaker.service'
 import { compressImageBase64 } from 'src/app/utils/imageCompressore';
 import { ChatPopoverPage } from '../../modal/chat-popover/chat-popover.page';
+import { LastMessage } from '../../utils/lastMessage';
 
 @Component({
   selector: 'app-messages',
@@ -72,10 +71,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   @Output() getGroups: EventEmitter<any> = new EventEmitter<any>();
 
 
-
-  chatMessageStore = ChatMessageStore
-  chatUserStorage = ChatUserStorage
-
   scrollingOnce: boolean = true;
   private scrollChangeCallback: () => void;
   currentPosition: any;
@@ -176,13 +171,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.listenToUpdateMessage();
     this.listenToSendMessage()
 
-    this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
+    // this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
     this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
     this.roomStatus$ = this.roomRepositoryService.getRoomStatus(this.roomId)
     this.roomRepositoryService.getRoomById(this.roomId)
-    this.messageRepositoryService.listAllMessagesByRoomId(this.roomId).then(()=> {
-      // this.getMessages();
-    })
 
     this.userTypingServiceRepository.getUserTypingLive().subscribe((e) => {
       const arrayNames = e.map(e => e.userName)
@@ -202,11 +194,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.messages1[this.roomId] = []
     this.messages1[this.roomId] = messages
-    this.loadAttachment()
+    
+    this.messages1[this.roomId].push(LastMessage)
 
-    setTimeout(() => {
-      this.scrollToBottomClicked()
-    }, 200)
+    this.loadAttachment()
 
   }
 
@@ -214,33 +205,32 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     for(const message of this.messages1[this.roomId]) {
       if(message.hasAttachment) {
 
-        const result = await this.chatServiceService.getMessageAttachmentByMessageId({
-          $messageId: message.$id,
-          id: message.attachments[0].id
-        })
-
-        if(result.isOk()){
-          message.attachments[0].safeFile = result.value
-        }
+        if(message.$id) {
+          console.log('message.$id', message.$id)
+          this.chatServiceService.getMessageAttachmentByMessageId(message).then((result)=> {
+            if(result.isOk()) {
+              message.attachments[0].safeFile = result.value
+            }
+          })
+        } 
+        
       }
-
     }
   }
 
-  // Sorting function
-  sortBySentAt (arr, order = 'asc')  {
-    return arr.sort((a, b) => {
-      // Handle null or undefined sentAt
-      const dateA = a.sentAt ? new Date(a.sentAt).getTime() : Number.MAX_VALUE;
-      const dateB = b.sentAt ? new Date(b.sentAt).getTime() : Number.MAX_VALUE;
+  async onImageLoad(message: MessageEntity, index:number) {
+    if(message.attachments[0].fileName == LastMessage.attachments[0].fileName) {
 
-      if (order === 'asc') {
-        return dateA - dateB;
-      } else {
-        return dateB - dateA;
-      }
-    });
-  };
+      this.scrollToBottom()
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 100)
+
+      this.messages1[this.roomId].splice(index, 1);
+    }
+  }
+  
+  async onImageError() {}
 
 
   listenToIncomingMessage() {
@@ -404,14 +394,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   ngOnInit() {
-    // this.ChatSystemService.getAllRooms();
-    // this.chatService.refreshtoken();
     this.scrollToBottom();
     this.getChatMembers();
 
     this.deleteRecording();
-    // this.loadFiles();
-
   }