refactor(DiscourseCategoryActivityComponent): Convert to standalone (#…

…1812)
WISE-Community · May 24, 2024 · 487d8b7 · 487d8b7
1 parent 23d1260
commit 487d8b7
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 59 deletions.
diff --git a/...pp/modules/library/discourse-category-activity/discourse-category-activity.component.html b/...pp/modules/library/discourse-category-activity/discourse-category-activity.component.html
@@ -1,16 +1,20 @@
-<ng-container *ngIf="isValidCategoryURL">
-  <mat-divider></mat-divider>
-  <p fxLayoutAlign="start center">
-    <mat-icon>forum</mat-icon>&nbsp;
-    <a href="{{ categoryURL }}" target="_blank">
-      <strong i18n>Discuss ({{ postCount }}{{ hasMoreTopics ? '+' : '' }})</strong>
-    </a>
-  </p>
-  <ul class="topics" *ngIf="topics.length">
-    <li *ngFor="let topic of topics.slice(0, 3)">
-      <a href="{{ discourseBaseUrl }}/t/{{ topic.slug }}/{{ topic.id }}" target="_blank">
-        {{ topic.title }}
-      </a>
-    </li>
+@if (validCategoryURL) {
+<mat-divider />
+<p fxLayoutAlign="start center">
+  <mat-icon>forum</mat-icon>&nbsp;
+  <a href="{{ categoryURL }}" target="_blank">
+    <strong i18n>Discuss ({{ postCount }}{{ hasMoreTopics ? '+' : '' }})</strong>
+  </a>
+</p>
+@if (topics.length > 0) {
+  <ul class="topics">
+    @for (topic of topics.slice(0,3); track topic.id) {
+      <li>
+        <a href="{{ discourseBaseUrl }}/t/{{ topic.slug }}/{{ topic.id }}" target="_blank">
+          {{ topic.title }}
+        </a>
+      </li>
+    }
   </ul>
-</ng-container>
+}
+}
diff --git a/...modules/library/discourse-category-activity/discourse-category-activity.component.spec.ts b/...modules/library/discourse-category-activity/discourse-category-activity.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DiscourseCategoryActivityComponent } from './discourse-category-activity.component';
+import { By } from '@angular/platform-browser';
 
 let component: DiscourseCategoryActivityComponent;
 let http: HttpTestingController;
@@ -25,34 +26,23 @@ describe('DiscourseCategoryActivityComponent', () => {
     http = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(DiscourseCategoryActivityComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   afterEach(() => {
     fixture.destroy();
   });
 
-  retrieveCategory();
+  ngOnInit();
 });
 
-function retrieveCategory() {
-  xdescribe('retrieveCategory()', () => {
-    it('should set discussion links and post count when request succeeds', () => {
-      component.categoryURL = 'http://localhost:9292';
-      component.retrieveCategory();
+function ngOnInit() {
+  describe('ngOnInit()', () => {
+    it('should make request to fetch posts and show discussion links', () => {
+      component.categoryURL = 'http://localhost:9292/c/7';
+      component.ngOnInit();
       http.expectOne(`${component.categoryURL}.json?order=latest`).flush(sampleDiscourseResponse);
-      expect(component.isValidCategoryURL).toBeTrue();
-      expect(component.topics.length).toEqual(3);
-      expect(component.postCount).toEqual(8);
-    });
-
-    it('should set isValidCategoryURL to false on network error', () => {
-      component.categoryURL = 'http://invalid_url';
-      component.retrieveCategory();
-      http
-        .expectOne(`${component.categoryURL}.json?order=latest`)
-        .error(new ErrorEvent('404 error'));
-      expect(component.isValidCategoryURL).toBeFalse();
+      fixture.detectChanges();
+      expect(fixture.debugElement.queryAll(By.css('a')).length).toEqual(4);
     });
   });
 }
diff --git a/src/app/modules/library/discourse-category-activity/discourse-category-activity.component.ts b/src/app/modules/library/discourse-category-activity/discourse-category-activity.component.ts
@@ -1,44 +1,40 @@
+import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, Input } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
+  imports: [CommonModule, FlexLayoutModule, MatDividerModule, MatIconModule],
   selector: 'discourse-category-activity',
-  templateUrl: 'discourse-category-activity.component.html',
-  styleUrls: ['discourse-category-activity.component.scss']
+  standalone: true,
+  styleUrl: 'discourse-category-activity.component.scss',
+  templateUrl: 'discourse-category-activity.component.html'
 })
 export class DiscourseCategoryActivityComponent {
-  @Input()
-  categoryURL: string = '';
-
-  discourseBaseUrl: string = '';
-  hasMoreTopics: boolean = false;
-  isValidCategoryURL: boolean = false;
-  postCount: number = 0;
-  topics: any[] = [];
+  @Input() categoryURL: string = '';
+  protected discourseBaseUrl: string = '';
+  protected hasMoreTopics: boolean;
+  protected postCount: number = 0;
+  protected topics: any[] = [];
+  protected validCategoryURL: boolean;
 
   constructor(private http: HttpClient) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.retrieveCategory();
   }
 
-  retrieveCategory(): void {
+  private retrieveCategory(): void {
     this.http.get(`${this.categoryURL}.json?order=latest`).subscribe(({ topic_list }: any) => {
       if (topic_list.topics) {
-        this.isValidCategoryURL = true;
+        this.validCategoryURL = true;
         this.topics = topic_list.topics;
-        this.postCount = this.countPosts();
+        this.postCount = this.topics.reduce((sum, topic) => sum + topic.posts_count, 0);
         this.discourseBaseUrl = this.categoryURL.match(/(.+)\/c\/.+/)[1];
         this.hasMoreTopics = topic_list.more_topics_url ? true : false;
       }
     });
   }
-
-  countPosts(): number {
-    let postCount = 0;
-    this.topics.forEach((topic) => {
-      postCount += topic.posts_count;
-    });
-    return postCount;
-  }
 }
diff --git a/src/app/modules/library/library-project-details/library-project-details.component.html b/src/app/modules/library/library-project-details/library-project-details.component.html
@@ -79,7 +79,7 @@
     <discourse-category-activity
       *ngIf="project.metadata.discourseCategoryURL"
       [categoryURL]="project.metadata.discourseCategoryURL"
-    ></discourse-category-activity>
+    />
     <div class="license notice-bg-bg mat-caption secondary-text">
       <img src="../../../../assets/img/by-sa.png" alt="CC BY-SA" />&nbsp;
       <span *ngIf="!isCopy" [ngSwitch]="authorsString.length">

diff --git a/src/app/modules/library/library.module.ts b/src/app/modules/library/library.module.ts
@@ -77,6 +77,7 @@ const materialModules = [
   imports: [
     ArchiveProjectsButtonComponent,
     CommonModule,
+    DiscourseCategoryActivityComponent,
     FlexLayoutModule,
     FormsModule,
     LibraryProjectDisciplinesComponent,
@@ -103,8 +104,7 @@ const materialModules = [
     PersonalLibraryDetailsComponent,
     SelectAllItemsCheckboxComponent,
     ShareProjectDialogComponent,
-    CopyProjectDialogComponent,
-    DiscourseCategoryActivityComponent
+    CopyProjectDialogComponent
   ],
   exports: [
     HomePageProjectLibraryComponent,