refactor(ProjectLibraryService): getLibraryProjects() returns Observa…

…ble (#1443)
WISE-Community · Oct 11, 2023 · 8ac83f4 · 8ac83f4
1 parent 360ecd4
commit 8ac83f4
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 83 deletions.
diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-unit',
@@ -11,6 +12,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class ChooseImportUnitComponent {
   protected libraryProjects: any[];
   protected myProjects: any[];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
@@ -21,11 +23,15 @@ export class ChooseImportUnitComponent {
 
   ngOnInit(): void {
     this.myProjects = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjects = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
-    });
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjects = libraryProjects;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   protected chooseProject(project: any): void {

diff --git a/src/app/services/projectLibraryService.spec.ts b/src/app/services/projectLibraryService.spec.ts
@@ -6,21 +6,6 @@ import { ProjectLibraryService } from '../../assets/wise5/services/projectLibrar
 let configService: ConfigService;
 let http: HttpTestingController;
 let service: ProjectLibraryService;
-const getLibraryProjectsURL = '/api/project/library';
-const libraryProjects = [
-  {
-    children: [
-      { id: 3, name: 'three' },
-      { id: 1, name: 'one' }
-    ]
-  },
-  {
-    children: [
-      { id: 2, name: 'two' },
-      { id: 1, name: 'one' }
-    ]
-  }
-];
 
 describe('ProjectLibraryService', () => {
   beforeEach(() => {
@@ -33,56 +18,32 @@ describe('ProjectLibraryService', () => {
     configService = TestBed.inject(ConfigService);
   });
   getLibraryProjects();
-  sortAndFilterUniqueProjects();
-  filterUniqueProjects();
 });
 
 function getLibraryProjects() {
-  describe('getLibraryProjects', () => {
-    it('should get the library projects', () => {
-      spyOnLibraryProjectsURLFromConfig();
-      const result = service.getLibraryProjects();
-      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
-      result.then((projects) => {
-        expect(projects).toEqual(libraryProjects);
+  describe('getLibraryProjects()', () => {
+    const getLibraryProjectsURL = '/api/project/library';
+    const unit1 = { id: 1, name: 'one' };
+    const unit2 = { id: 2, name: 'two' };
+    const unit3 = { id: 3, name: 'three' };
+    const libraryProjects = [
+      {
+        children: [unit3, unit1]
+      },
+      {
+        children: [unit2, unit1]
+      }
+    ];
+    beforeEach(() => {
+      spyOn(configService, 'getConfigParam').and.callFake(() => {
+        return getLibraryProjectsURL;
       });
     });
-  });
-}
-
-function spyOnLibraryProjectsURLFromConfig() {
-  spyOn(configService, 'getConfigParam').and.callFake((param) => {
-    return getLibraryProjectsURL;
-  });
-}
-
-function sortAndFilterUniqueProjects() {
-  describe('sortAndFilterUniqueProjects', () => {
-    it('should filter and sort unique projects', () => {
-      const result = service.sortAndFilterUniqueProjects(libraryProjects);
-      expect(result).toEqual([
-        { id: 3, name: 'three' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ]);
-    });
-  });
-}
-
-function filterUniqueProjects() {
-  describe('filterUniqueProjects', () => {
-    it('should filter unique projects based on id', () => {
-      const nonUniqueProjects = [
-        { id: 3, name: 'three' },
-        { id: 1, name: 'one' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ];
-      const uniqueProjects = service.filterUniqueProjects(nonUniqueProjects);
-      expect(uniqueProjects.length).toEqual(3);
-      expect(uniqueProjects[0].id).toEqual(3);
-      expect(uniqueProjects[1].id).toEqual(1);
-      expect(uniqueProjects[2].id).toEqual(2);
+    it('gets the library projects, sorted and filtered', () => {
+      service.getLibraryProjects().subscribe((projects) => {
+        expect(projects).toEqual([unit3, unit2, unit1]);
+      });
+      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
     });
   });
 }
diff --git a/...uthoringTool/importComponent/choose-import-component/choose-import-component.component.ts b/...uthoringTool/importComponent/choose-import-component/choose-import-component.component.ts
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
 import { ImportComponentService } from '../../../services/importComponentService';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-component',
@@ -21,6 +22,7 @@ export class ChooseImportComponentComponent implements OnInit {
   protected libraryProjectsList: any = [];
   protected myProjectsList: any = [];
   nodesInOrder: any[] = [];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
@@ -33,18 +35,22 @@ export class ChooseImportComponentComponent implements OnInit {
     private router: Router
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.importProjectItems = [];
     this.importMyProjectId = null;
     this.importLibraryProjectId = null;
     this.importProjectId = null;
     this.importProject = null;
     this.myProjectsList = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjectsList = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
-    });
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjectsList = libraryProjects;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   showMyImportProject(importProjectId: number): void {

diff --git a/src/assets/wise5/services/projectLibraryService.ts b/src/assets/wise5/services/projectLibraryService.ts
@@ -1,22 +1,19 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { unique } from 'jquery';
 import { ConfigService } from './configService';
+import { Observable, map } from 'rxjs';
 
 @Injectable()
 export class ProjectLibraryService {
-  constructor(protected http: HttpClient, protected ConfigService: ConfigService) {}
+  constructor(protected configService: ConfigService, protected http: HttpClient) {}
 
-  getLibraryProjects() {
+  getLibraryProjects(): Observable<any[]> {
     return this.http
-      .get(this.ConfigService.getConfigParam('getLibraryProjectsURL'))
-      .toPromise()
-      .then((projects) => {
-        return projects;
-      });
+      .get<any[]>(this.configService.getConfigParam('getLibraryProjectsURL'))
+      .pipe(map((projects) => this.sortAndFilterUniqueProjects(projects)));
   }
 
-  sortAndFilterUniqueProjects(projects: any) {
+  private sortAndFilterUniqueProjects(projects: any): any[] {
     const flatProjectList = projects
       .map((grade) => {
         return grade.children;
@@ -25,7 +22,7 @@ export class ProjectLibraryService {
     return this.filterUniqueProjects(flatProjectList).sort(this.sortByProjectIdDescending);
   }
 
-  filterUniqueProjects(projects: any[]): any[] {
+  private filterUniqueProjects(projects: any[]): any[] {
     const uniqueProjects = [];
     const foundProjects = new Map();
     for (const project of projects) {
@@ -37,7 +34,7 @@ export class ProjectLibraryService {
     return uniqueProjects;
   }
 
-  sortByProjectIdDescending(project1: any, project2: any) {
+  private sortByProjectIdDescending(project1: any, project2: any): number {
     return project2.id - project1.id;
   }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
@@ -10377,7 +10377,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Please select a component to import.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts</context>
-          <context context-type="linenumber">75</context>
+          <context context-type="linenumber">81</context>
         </context-group>
       </trans-unit>
       <trans-unit id="22f5f4e7d0b3708e7ffceeea8b93b27e8f09ed7b" datatype="html">