From e4353b5d59b79899b6cb9b1e3b1ff09e342179b2 Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Thu, 11 Mar 2021 16:21:09 +0100
Subject: [PATCH] working in responsiveness

---
 src/app/app-routing.module.ts                 |  7 +-
 src/app/app.module.ts                         |  5 +-
 src/app/home/home-routing.module.ts           | 16 ++--
 src/app/pages/chat/chat-routing.module.ts     | 17 +----
 src/app/pages/chat/chat.module.ts             | 11 ++-
 src/app/pages/chat/chat.page.html             | 47 ++----------
 src/app/pages/chat/chat.page.scss             | 11 +--
 src/app/pages/chat/chat.page.ts               | 58 ++++++++++++++-
 .../group-messages/group-messages.page.html   |  4 +-
 .../group-messages/group-messages.page.ts     | 73 ++++++++++++-------
 .../pages/chat/messages/messages.page.html    |  2 +
 .../pages/chat/messages/messages.page.scss    | 10 ++-
 src/app/pages/chat/messages/messages.page.ts  | 28 +++++--
 src/app/pages/chat/test/test.page.html        |  2 +-
 src/app/services/chat.service.ts              | 10 +++
 15 files changed, 191 insertions(+), 110 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7fd5e228a..8ea73ab47 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { ChatPage } from './pages/chat/chat.page';
 import { MessagesPage } from './pages/chat/messages/messages.page';
 
 const routes: Routes = [
@@ -11,9 +12,9 @@ const routes: Routes = [
     path: '',
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
   },
-  /* {
-    path: 'messages',
-    component: MessagesPage
+ /*  {
+    path: 'chat',
+    component: ChatPage
   } */
 
 ];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5048c8574..adaccc9db 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -28,11 +28,12 @@ import { FormsModule } from '@angular/forms';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MessagesPage } from './pages/chat/messages/messages.page';
 
 
 @NgModule({
-  declarations: [AppComponent],
-  entryComponents: [],
+  declarations: [AppComponent,MessagesPage,],
+  entryComponents: [MessagesPage],
   imports: [BrowserModule, 
     CommonModule,
     FormsModule,
diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 63aeaa50a..0818b3d90 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeGuard } from '../guards/home.guard';
 import { GroupMessagesPage } from '../pages/chat/group-messages/group-messages.page';
 import { MessagesPage } from '../pages/chat/messages/messages.page';
-import { TestPage } from '../pages/chat/test/test.page';
 import { UserDataResolver } from '../resolvers/userData.resolver';
 
 import { HomePage } from './home.page';
@@ -159,20 +158,21 @@ const routes: Routes = [
             children: [
               {
                 path:'',
-                outlet:'message',
-                loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
+               /*  outlet:'message', */
+                component: MessagesPage
+                //loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
               },
             ]
           },
-          /* {
+          {
             path:'messages',
             outlet:'message',
             component: MessagesPage
-          }, */
+          },
           {
-            path:'test',
-            outlet:'test',
-            component: TestPage
+            path:'groups',
+            outlet:'group',
+            component: GroupMessagesPage
           },
 
         ]
diff --git a/src/app/pages/chat/chat-routing.module.ts b/src/app/pages/chat/chat-routing.module.ts
index da6f2db29..6ed809178 100644
--- a/src/app/pages/chat/chat-routing.module.ts
+++ b/src/app/pages/chat/chat-routing.module.ts
@@ -9,20 +9,8 @@ const routes: Routes = [
   {
     path: '',
     component: ChatPage,
-    children: [
-      {
-        path:'messages',
-        outlet:'message',
-        component: MessagesPage
-      },
-      {
-        path:'groups',
-        outlet:'group',
-        component: GroupMessagesPage
-      },
-    ]
   },
-  {
+ /*  {
     path: 'conversation',
     loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
   },
@@ -40,6 +28,7 @@ const routes: Routes = [
   },
   {
     path: 'messages',
+    outlet:'message',
     loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
   },
   {
@@ -50,7 +39,7 @@ const routes: Routes = [
     path: 'test',
     outlet:'test',
     loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
-  }
+  } */
 
 ];
 
diff --git a/src/app/pages/chat/chat.module.ts b/src/app/pages/chat/chat.module.ts
index 7fcc73c71..0bcb62c12 100644
--- a/src/app/pages/chat/chat.module.ts
+++ b/src/app/pages/chat/chat.module.ts
@@ -9,6 +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';
 
 @NgModule({
   imports: [
@@ -19,7 +21,12 @@ import { RouterModule } from '@angular/router';
     ChatPageRoutingModule,
     RouterModule,
   ],
-  declarations: [ChatPage],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [
+    ChatPage,
+    MessagesPage,
+    GroupMessagesPage,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  entryComponents: [MessagesPage, GroupMessagesPage]
 })
 export class ChatPageModule {}
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index 446951486..aec4ab243 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -40,7 +40,7 @@
                     <div class="item-icon">
                       <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
                     </div>
-                    <div [routerLink]="['/home/chat/messages']" class="item-content"><!-- (click)="openMessages(dm)" -->
+                    <div (click)="openMessagesPage(dm._id)" class="item-content"><!-- (click)="openMessages(dm)" -->
                       <div class="item-title-time">
                         <div class="item-title">
                           <ion-label *ngFor="let user of dm.usernames">
@@ -56,30 +56,6 @@
                       </div>
                     </div>
                   </div>
-                  <div class="item" >
-                    <div class="item-icon">
-                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
-                    </div>
-                    <div [routerLink]="['/home/chat', {
-                      outlets:{
-                        'test': ['test']
-                      }
-                    }]" class="item-content"><!-- (click)="openMessages(dm)" -->
-                      <div class="item-title-time">
-                        <div class="item-title">
-                          <ion-label >
-                            <span>
-                            Tiago
-                          </span>
-                          </ion-label>
-                        </div>
-                        <div class="item-date">23/03/202 12:20</div>
-                      </div>
-                      <div class="item-description">
-                        <ion-label>oI...</ion-label>
-                      </div>
-                    </div>
-                  </div>
               </ion-item-sliding>
             </ion-item-group>
           </ion-list>
@@ -90,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)="openGroupMessages(group)" class="item-content">
+                    <div (click)="openGroupMessagesPage(group._id)" class="item-content">
                       <div class="item-title-time">
                         <div class="item-title">
                           <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
@@ -106,23 +82,16 @@
             </ion-item-group>
             
           </ion-list>
-          <nav>
-            <
-
-          </nav>
         </div>
         </div>
       </div>
       <!-- Aside right -->
-      <div class="aside-content d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
-        <!-- <app-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showMessages"></app-messages>
-        <app-group-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showGroupMessages"></app-group-messages> -->
-        <div>
-          <ion-router-outlet name="test"></ion-router-outlet>
-        </div>
-        <div>
-          <ion-router-outlet name="chat"></ion-router-outlet>
-        </div>
+      <div class="aside-content d-none flex-column height-100">
+        <!-- <ion-button (click)="openMessagesPage()">Messages</ion-button>
+        <ion-button (click)="openGroupMessagesPage('MduvQyrQBejb3xMrY')">Groups</ion-button>
+        <ion-button (click)="destroyComponent()">Destroy</ion-button> -->
+        <app-messages [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
+        <app-group-messages [roomId]="roomId" *ngIf="showGroupMessages" #messagecontainer></app-group-messages>
       </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index cb800df51..f1883eb21 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -39,8 +39,8 @@ ion-content{
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
-  overflow:auto;
-  padding: 30px 20px 0 20px;
+  //overflow:auto;
+  //padding: 30px 20px 0 20px;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
 
@@ -109,7 +109,7 @@ ion-content{
 @media only screen and (min-width: 1024px) {
   .main-content{
     border: 1px solid blue;
-    overflow: auto;
+   
 
     .aside-wrapper{
       width: 40%;
@@ -117,13 +117,14 @@ ion-content{
         font-size: 25px;
       }
     }
-    .aside{
+    /* .aside{
       width: 340px;
-    }
+    } */
     .aside-content{
       width: 60%;
       display: flex !important;
       background-color: white;
+      border: 1px solid green;
     }
     .item{
       .item-icon{
diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts
index 968ce8bd9..630c8f131 100644
--- a/src/app/pages/chat/chat.page.ts
+++ b/src/app/pages/chat/chat.page.ts
@@ -1,5 +1,14 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { 
+  Component, 
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ComponentFactory,
+  Output
+} from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -43,12 +52,23 @@ export class ChatPage implements OnInit {
     showGroupMessages: false,
   }
 
+  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
+  //@ViewChild('groupMessages') child:GroupMessagesPage;
+  componentRef: any;
+
+  roomId:any;
+  showMessages=false;
+  showGroupMessages=false;
+
+  @Output() getRoomInfo;
+
   constructor(
     private http:HttpClient,
     private chatService: ChatService,
     private modalController: ModalController,
     private authService: AuthService,
     private storage:Storage,
+    private resolver: ComponentFactoryResolver,
 
     ) { 
       this.headers = new HttpHeaders();
@@ -73,8 +93,44 @@ export class ChatPage implements OnInit {
       this.load();
     })
 
+    console.log(this.roomId);
+    
+
    
   }
+  destroyComponent() {
+    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; */
+  }
+  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'); */
+    
+  }
+
   
   onSegmentChange(){
     this.load();
diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html
index 0f69171a8..b08b65bd6 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/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">{{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">
diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts
index 7c2a62965..16dde4548 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.ts
+++ b/src/app/pages/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',
diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index e8f28dce2..586a9172b 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -57,6 +57,8 @@
   </div>
 
 </ion-content>
+
+
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index 72515a71d..4d0a0e6f9 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -2,6 +2,7 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
+    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -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;
diff --git a/src/app/pages/chat/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts
index 98ddb095e..1d6e26169 100644
--- a/src/app/pages/chat/messages/messages.page.ts
+++ b/src/app/pages/chat/messages/messages.page.ts
@@ -1,4 +1,4 @@
-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 { AuthService } from 'src/app/services/auth.service';
@@ -12,7 +12,7 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
   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);
diff --git a/src/app/pages/chat/test/test.page.html b/src/app/pages/chat/test/test.page.html
index 53118ae47..63ea42680 100644
--- a/src/app/pages/chat/test/test.page.html
+++ b/src/app/pages/chat/test/test.page.html
@@ -5,5 +5,5 @@
 </ion-header>
 
 <ion-content>
-
+TESTE
 </ion-content>
diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts
index f205bc1cd..6d68c7b70 100644
--- a/src/app/services/chat.service.ts
+++ b/src/app/services/chat.service.ts
@@ -67,6 +67,16 @@ export class ChatService {
     getAllRooms(){
       return this.http.get(environment.apiChatUrl+'rooms.get', this.options);
     }
+    getRoomInfo(roomId:any){
+      let params = new HttpParams();
+      params = params.set("roomId", roomId);
+      let opts = { 
+        headers: this.headers, 
+        params: params 
+      }
+      return this.http.get(environment.apiChatUrl+'rooms.info', opts);
+      
+    }
     customsRooms(params:any){
       let opts = { 
         headers: this.headers,