add websocket support for comments

src/app/components/participant/comment-create-page/comment-create-page.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { Comment } from '../../../models/comment';
+import { CommentService } from '../../../services/http/comment.service';
+import { NotificationService } from '../../../services/util/notification.service';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { User } from '../../../models/user';
+import { CommentListComponent } from '../../shared/comment-list/comment-list.component';
+import { RxStompService } from '@stomp/ng2-stompjs';
+import { CreateComment } from '../../../models/messages/create-comment';
+
+@Component({
+  selector: 'app-comment-create-page',
+  templateUrl: './comment-create-page.component.html',
+  styleUrls: ['./comment-create-page.component.scss']
+})
+export class CommentCreatePageComponent implements OnInit {
+  @ViewChild(CommentListComponent) child: CommentListComponent;
+  roomId: string;
+  roomShortId: string;
+  user: User;
+  private date = new Date(Date.now());
+  subjectForm = new FormControl('', [Validators.required]);
+  bodyForm = new FormControl('', [Validators.required]);
+
+
+  constructor(
+    protected authenticationService: AuthenticationService,
+    private route: ActivatedRoute,
+    private notification: NotificationService,
+    private translationService: TranslateService,
+    private rxStompService: RxStompService) { }
+
+  ngOnInit(): void {
+    this.user = this.authenticationService.getUser();
+    this.roomShortId = this.route.snapshot.paramMap.get('roomId');
+    this.roomId = localStorage.getItem(`roomId`);
+  }
+
+  send(subject: string, body: string): void {
+    subject = subject.trim();
+    body = body.trim();
+    if (!subject && !body) {
+      this.translationService.get('comment-page.error-both-fields').subscribe(translatedMessage => {
+        this.notification.show(translatedMessage);
+      });
+      return;
+    }
+    if (!subject) {
+      this.translationService.get('comment-page.error-title').subscribe(translatedMessage => {
+        this.notification.show(translatedMessage);
+      });
+      return;
+    }
+    if (!body) {
+      this.translationService.get('comment-page.error-comment').subscribe(translatedMessage => {
+        this.notification.show(translatedMessage);
+      });
+      return;
+    }
+    const message = new CreateComment(this.roomId, this.user.id, subject, body);
+    this.rxStompService.publish({
+      destination: `/queue/comment.command`,
+      body: JSON.stringify(message),
+      headers: {
+        'content-type': 'application/json'
+      }
+    });
+
+    /*this.commentService.addComment({
+      id: '',
+      roomId: this.roomId,
+      userId: this.user.id,
+      subject: subject,
+      body: body,
+      creationTimestamp: this.date.getTime(),
+      read: false,
+      revision: ''
+    } as Comment).subscribe(() => {
+      this.child.getComments();
+      this.notification.show(`Comment '${subject}' successfully created.`);
+      this.goBack();
+    });*/
+  }
+}
+

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

@@ -3,6 +3,8 @@ import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
+import { RxStompService } from '@stomp/ng2-stompjs';
+import { Message } from '@stomp/stompjs';
 
 @Component({
   selector: 'app-comment-list',
@@ -19,12 +21,17 @@ export class CommentListComponent implements OnInit {
   constructor(private commentService: CommentService,
     private translateService: TranslateService,
     protected langService: LanguageService) {
+    private rxStompService: RxStompService) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
   ngOnInit() {
     this.roomId = localStorage.getItem(`roomId`);
+    this.comments = [];
     this.hideCommentsList = false;
+    this.rxStompService.watch(`/queue/${this.roomId}.comment.stream`).subscribe((message: Message) => {
+      this.parseIncomingMessage(message);
+    });
     this.getComments();
     this.translateService.use(localStorage.getItem('currentLang'));
   }
@@ -40,4 +47,16 @@ export class CommentListComponent implements OnInit {
   searchComments(term: string): void {
     this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
   }
+
+  parseIncomingMessage(message: Message) {
+    console.log(message);
+    const payload = JSON.parse(message.body).payload;
+    const c = new Comment();
+    c.roomId = this.roomId;
+    c.subject = payload.subject;
+    c.body = payload.body;
+
+    this.comments.concat(c);
+  }
 }
+

src/app/models/messages/create-comment.ts

+export class CreateComment {
+    type: string;
+    payload: {
+        roomId: string;
+        creatorId: string;
+        subject: string;
+        body: string;
+    };
+
+    constructor(roomId: string, creatorId: string, subject: string, body: string) {
+        this.type = 'CreateComment';
+        this.payload = {
+            roomId: roomId,
+            creatorId: creatorId,
+            subject: subject,
+            body: body
+        };
+    }
+}

src/app/rx-stomp.config.ts

@@ -18,6 +18,6 @@ export const myRxStompConfig: InjectableRxStompConfig = {
   // It can be quite verbose, not recommended in production
   // Skip this key to stop logging to console
   debug: (msg: string): void => {
-    // console.log(new Date(), 'STOMP debug: ' + msg);
+    console.log(new Date(), 'STOMP debug: ' + msg);
   }
 };