Add hook to trigger pre room load to authenticate the user

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -112,7 +112,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     }
   }
 
-  afterRoomLoadHook() {
+  postRoomLoadHook() {
     if (this.moderationEnabled) {
       this.viewModuleCount = this.viewModuleCount + 1;
       this.commentService.countByRoomId(this.room.id, false).subscribe(commentCounter => {

src/app/components/participant/room-participant-page/room-participant-page.component.ts

@@ -15,6 +15,8 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { EventService } from '../../../services/util/event.service';
 import { KeyboardUtils } from '../../../utils/keyboard';
 import { KeyboardKey } from '../../../utils/keyboard/keys';
+import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
 
 @Component({
   selector: 'app-room-participant-page',
@@ -90,14 +92,20 @@ export class RoomParticipantPageComponent extends RoomPageComponent implements O
 
   }
 
-  afterRoomLoadHook() {
+  preRoomLoadHook(): Observable<any> {
     this.authenticationService.watchUser.subscribe( user => this.user = user);
     if (!this.user) {
-      this.authenticationService.guestLogin(UserRole.PARTICIPANT).subscribe(() => {
-        this.roomService.addToHistory(this.room.id);
-      });
+      return this.authenticationService.guestLogin(UserRole.PARTICIPANT).pipe(map((user) => {
+        return user;
+      }));
+    } else {
+      return of(this.user);
     }
+  }
+
+  postRoomLoadHook() {
     this.authenticationService.setAccess(this.room.shortId, UserRole.PARTICIPANT);
     this.authenticationService.checkAccess(this.room.shortId);
+    this.roomService.addToHistory(this.room.id);
   }
 }

src/app/components/shared/comment-list/comment-list.component.ts

@@ -91,54 +91,53 @@ export class CommentListComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.initRoom(() => {
-      this.authenticationService.watchUser.subscribe(newUser => {
-        if (newUser) {
-          this.user = newUser;
-          this.userRole = this.user.role;
-          if (this.userRole === 0) {
-            this.voteService.getByRoomIdAndUserID(this.roomId, this.user.id).subscribe(votes => {
-              for (const v of votes) {
-                this.commentVoteMap.set(v.commentId, v);
-              }
-            });
-          }
-        }
-      });
-      this.route.params.subscribe(params => {
-        this.shortId = params['shortId'];
-        this.authenticationService.guestLogin(UserRole.PARTICIPANT).subscribe(r => {
-          this.roomService.getRoomByShortId(this.shortId).subscribe(room => {
-            this.room = room;
-            this.moderationEnabled = this.room.moderated;
-            this.directSend = this.room.directSend;
-            localStorage.setItem('moderationEnabled', JSON.stringify(this.moderationEnabled));
-            if (!this.authenticationService.hasAccess(this.shortId, UserRole.PARTICIPANT)) {
-              this.roomService.addToHistory(this.room.id);
-              this.authenticationService.setAccess(this.shortId, UserRole.PARTICIPANT);
+    this.authenticationService.watchUser.subscribe(newUser => {
+      if (newUser) {
+        this.user = newUser;
+        this.userRole = this.user.role;
+        if (this.userRole === 0) {
+          this.voteService.getByRoomIdAndUserID(this.roomId, this.user.id).subscribe(votes => {
+            for (const v of votes) {
+              this.commentVoteMap.set(v.commentId, v);
             }
-            this.subscribeCommentStream();
-            this.commentService.getAckComments(this.roomId)
-              .subscribe(comments => {
-                this.comments = comments;
-                this.getComments();
-              });
-            /**
-             if (this.userRole === UserRole.PARTICIPANT) {
-              this.openCreateDialog();
-            }
-             */
           });
+        }
+      }
+    });
+    this.route.params.subscribe(params => {
+      this.shortId = params['shortId'];
+      this.authenticationService.guestLogin(UserRole.PARTICIPANT).subscribe(r => {
+        this.roomService.getRoomByShortId(this.shortId).subscribe(room => {
+          this.room = room;
+          this.roomId = room.id;
+          this.moderationEnabled = this.room.moderated;
+          this.directSend = this.room.directSend;
+          localStorage.setItem('moderationEnabled', JSON.stringify(this.moderationEnabled));
+          if (!this.authenticationService.hasAccess(this.shortId, UserRole.PARTICIPANT)) {
+            this.roomService.addToHistory(this.room.id);
+            this.authenticationService.setAccess(this.shortId, UserRole.PARTICIPANT);
+          }
+          this.subscribeCommentStream();
+          this.commentService.getAckComments(this.room.id)
+            .subscribe(comments => {
+              this.comments = comments;
+              this.getComments();
+            });
+          /**
+           if (this.userRole === UserRole.PARTICIPANT) {
+            this.openCreateDialog();
+          }
+            */
         });
       });
-      this.currentSort = this.votedesc;
-      this.hideCommentsList = false;
-      this.translateService.use(localStorage.getItem('currentLang'));
-      this.deviceType = localStorage.getItem('deviceType');
-      this.isSafari = localStorage.getItem('isSafari');
-      this.translateService.get('comment-list.search').subscribe(msg => {
-        this.searchPlaceholder = msg;
-      });
+    });
+    this.currentSort = this.votedesc;
+    this.hideCommentsList = false;
+    this.translateService.use(localStorage.getItem('currentLang'));
+    this.deviceType = localStorage.getItem('deviceType');
+    this.isSafari = localStorage.getItem('isSafari');
+    this.translateService.get('comment-list.search').subscribe(msg => {
+      this.searchPlaceholder = msg;
     });
   }
 
@@ -149,15 +148,6 @@ export class CommentListComponent implements OnInit, OnDestroy {
     this.titleService.resetTitle();
   }
 
-  initRoom(action: () => void) {
-    const spl = location.pathname.split('/');
-    this.shortId = spl[spl.length - 2];
-    this.roomService.getRoomByShortId(this.shortId).subscribe(room => {
-      this.roomId = room.id;
-      action();
-    });
-  }
-
   checkScroll(): void {
     const currentScroll = document.documentElement.scrollTop;
     this.scroll = currentScroll >= 65;
@@ -430,7 +420,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   }
 
   subscribeCommentStream() {
-    this.commentStream = this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
+    this.commentStream = this.wsCommentService.getCommentStream(this.room.id).subscribe((message: Message) => {
       this.parseIncomingMessage(message);
     });
   }

src/app/components/shared/room-page/room-page.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Room } from '../../../models/room';
+import { User } from '../../../models/user';
 import { RoomService } from '../../../services/http/room.service';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
@@ -7,7 +8,7 @@ import { WsCommentServiceService } from '../../../services/websockets/ws-comment
 import { CommentService } from '../../../services/http/comment.service';
 import { EventService } from '../../../services/util/event.service';
 import { Message, IMessage } from '@stomp/stompjs';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of } from 'rxjs';
 
 @Component({
   selector: 'app-room-page',
@@ -46,31 +47,38 @@ export class RoomPageComponent implements OnInit, OnDestroy {
     }
   }
 
-  protected afterRoomLoadHook() {
+  protected preRoomLoadHook(): Observable<any> {
+    return of('');
+  }
+
+  protected postRoomLoadHook() {
 
   }
 
   initializeRoom(id: string): void {
-    this.roomService.getRoomByShortId(id).subscribe(room => {
-      this.room = room;
-      this.isLoading = false;
-      this.moderationEnabled = this.room.moderated;
-      localStorage.setItem('moderationEnabled', String(this.moderationEnabled));
-      this.commentService.countByRoomId(this.room.id, true)
-        .subscribe(commentCounter => {
-          this.commentCounter = commentCounter;
+    this.preRoomLoadHook().subscribe(user => {
+      this.roomService.getRoomByShortId(id).subscribe(room => {
+        this.room = room;
+        this.isLoading = false;
+        console.log(this.room.moderated);
+        this.moderationEnabled = this.room.moderated;
+        localStorage.setItem('moderationEnabled', String(this.moderationEnabled));
+        this.commentService.countByRoomId(this.room.id, true)
+          .subscribe(commentCounter => {
+            this.commentCounter = commentCounter;
+          });
+        this.commentWatch = this.wsCommentService.getCommentStream(this.room.id);
+        this.sub = this.commentWatch.subscribe((message: Message) => {
+          const msg = JSON.parse(message.body);
+          const payload = msg.payload;
+          if (msg.type === 'CommentCreated') {
+            this.commentCounter = this.commentCounter + 1;
+          } else if (msg.type === 'CommentDeleted') {
+            this.commentCounter = this.commentCounter - 1;
+          }
         });
-      this.commentWatch = this.wsCommentService.getCommentStream(this.room.id);
-      this.sub = this.commentWatch.subscribe((message: Message) => {
-        const msg = JSON.parse(message.body);
-        const payload = msg.payload;
-        if (msg.type === 'CommentCreated') {
-          this.commentCounter = this.commentCounter + 1;
-        } else if (msg.type === 'CommentDeleted') {
-          this.commentCounter = this.commentCounter - 1;
-        }
+        this.postRoomLoadHook();
       });
-      this.afterRoomLoadHook();
     });
   }