add headers to options

src/app/pages/chat/messages/messages.page.html

@@ -36,7 +36,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div *ngFor="let msg of messages; let last = last" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    <div *ngFor="let msg of chatMessageStore.message[roomId] ; let last = last" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
         <span class="time">{{showDateDuration(msg._updatedAt)}}</span>

src/app/pages/chat/messages/messages.page.ts

@@ -9,6 +9,8 @@ import { connection } from 'src/app/services/socket/synchro.service';
 import { ToastService } from 'src/app/services/toast.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
+import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
+import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 
 @Component({
   selector: 'app-messages',
@@ -32,6 +34,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   scrollingOnce:boolean = true;
 
   connection  = connection;
+  chatMessageStore = ChatMessageStore
+  chatUserStorage = ChatUserStorage
 
   private scrollChangeCallback: () => void;
   currentPosition: any;
@@ -146,9 +150,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   loadMessages() {
     this.showLoader = true;
+    const roomId = this.roomId
+    
     this.chatService.getRoomMessages(this.roomId).subscribe(res => {
       /* console.log(res); */
       this.messages = res['messages'].reverse();
+      this.chatMessageStore.add(roomId, this.messages)
       console.log(this.messages);
       this.showLoader = false;
     })
@@ -245,7 +252,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async serverLongPull() {
-    this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
+
+    const roomId = this.roomId
+    this.chatService.getRoomMessages(roomId).subscribe(async res => {
 
     if (res == 502) {
       // Connection timeout
@@ -257,6 +266,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       //showMessage(response.statusText);
       //this.loadMessages()
       this.messages = res['messages'].reverse();
+      this.chatMessageStore.add(roomId, this.messages)
+
       console.log(this.messages);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){