Skip to content

Commit

Permalink
refactor(Project Authoring): Move concurrent authors subscription to …
Browse files Browse the repository at this point in the history
…component (#1421)
  • Loading branch information
hirokiterashima authored Sep 18, 2023
1 parent c6c1d64 commit 2c2a7ae
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 59 deletions.
Original file line number Diff line number Diff line change
@@ -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();
}
Original file line number Diff line number Diff line change
@@ -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();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();

Expand Down Expand Up @@ -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();
Expand All @@ -67,24 +63,19 @@ 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();
}

private updateShowProjectView(): void {
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')}`);
}
Expand Down Expand Up @@ -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);
});
}
}
12 changes: 6 additions & 6 deletions src/messages.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit 2c2a7ae

Please sign in to comment.