refactor(DiscourseComponents): Convert to standalone (#1807)

Convert DiscourseFeedComponent and DiscourseRecentActivityComponent to standalone
WISE-Community · May 22, 2024 · d4a9c5b · d4a9c5b
1 parent 385ff5a
commit d4a9c5b
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 64 deletions.
diff --git a/src/app/discourse-feed/discourse-feed.component.ts b/src/app/discourse-feed/discourse-feed.component.ts
@@ -3,36 +3,26 @@ import { Directive, Input } from '@angular/core';
 
 @Directive()
 export abstract class DiscourseFeedComponent {
-  @Input()
-  baseUrl: string;
-
-  @Input()
-  category: string;
-
-  @Input()
-  queryString: string;
-
-  topics: any;
-  isLoaded: boolean = false;
+  @Input() baseUrl: string;
+  @Input() category: string;
+  protected isLoaded: boolean;
+  @Input() queryString: string;
+  protected topics: any;
 
   constructor(protected http: HttpClient) {}
 
-  ngOnInit() {
-    const url = this.getUrl();
-    this.http
-      .get(url)
-      .subscribe(({ topic_list, users }: any) => {
-        this.topics = topic_list.topics
-          .filter((topic) => {
-            return !topic.pinned_globally;
-          })
-          .slice(0, 3);
-          this.isLoaded = true;
-      });
+  ngOnInit(): void {
+    this.http.get(this.getUrl()).subscribe(({ topic_list }: any) => {
+      this.topics = topic_list.topics
+        .filter((topic) => {
+          return !topic.pinned_globally;
+        })
+        .slice(0, 3);
+      this.isLoaded = true;
+    });
   }
 
-  getUrl(): string {
-    return `${this.baseUrl}/${this.category}.json${
-        this.queryString ? `?${this.queryString}` : ``}`;
+  private getUrl(): string {
+    return `${this.baseUrl}/${this.category}.json${this.queryString ? `?${this.queryString}` : ``}`;
   }
 }
diff --git a/...rse-feed/discourse-feed.component.spec.ts → ...s/discourse-latest-news.component.spec.ts b/...rse-feed/discourse-feed.component.spec.ts → ...s/discourse-latest-news.component.spec.ts
@@ -1,9 +1,11 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { DiscourseFeedComponent } from './discourse-feed.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DiscourseLatestNewsComponent } from './discourse-latest-news.component';
+import { By } from '@angular/platform-browser';
 
-describe('DiscourseFeedComponent', () => {
-  let component: DiscourseFeedComponent;
+describe('DiscourseLatestNewsComponent', () => {
+  let component: DiscourseLatestNewsComponent;
+  let fixture: ComponentFixture<DiscourseLatestNewsComponent>;
   let http: HttpTestingController;
   const sampleLatestResponse = {
     users: [],
@@ -15,20 +17,23 @@ describe('DiscourseFeedComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [DiscourseFeedComponent]
+      providers: [DiscourseLatestNewsComponent]
     });
-    component = TestBed.inject(DiscourseFeedComponent);
     http = TestBed.inject(HttpTestingController);
+    fixture = TestBed.createComponent(DiscourseLatestNewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('should create and show 3 latest topics', () => {
+  it('should show 3 latest topics', () => {
     component.baseUrl = 'http://localhost:9292';
     component.category = 'c/news/1';
     component.queryString = 'order=latest';
     component.ngOnInit();
     http
       .expectOne(`${component.baseUrl}/${component.category}.json?${component.queryString}`)
       .flush(sampleLatestResponse);
-    expect(component.topics.length).toEqual(3);
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('li')).length).toEqual(3);
   });
 });
diff --git a/src/app/home/discourse-latest-news/discourse-latest-news.component.ts b/src/app/home/discourse-latest-news/discourse-latest-news.component.ts
@@ -2,23 +2,26 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { DiscourseFeedComponent } from '../../discourse-feed/discourse-feed.component';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
+  imports: [CommonModule, FlexLayoutModule, MatIconModule],
   selector: 'discourse-latest-news',
-  templateUrl: 'discourse-latest-news.component.html',
-  styleUrls: ['discourse-latest-news.component.scss']
+  standalone: true,
+  styleUrl: 'discourse-latest-news.component.scss',
+  templateUrl: 'discourse-latest-news.component.html'
 })
 export class DiscourseLatestNewsComponent extends DiscourseFeedComponent {
-  smallScreen: boolean = false;
-  xsScreen: boolean = false;
+  protected smallScreen: boolean;
+  protected xsScreen: boolean;
 
   constructor(protected http: HttpClient, private breakpointObserver: BreakpointObserver) {
     super(http);
-
     this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).subscribe((result) => {
       this.smallScreen = result.matches;
     });
-
     this.breakpointObserver.observe([Breakpoints.XSmall]).subscribe((result) => {
       this.xsScreen = result.matches;
     });

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -43,8 +43,7 @@
         [baseUrl]="discourseUrl"
         [category]="discourseNewsCategory"
         queryString="order=latest"
-      >
-      </discourse-latest-news>
+      />
     </ng-template>
   </app-hero-section>
   <section class="section">

diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -15,13 +15,14 @@ import { CallToActionComponent } from '../modules/shared/call-to-action/call-to-
     BlurbComponent,
     CallToActionComponent,
     CommonModule,
+    DiscourseLatestNewsComponent,
     HeroSectionComponent,
     HomeRoutingModule,
     LibraryModule,
     SharedModule,
     RouterModule
   ],
-  declarations: [HomeComponent, DiscourseLatestNewsComponent],
+  declarations: [HomeComponent],
   exports: [HomeComponent, SharedModule]
 })
 export class HomeModule {}
diff --git a/src/app/teacher/discourse-recent-activity/discourse-recent-activity.component.html b/src/app/teacher/discourse-recent-activity/discourse-recent-activity.component.html
@@ -21,7 +21,7 @@ <h3 fxLayoutAlign="start start" fxLayoutGap="8px">
         {{ topic.title }}
       </a>
       <span class="secondary-text mat-caption">
-        ({{ topic.last_posted_at | date : 'MMM dd y' }})
+        ({{ topic.last_posted_at | date: 'MMM dd y' }})
       </span>
     </li>
   </ul>

diff --git a/src/app/teacher/discourse-recent-activity/discourse-recent-activity.component.ts b/src/app/teacher/discourse-recent-activity/discourse-recent-activity.component.ts
@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
 import { DiscourseFeedComponent } from '../../discourse-feed/discourse-feed.component';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  imports: [CommonModule, FlexLayoutModule, MatIconModule],
   selector: 'discourse-recent-activity',
-  templateUrl: 'discourse-recent-activity.component.html',
-  styleUrls: ['discourse-recent-activity.component.scss']
+  standalone: true,
+  styleUrl: 'discourse-recent-activity.component.scss',
+  templateUrl: 'discourse-recent-activity.component.html'
 })
-export class DiscourseRecentActivityComponent extends DiscourseFeedComponent {
-}
+export class DiscourseRecentActivityComponent extends DiscourseFeedComponent {}
diff --git a/src/app/teacher/teacher-home/teacher-home.component.html b/src/app/teacher/teacher-home/teacher-home.component.html
@@ -21,7 +21,7 @@
     queryString="order=activity"
     fxFlex="100%"
     fxFlex.gt-sm="0 0 auto"
-  ></discourse-recent-activity>
+  />
 </header>
 <section>
   <nav mat-tab-nav-bar i18n-aria-label aria-label="Teacher home navigation" [tabPanel]="tabPanel">

diff --git a/src/app/teacher/teacher.module.ts b/src/app/teacher/teacher.module.ts
@@ -68,6 +68,7 @@ const materialModules = [
 @NgModule({
   imports: [
     CommonModule,
+    DiscourseRecentActivityComponent,
     FlexLayoutModule,
     FormsModule,
     LibraryModule,
@@ -81,7 +82,6 @@ const materialModules = [
   ],
   declarations: [
     CreateRunDialogComponent,
-    DiscourseRecentActivityComponent,
     EditComponent,
     EditRunWarningDialogComponent,
     ListClassroomCoursesDialogComponent,

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -4751,42 +4751,42 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> The WISE Advantage </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">58,60</context>
+          <context context-type="linenumber">57,59</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7b26e0d3e5ab23b18e4e9fe4fdbb7f7e6b534790" datatype="html">
         <source> Curriculum Offerings </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">99,101</context>
+          <context context-type="linenumber">98,100</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dcd4eff483113708f4fd91f98236bee705e676a8" datatype="html">
         <source>Ready to try WISE in the Classroom?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">112</context>
+          <context context-type="linenumber">111</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b4b200f1299f2e043cae72f59718dca3b12f1f38" datatype="html">
         <source>Sign up for free!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">113</context>
+          <context context-type="linenumber">112</context>
         </context-group>
       </trans-unit>
       <trans-unit id="da6aa9950c74cadd85a3bf26272f34f28d8338c8" datatype="html">
         <source>Connect</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">129</context>
+          <context context-type="linenumber">128</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e1a07fb742a7b025b2a594d867a5805c37697f86" datatype="html">
         <source>WISE on Facebook</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">135</context>
+          <context context-type="linenumber">134</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4797,7 +4797,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>WISE on Twitter</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">144</context>
+          <context context-type="linenumber">143</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4808,7 +4808,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>WISE on Github</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">153</context>
+          <context context-type="linenumber">152</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4819,7 +4819,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Community</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">173</context>
+          <context context-type="linenumber">172</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4838,14 +4838,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Join us! Discuss all things WISE.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">175</context>
+          <context context-type="linenumber">174</context>
         </context-group>
       </trans-unit>
       <trans-unit id="53c1019d0a23e95290e125bf93e34257eaadb8b6" datatype="html">
         <source>Help + FAQs</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">187</context>
+          <context context-type="linenumber">186</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4856,14 +4856,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>View tutorials and common questions.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">189</context>
+          <context context-type="linenumber">188</context>
         </context-group>
       </trans-unit>
       <trans-unit id="02e9e69ddcbf93de9fd38bc4d0f312142658610d" datatype="html">
         <source>Contact Us</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">199</context>
+          <context context-type="linenumber">198</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -4874,7 +4874,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Want to get in touch? Send us a message.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">201</context>
+          <context context-type="linenumber">200</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3220280128711469703" datatype="html">