finish styling individual messages view for desktop

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

@@ -26,6 +26,8 @@ export class GroupMessagesPage implements OnInit {
   members:any;
   contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
+  roomId: string;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -36,8 +38,7 @@ export class GroupMessagesPage implements OnInit {
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -45,27 +46,40 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
+    this.getRoomInfo();
   }
-  load(){
+
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.roomName = this.room.name.split('-').join(' ');
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
+
+
+  /* load(){
     this.getGroupContacts();
     this.loadGroupMessages();
-  }
+  } */
 
   close(){
     this.modalController.dismiss();
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
 
-  getGroupContacts(){
+  getGroupContacts(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,18 +87,18 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
       });
     }
   }
-  loadGroupMessages(){
+  loadGroupMessages(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
@@ -93,7 +107,7 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
@@ -104,12 +118,12 @@ export class GroupMessagesPage implements OnInit {
     let body = {
       "message": 
       { 
-        "rid": this.room._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
     this.chatService.sendMessage(body).subscribe(res=> {
-      this.loadGroupMessages(); 
+      this.getRoomInfo();
     });
     this.message = "";
   }
@@ -131,7 +145,7 @@ export class GroupMessagesPage implements OnInit {
         this.roomName = res.data.name.split('-').join(' ');
         console.log(this.roomName);
         
-        this.load();
+        this.getRoomInfo();
         /* this.modalController.dismiss(); */
       };
       
@@ -167,7 +181,7 @@ export class GroupMessagesPage implements OnInit {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.load();
+      this.getRoomInfo();
     });
   }