save

src/app/pages/chat/chat.module.ts

@@ -9,8 +9,8 @@ import { ChatPageRoutingModule } from './chat-routing.module';
 import { ChatPage } from './chat.page';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { RouterModule } from '@angular/router';
-import { MessagesPage } from './messages/messages.page';
-import { GroupMessagesPage } from './group-messages/group-messages.page';
+import { GroupMessagesPage } from 'src/app/shared/chat/group-messages/group-messages.page';
+import { MessagesPage } from 'src/app/shared/chat/messages/messages.page';
 
 @NgModule({
   imports: [

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

@@ -66,7 +66,7 @@
                     <div class="item-icon">
                       <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
                     </div>
-                    <div (click)="openGroupMessagesPage(group._id)" class="item-content">
+                    <div (click)="openGroupMessagesPage(group._id, group)" class="item-content">
                       <div class="item-title-time">
                         <div class="item-title">
                           <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
@@ -91,7 +91,7 @@
         <ion-button (click)="openGroupMessagesPage('MduvQyrQBejb3xMrY')">Groups</ion-button>
         <ion-button (click)="destroyComponent()">Destroy</ion-button> -->
         <app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
-        <app-group-messages [roomId]="roomId" *ngIf="showGroupMessages" #messagecontainer></app-group-messages>
+        <app-group-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showGroupMessages" #messagecontainer></app-group-messages>
       </div>
   </div>
 </ion-content>

src/app/pages/chat/chat.page.scss

@@ -40,7 +40,7 @@ ion-content{
   margin: 0 auto;
   background-color: #fff;
   //overflow:auto;
-  //padding: 30px 20px 0 20px;
+  padding: 30px 20px 0 20px;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
 
@@ -108,7 +108,6 @@ ion-content{
 }
 @media only screen and (min-width: 1024px) {
   .main-content{
-    border: 1px solid blue;
    
 
     .aside-wrapper{

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

@@ -98,37 +98,29 @@ export class ChatPage implements OnInit {
 
    
   }
-  destroyComponent() {
+  closeAllDesktopComponents() {
     this.showMessages=false;
     this.showGroupMessages=false;
   }
   openMessagesPage(rid) {
-    this.destroyComponent();
-    this.roomId = rid;
-    this.showMessages=true;
-    /* this.entry.clear();
-    const factory = this.resolver.resolveComponentFactory(MessagesPage);
-    this.componentRef = this.entry.createComponent(factory);
-    this.componentRef.instance.message = message; */
+    if( window.innerWidth <= 1024){
+      this.openMessagesModal(rid);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.roomId = rid;
+      this.showMessages=true;
+    }
   }
-  openGroupMessagesPage(rid) {
-    this.destroyComponent();
-    //console.log(this.child.roomId);
-    this.roomId = rid;
-    this.showGroupMessages=true;
-    console.log(rid);
-    /* this.showGroupMessages=true; */
-    
-    /* this.entry.clear();
-    const factory = this.resolver.resolveComponentFactory(GroupMessagesPage);
-    this.componentRef = this.entry.createComponent(factory);
-    this.componentRef.instance.message = message;
-    let comp: GroupMessagesPage;
-    comp = this.componentRef;
-    comp.message = '123';
-    console.log(comp);
-    console.log('1'); */
-    
+  openGroupMessagesPage(rid, room) {
+    if( window.innerWidth <= 1024){
+      this.openGroupMessagesModal(room);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.roomId = rid;
+      this.showGroupMessages=true;
+    }
   }
 
   
@@ -227,7 +219,7 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  async openMessages(dm:any){
+  async openMessagesModal(roomId:any){
     this.closeAllDesktopComponent();
 
     let classs;
@@ -236,21 +228,21 @@ export class ChatPage implements OnInit {
     } else  {
       classs = 'chat-mobile-modal-to-Desktop'
     }
-    console.log(dm);
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: MessagesPage,
       cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        dm: dm,
+        roomId: roomId,
       },
     });
     await modal.present();
     modal.onDidDismiss();
   }
 
-  async openGroupMessages(room:any){
+  async openGroupMessagesModal(room:any){
     let classs;
     if( window.innerWidth <= 1024){
       classs = 'modal'

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,6 +14,7 @@ import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modul
 @NgModule({
   imports: [
     CommonModule,
+    BrowserModule,
     FormsModule,
     IonicModule,
     SharedModule,

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

@@ -4,7 +4,7 @@
       <div class="header-top">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">{{room.name}}</ion-label>
+          <ion-label class="title">{{roomName}}</ion-label>
         </div>
         <div class="right">
           <ion-icon  (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
@@ -16,7 +16,7 @@
         </div>
         <div class="header-bottom-contacts">
           <ion-label *ngFor="let member of members" >
-            {{member.name}},
+            {{member.name}}
           </ion-label>
         </div>
       </div>
@@ -24,7 +24,6 @@
   </ion-toolbar>
 </ion-header>
 
-
 <ion-content>
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
@@ -32,7 +31,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="welcome-text">
-    <ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
+    <ion-label>Esta conversa passou a grupo</ion-label><br />
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
   <div *ngFor="let msg of messages" class="messages">

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

@@ -21,6 +21,12 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
+          .left{
+            width: 37px;
+            float: left;
+            font-size: 35px;
+            overflow: hidden;
+          }
            .middle{
             padding: 0!important;
             float: left;

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

@@ -1,4 +1,4 @@
-import { AfterViewChecked, Component, OnChanges, OnInit, Input, SimpleChanges, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -13,7 +13,7 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit, OnChanges {
+export class GroupMessagesPage implements OnInit {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -24,8 +24,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   room:any;
   roomName:any;
   members:any;
-
-  @Input() roomId:string;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
   constructor(
     private menu: MenuController,
@@ -33,15 +32,12 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     private actionSheetController: ActionSheetController,
     public popoverController: PopoverController,
     private chatService: ChatService,
-    /* private navParams: NavParams, */
+    private navParams: NavParams,
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    /* this.room = this.navParams.get('room'); */
-    /* this.roomName = this.room.name.split('-').join(' '); */
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    this.getRoomInfo();
+    this.room = this.navParams.get('room');
+    this.roomName = this.room.name.split('-').join(' ');
   }
 
   ngOnInit() {
@@ -49,8 +45,11 @@ export class GroupMessagesPage implements OnInit, OnChanges {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.getRoomInfo();
-    console.log(this.roomId);
+    this.load();
+  }
+  load(){
+    this.getGroupContacts();
+    this.loadGroupMessages();
   }
 
   close(){
@@ -58,30 +57,16 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   }
 
   doRefresh(ev:any){
-    this.getRoomInfo();
+    this.load();
     ev.target.complete();
   }
-  get watch(){
-    this.getRoomInfo();
-    console.log('here watching');
-    
-    return this.roomId;
-  }
-  getRoomInfo(){
-    this.showLoader = true;
-    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
-      this.room = room['room'];
-      this.getGroupContacts(this.room);
-      this.loadGroupMessages(this.room);
-      this.showLoader = false;
-    });
-  }
+  
 
-  getGroupContacts(room:any){
+  getGroupContacts(){
     this.showLoader = true;
     //If group is private call getGroupMembers
-    if(room.t === 'p'){
-      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+    if(this.room.t === 'p'){
+      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -89,33 +74,27 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
       });
     }
   }
-  loadGroupMessages(room:any){
-    console.log('here'+room.t);
-    
+  loadGroupMessages(){
     this.showLoader = true;
     //If group is private call getGroupMembers
-    if(room.t === 'p'){
-      console.log('private');
-      
-      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
+    if(this.room.t === 'p'){
+      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
-        console.log(res);
-        
         this.showLoader = false;
       });
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
+      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
@@ -126,18 +105,17 @@ export class GroupMessagesPage implements OnInit, OnChanges {
     let body = {
       "message": 
       { 
-        "rid": this.roomId, "msg": this.message 
+        "rid": this.room._id, "msg": this.message 
       }
     }
     
     this.chatService.sendMessage(body).subscribe(res=> {
-     /*  this.loadGroupMessages(); */ 
-     this.getRoomInfo();
+      this.loadGroupMessages(); 
     });
     this.message = "";
   }
 
-  /* async openOptions(ev: any) {
+  async openOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatPopoverPage,
       cssClass: 'chat-popover',
@@ -155,7 +133,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
         console.log(this.roomName);
         
         this.load();
-        //this.modalController.dismiss(); 
+        /* this.modalController.dismiss(); */
       };
       
     });
@@ -193,7 +171,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
       this.load();
     });
   }
- */
+
   /* async actionSheet() {
     const actionSheet = await this.actionSheetController.create({
       cssClass: 'my-custom-class',
@@ -220,4 +198,4 @@ export class GroupMessagesPage implements OnInit, OnChanges {
   }
  */
 
-}
+}

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

@@ -8,6 +8,7 @@ import { MessagesPageRoutingModule } from './messages-routing.module';
 
 import { MessagesPage } from './messages.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
 
 @NgModule({
   imports: [
@@ -17,6 +18,6 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     MessagesPageRoutingModule
   ],
-  declarations: [MessagesPage]
+  declarations: [MessagesPage, SharedModule]
 })
 export class MessagesPageModule {}

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

@@ -2,7 +2,9 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="left">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
           <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
@@ -30,21 +32,6 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
-      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
-
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll> -->
-    <!-- <div class="incoming">
-      <div class="title">
-        <ion-label>Secretário Assuntos sociais</ion-label>
-        <span class="time">14:23</span>
-      </div>
-      <div>
-        <img src='assets/images/1.jpg' tappable>
-        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
-      </div>
-    </div> -->
     <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
@@ -57,8 +44,6 @@
   </div>
 
 </ion-content>
-
-
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -81,4 +66,4 @@
       </ion-col>
     </ion-row>
   </ion-toolbar>
-</ion-footer>
+</ion-footer>

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

@@ -2,7 +2,6 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
-    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -22,6 +21,12 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
+          .left{
+            width: 37px;
+            float: left;
+            font-size: 35px;
+            overflow: hidden;
+          }
            .middle{
             padding: 0!important;
             float: left;
@@ -83,13 +88,9 @@
     }
  }
  ion-content{
-   width: 100%;
-   height: 100%;
-  border: 1px solid red;
    .welcome-text{
     /* width: 322px; */
-    /*  width: em(422px); */
-    width: 100%;
+     width: em(422px);
      background: #ebebeb;
      text-align: center;
      font-size: 13px;
@@ -99,7 +100,6 @@
      line-height: 1.2rem;
      margin: 20px 39px 25px;
      border-radius: 8px;
-     
    }
    .messages{
     font-size: 13px;
@@ -150,8 +150,6 @@
  }
 
  ion-footer{
-  width: 100%;
-  border: 1px solid red;
    .row{
      width: 380px;
     margin: 0 auto;
@@ -227,5 +225,4 @@ display: block;
   display: block;
  float: left;
  padding-left: 10px;
-}
- 
+}

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

@@ -1,18 +1,18 @@
-import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { Status } from 'src/app/models/chat/status.model';
+import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.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 { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
+export class MessagesPage implements OnInit, AfterViewChecked {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -21,26 +21,19 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
 
   message = '';
   messages:any;
-  dm:any;
   userPresence='';
   dmUsers:any;
+  roomId:string;
 
-  @Input() roomId:string;
   
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
-    /* private navParams: NavParams, */
+    private navParams: NavParams,
     private chatService: ChatService,
     private authService: AuthService,
   ) { 
-   /*  this.dm = this.navParams.get('dm'); */
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log(this.roomId);
-    this.load();
-    
-    //throw new Error('Method not implemented.');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -55,16 +48,15 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     /* setInterval(()=>{ */
       this.load();
     /* }, 9000); */
-    console.log(this.roomId);
-    
     
   }
+  close(){
+    this.modalController.dismiss();
+  }
   load(){
     this.loadMessages();
     this.getChatMembers();
   }
-
-
   doRefresh(ev:any){
     this.load();
     ev.target.complete();
@@ -72,7 +64,6 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
   
   ngAfterViewChecked() {        
     this.scrollToBottom();
-    console.log(this.roomId);
   } 
   scrollToBottom(): void {
     try {
@@ -108,8 +99,6 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     })
   }
   getChatMembers(){
-    console.log(this.roomId);
-    
     this.showLoader = true;
     this.chatService.getMembers(this.roomId).subscribe(res=> {
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
@@ -123,7 +112,7 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     const popover = await this.popoverController.create({
       component: MessagesOptionsPage,
       componentProps: {
-        roomId: this.dm._id,
+        roomId: this.roomId,
       },
       cssClass: 'messages-options',
       event: ev,
@@ -155,4 +144,4 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     return await popover.present();
   }
 
-}
+}

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

@@ -4,7 +4,7 @@
       <div class="header-top">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">{{roomName}}</ion-label>
+          <ion-label class="title">{{room.name}}</ion-label>
         </div>
         <div class="right">
           <ion-icon  (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
@@ -32,7 +32,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="welcome-text">
-    <ion-label>Esta conversa passou a grupo</ion-label><br />
+    <ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
   <div *ngFor="let msg of messages" class="messages">
@@ -74,3 +74,4 @@
     </ion-row>
   </ion-toolbar>
 </ion-footer>
+

src/app/shared/chat/group-messages/group-messages.page.scss

@@ -1,4 +1,4 @@
-@import '~src/function.scss';
+ @import '~src/function.scss';
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
@@ -16,7 +16,7 @@
         transform: translate3d(0, 1px, 0);
         
         .header-top{
-          width: 360px;
+          //width: 360px;
           margin: 0px auto;
           overflow: auto;
           padding: 0 !important;
@@ -79,7 +79,7 @@
  ion-content{
    .welcome-text{
     /* width: 322px; */
-     width: em(422px);
+     //width: em(422px);
      background: #ebebeb;
      text-align: center;
      font-size: 13px;
@@ -141,7 +141,7 @@
 
  ion-footer{
    .row{
-     width: 380px;
+     width: 100%;
     margin: 0 auto;
    }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewChecked, Component, OnChanges, OnInit, Input, SimpleChanges, Output } from '@angular/core';
 import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -13,7 +13,7 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit {
+export class GroupMessagesPage implements OnInit, OnChanges {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -24,7 +24,8 @@ export class GroupMessagesPage implements OnInit {
   room:any;
   roomName:any;
   members:any;
-  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  @Input() roomId:string;
 
   constructor(
     private menu: MenuController,
@@ -32,12 +33,15 @@ export class GroupMessagesPage implements OnInit {
     private actionSheetController: ActionSheetController,
     public popoverController: PopoverController,
     private chatService: ChatService,
-    private navParams: NavParams,
+    /* private navParams: NavParams, */
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    /* this.room = this.navParams.get('room'); */
+    /* this.roomName = this.room.name.split('-').join(' '); */
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.getRoomInfo();
   }
 
   ngOnInit() {
@@ -45,11 +49,8 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
-  }
-  load(){
-    this.getGroupContacts();
-    this.loadGroupMessages();
+    this.getRoomInfo();
+    console.log(this.roomId);
   }
 
   close(){
@@ -57,15 +58,30 @@ export class GroupMessagesPage implements OnInit {
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
+  get watch(){
+    this.getRoomInfo();
+    console.log('here watching');
+    
+    return this.roomId;
+  }
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
 
-  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=>{
+    if(room.t === 'p'){
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,27 +89,33 @@ 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){
+    console.log('here'+room.t);
+    
     this.showLoader = true;
     //If group is private call getGroupMembers
-    if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+    if(room.t === 'p'){
+      console.log('private');
+      
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
+        console.log(res);
+        
         this.showLoader = false;
       });
     }
     //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,17 +126,18 @@ 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.loadGroupMessages(); */ 
+     this.getRoomInfo();
     });
     this.message = "";
   }
 
-  async openOptions(ev: any) {
+  /* async openOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatPopoverPage,
       cssClass: 'chat-popover',
@@ -132,7 +155,7 @@ export class GroupMessagesPage implements OnInit {
         console.log(this.roomName);
         
         this.load();
-        /* this.modalController.dismiss(); */
+        //this.modalController.dismiss(); 
       };
       
     });
@@ -170,7 +193,7 @@ export class GroupMessagesPage implements OnInit {
       this.load();
     });
   }
-
+ */
   /* async actionSheet() {
     const actionSheet = await this.actionSheetController.create({
       cssClass: 'my-custom-class',
@@ -198,3 +221,4 @@ export class GroupMessagesPage implements OnInit {
  */
 
 }
+

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

@@ -2,7 +2,6 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
           <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
@@ -57,6 +56,8 @@
   </div>
 
 </ion-content>
+
+
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -80,3 +81,4 @@
     </ion-row>
   </ion-toolbar>
 </ion-footer>
+

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

@@ -2,6 +2,7 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
+    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -11,12 +12,12 @@
         border-top-right-radius: 25px;
         background-color: #fff;
         overflow:hidden;
-        padding: 30px 20px 0px 20px;
+        padding: 0px 20px 0px 20px;
         color:#000;
         transform: translate3d(0, 1px, 0);
         
         .header-top{
-          width: 360px;
+          //width: 360px;
           margin: 0px auto;
           overflow: auto;
           padding: 0 !important;
@@ -82,9 +83,13 @@
     }
  }
  ion-content{
+   width: 100%;
+   height: 100%;
+  border: 1px solid red;
    .welcome-text{
     /* width: 322px; */
-     width: em(422px);
+    /*  width: em(422px); */
+    width: 100%;
      background: #ebebeb;
      text-align: center;
      font-size: 13px;
@@ -94,6 +99,7 @@
      line-height: 1.2rem;
      margin: 20px 39px 25px;
      border-radius: 8px;
+     
    }
    .messages{
     font-size: 13px;
@@ -144,6 +150,8 @@
  }
 
  ion-footer{
+  width: 100%;
+  border: 1px solid red;
    .row{
      width: 380px;
     margin: 0 auto;
@@ -220,4 +228,5 @@ display: block;
  float: left;
  padding-left: 10px;
 }
+ 
  

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

@@ -1,18 +1,18 @@
-import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { Status } from 'src/app/models/chat/status.model';
-import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.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 { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit, AfterViewChecked {
+export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -25,15 +25,22 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   userPresence='';
   dmUsers:any;
 
+  @Input() roomId:string;
   
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
-    private navParams: NavParams,
+    /* private navParams: NavParams, */
     private chatService: ChatService,
     private authService: AuthService,
   ) { 
-    this.dm = this.navParams.get('dm');
+   /*  this.dm = this.navParams.get('dm'); */
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(this.roomId);
+    this.load();
+    
+    //throw new Error('Method not implemented.');
   }
 
   ngOnInit() {
@@ -48,12 +55,16 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     /* setInterval(()=>{ */
       this.load();
     /* }, 9000); */
+    console.log(this.roomId);
+    
     
   }
   load(){
     this.loadMessages();
     this.getChatMembers();
   }
+
+
   doRefresh(ev:any){
     this.load();
     ev.target.complete();
@@ -61,6 +72,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   ngAfterViewChecked() {        
     this.scrollToBottom();
+    console.log(this.roomId);
   } 
   scrollToBottom(): void {
     try {
@@ -76,7 +88,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     let body = {
       "message": 
       { 
-        "rid": this.dm._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
@@ -88,7 +100,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   loadMessages(){
     this.showLoader = true;
-    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
       /* console.log(res); */
       this.messages = res['messages'].reverse();
       console.log(this.messages);
@@ -96,8 +108,10 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     })
   }
   getChatMembers(){
+    console.log(this.roomId);
+    
     this.showLoader = true;
-    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res=> {
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
       console.log(this.dmUsers);
@@ -142,3 +156,4 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   }
 
 }
+