Joining and leaving rooms

src/app/services/chat.service.ts

@@ -35,6 +35,55 @@ export class ChatService {
     return matrixClientPromise;
   }
 
+  getUserId = (): boolean => {
+    if (this.matrixClient === undefined) { return null; }
+
+    return this.matrixClient.getUserId;
+  }
+
+  isLogged = (): boolean => {
+    return (this.getUserId() !== null);
+  }
+
+  getRoomMembers = (roomId: string): RoomMember[] => {
+    const room: Room = this.matrixClient?.getRoom(roomId) as Room;
+    return room?.getJoinedMembers();
+  }
+
+  isInRoom = (roomId: string): boolean => {
+    if (!this.isLogged()) { return false; }
+
+    const room: Room = this.matrixClient.getRoom(roomId) as Room;
+    if (room === null) { return false; }
+
+    return room.getMyMembership() === 'join';
+  }
+
+  isInvitedToRoom = (roomId: string): boolean => {
+    if (!this.isLogged()) { return false; }
+
+    const room: Room = this.matrixClient.getRoom(roomId) as Room;
+    if (room === null) { return false; }
+
+    return room.getMyMembership() === 'invite';
+  }
+
+  sendMessage = (roomId: string, body: string): Promise<void> => {
+    const message = {
+      body,
+      msgtype: 'm.text'
+    };
+    return this.matrixClient.sendMessage(roomId, message);
+  }
+
+  joinRoom = async (roomId: string): Promise<Room> => {
+    return this.matrixClient.joinRoom(roomId);
+  }
+
+  leaveRoom = async (roomId: string): Promise<void> => {
+    return this.matrixClient.leave(roomId);
+  }
+
   private async loginWithToken(loginToken: string): Promise<MatrixClient> {
     const matrixLogin = await this.http.post<MatrixLoginDto>(
       'http://synapse:8008/_matrix/client/r0/login',
@@ -64,17 +113,4 @@ export class ChatService {
 
     return this.matrixClient;
   }
-
-  sendMessage = (roomId: string, body: string) => {
-    const message = {
-      body,
-      msgtype: 'm.text'
-    };
-    return this.matrixClient.sendMessage(roomId, message);
-  }
-
-  getRoomMembers(roomId: string): RoomMember[] {
-    const room: Room = this.matrixClient?.getRoom(roomId) as Room;
-    return room?.getJoinedMembers();
-  }
 }

src/app/views/chat/chat.component.html

@@ -1,28 +1,40 @@
-<mat-grid-list cols="5">
-  <mat-grid-tile colspan=4>
-    <mat-list #messageList class="chat-messages">
-      <mat-list-item #messageItem *ngFor="let message of messages; trackBy: getMessageId">
-        <h3 matLine> {{message.getSender()}} </h3>
-        <p matLine>
-          {{message.getContent().body}}
-        </p>
-      </mat-list-item>
-    </mat-list>
-  </mat-grid-tile>
-
-  <mat-grid-tile>
-    <mat-list>
-      Miembros
-    </mat-list>
-  </mat-grid-tile>
-
-  <mat-grid-tile colspan=4>
-    <mat-form-field class="send-message-input">
-      <input [(ngModel)]="messageInput" (keyup.enter)="sendMessage()" matInput placeholder="Type message here">
-    </mat-form-field>
-  </mat-grid-tile>
-
-  <mat-grid-tile colspan=1>
-    <button mat-raised-button class="btn btn-default" (click)="sendMessage()">Send</button>
-  </mat-grid-tile>
-</mat-grid-list>
+<ng-container *ngIf="!isLogged;else elseIfBlock">
+  <p>Login for seeing the chat.</p>
+</ng-container>
+<ng-template #elseIfBlock>
+    <ng-container *ngIf="!isInRoom;else elseBlock">
+      <button mat-raised-button class="btn btn-default" (click)="join()">Join chat</button>
+    </ng-container>
+</ng-template>
+<ng-template #elseBlock>
+  <mat-grid-list cols="5">
+    <mat-grid-tile colspan=4>
+      <mat-list #messageList class="chat-messages">
+        <mat-list-item #messageItem *ngFor="let message of messages; trackBy: getMessageId">
+          <h3 matLine> {{message.getSender()}} </h3>
+          <p matLine>
+            {{message.getContent().body}}
+          </p>
+        </mat-list-item>
+      </mat-list>
+    </mat-grid-tile>
+  
+    <mat-grid-tile>
+      <mat-list>
+        <mat-list-item *ngFor="let member of members">
+          {{ member.name }}
+        </mat-list-item>
+      </mat-list>
+    </mat-grid-tile>
+  
+    <mat-grid-tile colspan=4>
+      <mat-form-field class="send-message-input">
+        <input [(ngModel)]="messageInput" (keyup.enter)="sendMessage()" matInput placeholder="Type message here">
+      </mat-form-field>
+    </mat-grid-tile>
+  
+    <mat-grid-tile colspan=1>
+      <button mat-raised-button class="btn btn-default" (click)="sendMessage()">Send</button>
+    </mat-grid-tile>
+  </mat-grid-list>
+</ng-template>

src/app/views/chat/chat.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent, RoomMember } from 'matrix-js-sdk/src/models/event';
 import { ChatService } from 'src/app/services/chat.service';
 
 
@@ -31,6 +31,8 @@ export class ChatComponent implements OnInit, AfterViewInit {
         }
       });
     }
+    console.log('Is in room: ' + this.chatService.isInRoom(this.roomId));
+    console.log('Is invited to room: ' + this.chatService.isInvitedToRoom(this.roomId));
   }
 
   ngAfterViewInit(): void {
@@ -48,12 +50,38 @@ export class ChatComponent implements OnInit, AfterViewInit {
     this.messageInput = '';
   }
 
+  join(): void {
+    this.chatService.joinRoom(this.roomId);
+  }
+
+  leave(): void {
+    this.chatService.leaveRoom(this.roomId);
+  }
+
   getMessageId(index: number, message: any): string {
     return message.getId();
   }
 
+  get isLogged(): boolean {
+    return this.chatService.isLogged();
+  }
+
+  get isInRoom(): boolean {
+    return this.chatService.isInRoom(this.roomId);
+  }
+
+  get isInvitedToRoom(): boolean {
+    return this.chatService.isInvitedToRoom(this.roomId);
+  }
+
+  get members(): RoomMember[] {
+    return this.chatService.getRoomMembers(this.roomId);
+  }
+
   private scrollToLastMessage(): void {
-    this.messageList.nativeElement.scrollTop = this.messageItems.last?.nativeElement?.offsetTop;
+    if (this.messageList) {
+      this.messageList.nativeElement.scrollTop = this.messageItems.last?.nativeElement?.offsetTop;
+    }
   }
 
 }