From 2c2a7ae86fc958b07f12d5e442ad4d7103c08463 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 18 Sep 2023 08:45:56 -0700
Subject: [PATCH] refactor(Project Authoring): Move concurrent authors
 subscription to component (#1421)

---
 ...ncurrent-authors-message.component.spec.ts | 42 +++++++++++------
 .../concurrent-authors-message.component.ts   | 46 ++++++++++++++-----
 .../project-authoring.component.html          |  2 +-
 .../project-authoring.component.ts            | 31 ++-----------
 src/messages.xlf                              | 12 ++---
 5 files changed, 74 insertions(+), 59 deletions(-)

diff --git a/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts b/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts
index 8584d493c2b..592173c0730 100644
--- a/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts
+++ b/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts
@@ -1,48 +1,62 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ConcurrentAuthorsMessageComponent } from './concurrent-authors-message.component';
 import { ConfigService } from '../../services/configService';
+import { By } from '@angular/platform-browser';
+import { TeacherProjectService } from '../../services/teacherProjectService';
+import { of } from 'rxjs';
 
 class MockConfigService {
   getMyUsername(): string {
     return 'aa';
   }
+  getWebSocketURL(): string {
+    return '/websocket';
+  }
 }
 
+class MockTeacherProjectService {}
+
 let component: ConcurrentAuthorsMessageComponent;
 let fixture: ComponentFixture<ConcurrentAuthorsMessageComponent>;
 describe('ConcurrentAuthorsMessageComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ConcurrentAuthorsMessageComponent],
-      providers: [{ provide: ConfigService, useClass: MockConfigService }]
+      providers: [
+        { provide: ConfigService, useClass: MockConfigService },
+        { provide: TeacherProjectService, useClass: MockTeacherProjectService }
+      ]
     });
     fixture = TestBed.createComponent(ConcurrentAuthorsMessageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
-  ngOnChanges();
+  ngOnInit();
 });
 
-function ngOnChanges() {
-  describe('ngOnChanges()', () => {
-    it('should set empty message when there are no other authors', () => {
-      expectMessage(['aa'], '');
+function ngOnInit() {
+  describe('ngOnInit()', () => {
+    it('set empty message when there are no other authors', () => {
+      expectMessage('["aa"]', '');
     });
-    it('should set message to other authors when there are other authors', () => {
+    it('set message to author when there is one other author', () => {
       expectMessage(
-        ['aa', 'bb'],
+        '["aa","bb"]',
         "Also currently editing this unit: bb. Be careful not to overwrite each other's work!"
       );
+    });
+    it('set message to comma-separated authors when there are two or more other authors', () => {
       expectMessage(
-        ['aa', 'bb', 'cc'],
+        '["aa","bb","cc"]',
         "Also currently editing this unit: bb, cc. Be careful not to overwrite each other's work!"
       );
     });
   });
 }
 
-function expectMessage(authors: string[], message: string) {
-  component.authors = authors;
-  component.ngOnChanges();
-  expect(component.message).toEqual(message);
+function expectMessage(authors: string, message: string) {
+  const spy = spyOn<any>(component['rxStomp'], 'watch').and.returnValue(of({ body: authors }));
+  component.ngOnInit();
+  fixture.detectChanges();
+  expect(fixture.debugElement.query(By.css('b')).nativeElement.innerHTML).toEqual(message);
+  expect(spy).toHaveBeenCalled();
 }
diff --git a/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts b/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts
index 6821d6f0888..be12101bb33 100644
--- a/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts
+++ b/src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts
@@ -1,23 +1,47 @@
 import { Component, Input } from '@angular/core';
 import { ConfigService } from '../../services/configService';
+import { RxStomp } from '@stomp/rx-stomp';
+import { Message } from '@stomp/stompjs';
+import { TeacherProjectService } from '../../services/teacherProjectService';
 
 @Component({
   selector: 'concurrent-authors-message',
   templateUrl: 'concurrent-authors-message.component.html'
 })
 export class ConcurrentAuthorsMessageComponent {
-  @Input() authors: string[] = [];
-  message: string = '';
+  protected message: string = '';
+  private myUsername: string;
+  @Input() private projectId: number;
+  private rxStomp: RxStomp = new RxStomp();
 
-  constructor(private configService: ConfigService) {}
+  constructor(private configService: ConfigService, private projectService: TeacherProjectService) {
+    this.myUsername = this.configService.getMyUsername();
+    this.rxStomp.configure({
+      brokerURL: this.configService.getWebSocketURL()
+    });
+  }
+
+  ngOnInit() {
+    this.rxStomp.activate();
+    this.rxStomp.connected$.subscribe(() => {
+      this.projectService.notifyAuthorProjectBegin(this.projectId);
+    });
+    this.subscribeToCurrentAuthors();
+  }
+
+  private subscribeToCurrentAuthors(): void {
+    this.rxStomp.watch(`/topic/current-authors/${this.projectId}`).subscribe((message: Message) => {
+      const otherAuthors = JSON.parse(message.body).filter((author) => author != this.myUsername);
+      this.message =
+        otherAuthors.length > 0
+          ? $localize`Also currently editing this unit: ${otherAuthors.join(
+              ', '
+            )}. Be careful not to overwrite each other's work!`
+          : '';
+    });
+  }
 
-  ngOnChanges() {
-    this.authors.splice(this.authors.indexOf(this.configService.getMyUsername()), 1);
-    this.message =
-      this.authors.length > 0
-        ? $localize`Also currently editing this unit: ${this.authors.join(
-            ', '
-          )}. Be careful not to overwrite each other's work!`
-        : '';
+  ngOnDestroy(): void {
+    this.rxStomp.deactivate();
   }
 }
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
index c32736921fb..0c723a9751b 100644
--- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
+++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
@@ -3,7 +3,7 @@
     <div class="node-content md-whiteframe-1dp" fxLayout="row wrap">
       <div class="main-content">
         <concurrent-authors-message
-          [authors]="authors"
+          [projectId]="projectId"
           class="concurrent-authors-message center app-background"
         ></concurrent-authors-message>
         <router-outlet></router-outlet>
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
index 71b63dc7b2d..6a6d8c393cf 100644
--- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
@@ -5,8 +5,6 @@ import { TeacherProjectService } from '../../services/teacherProjectService';
 import { TeacherDataService } from '../../services/teacherDataService';
 import * as $ from 'jquery';
 import { Subscription, filter } from 'rxjs';
-import { Message } from '@stomp/stompjs';
-import { RxStomp } from '@stomp/rx-stomp';
 import { temporarilyHighlightElement } from '../../common/dom/dom';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
@@ -17,15 +15,13 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 })
 export class ProjectAuthoringComponent {
   protected groupNodeSelected: boolean = false;
-  protected authors: string[] = [];
   private idToNode: any;
   protected inactiveGroupNodes: any[];
   private inactiveNodes: any[];
   protected inactiveStepNodes: any[];
   protected items: any;
-  private projectId: number;
+  protected projectId: number;
   protected showProjectView: boolean = true;
-  private rxStomp: RxStomp;
   protected stepNodeSelected: boolean = false;
   private subscriptions: Subscription = new Subscription();
 
@@ -53,7 +49,7 @@ export class ProjectAuthoringComponent {
     this.inactiveStepNodes = this.projectService.getInactiveStepNodes();
     this.inactiveNodes = this.projectService.getInactiveNodes();
     this.idToNode = this.projectService.getIdToNode();
-    this.subscribeToCurrentAuthors(this.projectId);
+    this.projectService.notifyAuthorProjectBegin(this.projectId);
     this.subscriptions.add(
       this.projectService.refreshProject$.subscribe(() => {
         this.refreshProject();
@@ -67,12 +63,12 @@ export class ProjectAuthoringComponent {
     );
 
     window.onbeforeunload = (event) => {
-      this.endProjectAuthoringSession();
+      this.projectService.notifyAuthorProjectEnd(this.projectId);
     };
   }
 
   ngOnDestroy(): void {
-    this.endProjectAuthoringSession();
+    this.projectService.notifyAuthorProjectEnd(this.projectId);
     this.subscriptions.unsubscribe();
   }
 
@@ -80,11 +76,6 @@ export class ProjectAuthoringComponent {
     this.showProjectView = /\/teacher\/edit\/unit\/(\d*)$/.test(this.router.url);
   }
 
-  private endProjectAuthoringSession(): void {
-    this.rxStomp.deactivate();
-    this.projectService.notifyAuthorProjectEnd(this.projectId);
-  }
-
   protected previewProject(): void {
     window.open(`${this.configService.getConfigParam('previewProjectURL')}`);
   }
@@ -319,18 +310,4 @@ export class ProjectAuthoringComponent {
       this.getSelectedNodeIds().every((nodeId) => this.projectService.isApplicationNode(nodeId))
     );
   }
-
-  private subscribeToCurrentAuthors(projectId: number): void {
-    this.rxStomp = new RxStomp();
-    this.rxStomp.configure({
-      brokerURL: this.configService.getWebSocketURL()
-    });
-    this.rxStomp.activate();
-    this.rxStomp.watch(`/topic/current-authors/${projectId}`).subscribe((message: Message) => {
-      this.authors = JSON.parse(message.body);
-    });
-    this.rxStomp.connected$.subscribe(() => {
-      this.projectService.notifyAuthorProjectBegin(this.projectId);
-    });
-  }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
index 812bfe1466d..cbc7683329a 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -9676,12 +9676,12 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
       </trans-unit>
       <trans-unit id="1318680729593701201" datatype="html">
-        <source>Also currently editing this unit: <x id="PH" equiv-text="this.authors.join(
-            &apos;, &apos;
-          )"/>. Be careful not to overwrite each other&apos;s work!</source>
+        <source>Also currently editing this unit: <x id="PH" equiv-text="otherAuthors.join(
+              &apos;, &apos;
+            )"/>. Be careful not to overwrite each other&apos;s work!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts</context>
-          <context context-type="linenumber">18,20</context>
+          <context context-type="linenumber">36,38</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5763042719559545946" datatype="html">
@@ -11991,14 +11991,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Are you sure you want to delete the selected item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">123</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1189930234736223663" datatype="html">
         <source>Are you sure you want to delete the <x id="PH" equiv-text="selectedNodeIds.length"/> selected items?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">133</context>
+          <context context-type="linenumber">124</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e8fb2ceb6f8d4c3e90a6a688e9024461e67f44f0" datatype="html">