Websocket with storage

src/app/services/chat/room.service.ts

@@ -12,6 +12,7 @@ import { Storage } from '@ionic/storage';
 export class RoomService {
 
   massages: MessageService[] = []
+  storageMessage: any[] = [];
   lastMessage: MessageService;
 
   chatUser: ChatUserService[] = []
@@ -24,6 +25,7 @@ export class RoomService {
   duration = ''
 
   private ToastService = ToastsService
+  mgsArray = [];
 
   scrollDown = () => { }
 
@@ -80,13 +82,28 @@ export class RoomService {
 
     this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory: chatHistory) => {
 
-      await this.transformData(chatHistory.result.messages.reverse());
+      //await this.transformData(chatHistory.result.messages.reverse());
+      /* console.log('loadHistory 111', chatHistory.result.messages.reverse())
+      this.mgsArray = chatHistory.result.messages.reverse();
+      await this.storage.set('chatmsg', this.mgsArray).then((value) => {
+        console.log('MSG SAVED ON STORAGE', value)
+      }); */
 
+     /*  await this.storage.get('chatmsg').then((message) => {
+        message.forEach(message => {
+          console.log('FROM DB WEB', message)
+          message = this.fix_updatedAt(message)
+          const wewMessage = new MessageService()
+          wewMessage.setData(message)
+          this.massages.push(wewMessage)
+          console.log('loadHistory 222', this.massages)
+        });
+      }) */
       chatHistory.result.messages.reverse().forEach(message => {
 
         message = this.fix_updatedAt(message)
         console.log('loadHistory', message)
-
+        this.storageMessage.push(message)
         const wewMessage = new MessageService()
         wewMessage.setData(message)
         this.massages.push(wewMessage)
@@ -102,11 +119,20 @@ export class RoomService {
     this.hasLoadHistory = true
   }
 
+
+  updateMeessage(messageID, imgbase64) {
+
+  }
+
+  async returnData(res) {
+
+    return res;
+  }
+
   async transformData(res) {
 
-    let mgsArray = [];
+    this.mgsArray = [];
     res.forEach(async element => {
-      console.log('TRANSFORM DATA ELEMENT' ,element)
 
       if (element.file) {
         if (element.file.guid) {
@@ -129,7 +155,7 @@ export class RoomService {
 
             }
 
-            mgsArray.push(this.fix_updatedAt(chatmsg));
+            this.mgsArray.push(chatmsg);
 
           })
         } else {
@@ -146,7 +172,7 @@ export class RoomService {
             _updatedAt: element._updatedAt,
           }
 
-          mgsArray.push(this.fix_updatedAt(chatmsg))
+          this.mgsArray.push(chatmsg)
         }
       } else {
         let chatmsg = {
@@ -161,14 +187,14 @@ export class RoomService {
           _updatedAt: element._updatedAt,
         }
 
-        mgsArray.push(this.fix_updatedAt(chatmsg))
+        this.mgsArray.push(chatmsg)
       }
 
     });
     await this.storage.remove('chatmsg').then(() => {
       console.log('MSG REMOVE FROM STORAGE')
     });
-    await this.storage.set('chatmsg', mgsArray).then((value) => {
+    await this.storage.set('chatmsg', this.mgsArray).then((value) => {
       console.log('MSG SAVED ON STORAGE', value)
     });
 
@@ -183,8 +209,10 @@ export class RoomService {
 
   private fix_updatedAt(message) {
     if (message.result) {
+      console.log('FIX UPDATE ', message.result)
       message.result._updatedAt = message.result._updatedAt['$date']
     } else {
+      console.log('FIX UPDATE 11', message)
       message._updatedAt = message._updatedAt['$date']
     }
     return message

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

@@ -38,7 +38,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of  wsChatMethodsService.getDmRoom(roomId).massages; let last = last">
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -113,6 +113,7 @@
       </div>
 
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
+        <div *ngIf="msg.file">
           <div *ngIf="msg.file.type == 'application/img'">
             <div class="message-item-options d-flex justify-content-end">
               <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -140,6 +141,7 @@
             </div>
           </div>
         </div>
+      </div>
 
 
       <div *ngIf="msg.file">

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

@@ -25,6 +25,8 @@ import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
 import { Storage } from '@ionic/storage';
 import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
 import { WsChatService } from 'src/app/services/chat/ws-chat.service'
+import { MessageService } from 'src/app/services/chat/message.service';
+import { element } from 'protractor';
 
 const IMAGE_DIR = 'stored-images';
 @Component({
@@ -68,6 +70,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   longPressActive = false;
   frameUrl: any;
   downloadFile: any;
+  massages: MessageService[] = []
 
   constructor(
     public popoverController: PopoverController,
@@ -100,7 +103,15 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
 
     this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
-    this.getMessageDB();
+    /* console.log('DATATATA', this.wsChatMethodsService.getDmRoom(this.roomId).massages)
+    this.wsChatMethodsService.getDmRoom(this.roomId).massages.forEach((element) => {
+      console.log('DATATATA 11', element)
+    }) */
+    
+    
+    //this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
+    //this.getMessageDB()
+
 
     setTimeout(() => {
       this.scrollToBottomClicked()
@@ -115,6 +126,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   }
 
+
   onPressingMessage() {
     const gesture = this.gestureController.create({
       el: this.messageContainer.nativeElement,
@@ -254,22 +266,127 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }); */
   }
 
-  getMessageDB() {
+  async getMessageDB() {
-    this.storage.get('chatmsg').then((msg) => {
+    await this.storage.get('chatmsg').then((message) => {
+      this.transformData(message)
+      /* message.forEach(message => {
+        console.log('FROM DB WEB', message)
+        message = this.fix_updatedAt(message)
+        const wewMessage = new MessageService()
+        wewMessage.setData(message)
+        this.massages.push(wewMessage)
+        console.log('loadHistory 222', this.massages)
+      }); */
+    }) 
+    /* await this.storage.get('chatmsg').then((msg) => {
       console.log('FROM DB WEB', msg)
       let msgArray = [];
+      if (msg) {
         msgArray = msg;
         msgArray.filter(data => data._id != this.roomId);
         this.messages = msgArray;
         console.log("MSG CHAT WEB", this.messages)
-    })
+      } else {
+        this.getMessageDB()
+      }
 
+    }) */
+
+  }
+
+  private fix_updatedAt(message) {
+    if (message.result) {
+      console.log('FIX UPDATE ', message.result)
+      message.result._updatedAt = message.result._updatedAt['$date']
+    } else {
+      console.log('FIX UPDATE 11', message)
+      message._updatedAt = message._updatedAt['$date']
+    }
+    return message
   }
 
   async transformData(res) {
 
     let mgsArray = [];
     res.forEach(async element => {
+
+      if (element.file) {
+        if (element.file.guid) {
+          await this.storage.get(element.file.guid).then((image) => {
+            let chatmsg = {
+              _id: element._id,
+              attachments: element.attachments,
+              channels: element.channels,
+              file: {
+                guid: element.file.guid,
+                image_url: image,
+                type: element.file.type
+              },
+              mentions: element.mentions,
+              msg: element.msg,
+              rid: element.rid,
+              ts: element.ts,
+              u: element.u,
+              _updatedAt: element._updatedAt ,
+
+            }
+
+            mgsArray.push(chatmsg);
+
+          })
+        } else {
+          let chatmsg = {
+            _id: element._id,
+            attachments: element.attachments,
+            channels: element.channels,
+            file: element.file,
+            mentions: element.mentions,
+            msg: element.msg,
+            rid: element.rid,
+            ts: element.ts,
+            u: element.u,
+            _updatedAt: element._updatedAt,
+          }
+
+          mgsArray.push(chatmsg)
+        }
+      } else {
+        let chatmsg = {
+          _id: element._id,
+          attachments: element.attachments,
+          channels: element.channels,
+          mentions: element.mentions,
+          msg: element.msg,
+          rid: element.rid,
+          ts: element.ts,
+          u: element.u,
+          _updatedAt: element._updatedAt,
+        }
+
+        mgsArray.push(chatmsg)
+      }
+
+    });
+    await this.storage.remove('chatmsg').then(() => {
+      console.log('MSG REMOVE FROM STORAGE')
+    });
+    await this.storage.set('chatmsg', mgsArray).then((message) => {
+      message.forEach(message => {
+        console.log('FROM DB WEB', message)
+        message = this.fix_updatedAt(message)
+        const wewMessage = new MessageService()
+        wewMessage.setData(message)
+        this.massages.push(wewMessage)
+        console.log('loadHistory 222', this.massages)
+      });
+    });
+
+  }
+
+ /*  async transformData(res) {
+    console.log('TRANSFORM DATA', res)
+    let mgsArray = [];
+    res.map(async element => {
       console.log('TRANSFORM DATA ELEMENT', element)
 
       if (element.file) {
@@ -336,7 +453,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       console.log('MSG SAVED ON STORAGE', value)
     });
 
-  }
+  } */
 
   async viewDocument(msg: any, url?: string) {
     if (msg.file.type == "application/img") {
@@ -653,6 +770,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     });
 
   }
+
   sliderOpts = {
     zoom: false,
     slidesPerView: 1.5,
@@ -709,7 +827,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         } else if (event.type === HttpEventType.Response) {
           this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
 
-          this.storage.set(msg.file.guid, this.downloadFile);
+          await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
+            console.log('IMAGE SAVED')
+          });
         }
 
       });
@@ -721,12 +841,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   async openPreview(msg) {
     if (msg.file.image_url === null) {
       this.downloadFileMsg(msg)
+
     } else {
       const modal = await this.modalController.create({
         component: ViewMediaPage,
         cssClass: 'modal modal-desktop',
         componentProps: {
-          image: msg.attachments[0].image_url,
+          image: msg.file.image_url,
           username: msg.u.name,
           _updatedAt: msg._updatedAt
         }