refactor(FAQ): Extract common code to parent

src/app/help/student-faq/student-faq.component.scss → src/app/help/faq/faq.component.scss

@@ -1,4 +1,3 @@
-
 .title-icon {
   margin-right: 8px;
 }

src/app/help/faq/faq.component.ts

@@ -0,0 +1,27 @@
+import { Directive, OnInit } from '@angular/core';
+import { ConfigService } from '../../services/config.service';
+import { filter } from 'rxjs';
+
+@Directive()
+export abstract class FaqComponent implements OnInit {
+  protected contextPath: string;
+
+  constructor(private configService: ConfigService) {
+    this.configService
+      .getConfig()
+      .pipe(filter((config) => config != null))
+      .subscribe((config) => {
+        this.contextPath = config.contextPath;
+      });
+  }
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    document.getElementsByTagName('app-help')[0]?.scrollIntoView();
+  }
+
+  protected scrollTo(id: string): void {
+    document.getElementById(id).scrollIntoView();
+  }
+}

src/app/help/student-faq/student-faq.component.spec.ts → src/app/help/faq/student-faq/student-faq.component.spec.ts

@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { StudentFaqComponent } from './student-faq.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ConfigService } from '../../services/config.service';
+import { ConfigService } from '../../../services/config.service';
 import { Observable } from 'rxjs';
-import { Config } from '../../domain/config';
+import { Config } from '../../../domain/config';
 
 export class MockConfigService {
   getConfig(): Observable<Config> {
@@ -24,13 +24,15 @@ describe('StudentFaqComponent', () => {
   let component: StudentFaqComponent;
   let fixture: ComponentFixture<StudentFaqComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [StudentFaqComponent],
-      providers: [{ provide: ConfigService, useClass: MockConfigService }],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [StudentFaqComponent],
+        providers: [{ provide: ConfigService, useClass: MockConfigService }],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StudentFaqComponent);

src/app/help/faq/student-faq/student-faq.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { FaqComponent } from '../faq.component';
+
+@Component({
+  selector: 'app-student-faq',
+  templateUrl: './student-faq.component.html',
+  styleUrls: ['../faq.component.scss']
+})
+export class StudentFaqComponent extends FaqComponent {}

src/app/help/teacher-faq/teacher-faq.component.spec.ts → src/app/help/faq/teacher-faq/teacher-faq.component.spec.ts

@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { TeacherFaqComponent } from './teacher-faq.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ConfigService } from '../../services/config.service';
+import { ConfigService } from '../../../services/config.service';
 import { Observable } from 'rxjs';
-import { Config } from '../../domain/config';
+import { Config } from '../../../domain/config';
 
 export class MockConfigService {
   getConfig(): Observable<Config> {
@@ -24,13 +24,15 @@ describe('TeacherFaqComponent', () => {
   let component: TeacherFaqComponent;
   let fixture: ComponentFixture<TeacherFaqComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [TeacherFaqComponent],
-      providers: [{ provide: ConfigService, useClass: MockConfigService }],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [TeacherFaqComponent],
+        providers: [{ provide: ConfigService, useClass: MockConfigService }],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TeacherFaqComponent);

src/app/help/faq/teacher-faq/teacher-faq.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { FaqComponent } from '../faq.component';
+
+@Component({
+  selector: 'app-teacher-faq',
+  templateUrl: './teacher-faq.component.html',
+  styleUrls: ['../faq.component.scss']
+})
+export class TeacherFaqComponent extends FaqComponent {}

src/app/help/help-routing.module.ts

@@ -3,8 +3,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { HelpComponent } from './help.component';
 import { HelpHomeComponent } from './help-home/help-home.component';
 import { GettingStartedComponent } from './getting-started/getting-started.component';
-import { TeacherFaqComponent } from './teacher-faq/teacher-faq.component';
-import { StudentFaqComponent } from './student-faq/student-faq.component';
+import { TeacherFaqComponent } from './faq/teacher-faq/teacher-faq.component';
+import { StudentFaqComponent } from './faq/student-faq/student-faq.component';
 
 const helpRoutes: Routes = [
   {

src/app/help/help.module.ts

@@ -4,8 +4,8 @@ import { HelpComponent } from './help.component';
 import { HelpRoutingModule } from './help-routing.module';
 import { SharedModule } from '../modules/shared/shared.module';
 import { GettingStartedComponent } from './getting-started/getting-started.component';
-import { TeacherFaqComponent } from './teacher-faq/teacher-faq.component';
-import { StudentFaqComponent } from './student-faq/student-faq.component';
+import { TeacherFaqComponent } from './faq/teacher-faq/teacher-faq.component';
+import { StudentFaqComponent } from './faq/student-faq/student-faq.component';
 import { HelpHomeComponent } from './help-home/help-home.component';
 
 @NgModule({