First steps with chat

src/app/pages/travel/travel.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AbilityService } from 'src/app/services/ability.service';
+import { ChatService } from 'src/app/services/chat.service';
 import { Travel, TravelId } from '../../entities/travel';
 import { ApiService } from '../../services/api.service';
 
@@ -18,7 +19,8 @@ export class TravelComponent implements OnInit {
     private router: Router,
     private abilityService: AbilityService,
     private apiService: ApiService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private chatService: ChatService
   ) { }
 
   ngOnInit(): void {
@@ -80,6 +82,16 @@ export class TravelComponent implements OnInit {
     .subscribe(res => {
       if (res.success) {
         this.travel = Object.assign( new Travel(), res.data );
+        console.log({travel: this.travel});
+
+        this.chatService.getRoomMessages(this.travel.matrixRoomId);
+
+        this.chatService.listemRoomMessages(this.travel.matrixRoomId, (event: any) => {
+          console.log(
+            // the room name will update with m.room.name events automatically
+            "%s: %s", event.getSender(), event.getContent().body
+          );
+        });
       }
       else {
         console.error('Error getting travel ' + this.travelId + ': ' + res.error);

src/app/services/chat.service.ts

@@ -8,6 +8,8 @@ import * as matrix from 'matrix-js-sdk';
   providedIn: 'root'
 })
 export class ChatService {
+  private client: any;
+
   constructor(
     private http: HttpClient
   ) { }
@@ -27,13 +29,52 @@ export class ChatService {
     ).toPromise();
     console.log('LOGGED TO CHAT');
     console.log(res);
-    const client = matrix.createClient({
+    this.client = matrix.createClient({
       baseUrl: 'http://localhost:8008',
       accessToken: res['access_token'],
       userId: res['user_id']
     });
-    client.publicRooms((err: any, data: any) => {
-      console.log('Public Rooms: %s', JSON.stringify(data));
+
+    await this.client.startClient({ initialSyncLimit: 10 });
+
+    this.client.once('sync', function (state, prevState, res) {
+      if (state === 'PREPARED') {
+        console.log("CHAT SYNC FINISHED");
+      } else {
+        console.log(state);
+      }
+    });
+
+    // this.client.publicRooms((err: any, data: any) => {
+    //   console.log('Public Rooms: %s', JSON.stringify(data));
+    // });
+  }
+
+  getRoomMessages(roomId: string): void {
+    const room = this.client?.getRoom(roomId);
+    const members = room?.getJoinedMembers();
+    members?.forEach(member => {
+      console.log(member);
+    });
+
+    room?.timeline.forEach(t => {
+      console.log(JSON.stringify(t.event));
+    });
+  }
+
+  listemRoomMessages(roomId: string, handle: (event: any) => void): void {
+    this.client?.on('Room.timeline', function (event, room, toStartOfTimeline) {
+      if (room.roomId !== roomId) {
+        return; // only listen to specified room
+      }
+      if (toStartOfTimeline) {
+        return; // don't print paginated results
+      }
+      if (event.getType() !== 'm.room.message') {
+        return; // only print messages
+      }
+
+      handle(event);
     });
   }
 }

src/app/views/list/list.component.html

@@ -12,7 +12,7 @@
     <ng-container matColumnDef="departureDate">
       <mat-header-cell *matHeaderCellDef mat-sort-header>Departure date</mat-header-cell>
       <mat-cell *matCellDef="let travel">{{
-        travel.departureDate | date: 'yyyy-MM-dd hh:mm'
+        travel.departureDate | date: 'yyyy-MM-dd h:mm'
         }}</mat-cell>
     </ng-container>
 
@@ -31,7 +31,7 @@
     </ng-container>
 
     <ng-container matColumnDef="availablePlaces">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Available places</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef>Available places</mat-header-cell>
       <mat-cell *matCellDef="let travel">{{ travel | availablePlaces }}</mat-cell>
     </ng-container>