Changed how the breadcrumb is set [comixed#531]

* Removed the old adaptor class. * Refactored code to use the new feature. * Renamed affected modules' state types.
mcpierce · Oct 25, 2020 · c5966c0 · c5966c0
1 parent 0da6a62
commit c5966c0
Show file tree

Hide file tree

Showing 74 changed files with 370 additions and 421 deletions.
diff --git a/comixed-frontend/src/app/adaptors/breadcrumb.adaptor.spec.ts b/comixed-frontend/src/app/adaptors/breadcrumb.adaptor.spec.ts
diff --git a/comixed-frontend/src/app/adaptors/breadcrumb.adaptor.ts b/comixed-frontend/src/app/adaptors/breadcrumb.adaptor.ts
diff --git a/comixed-frontend/src/app/app.component.spec.ts b/comixed-frontend/src/app/app.component.spec.ts
@@ -24,7 +24,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { EffectsModule } from '@ngrx/effects';
 import { Store, StoreModule } from '@ngrx/store';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { AppComponent } from 'app/app.component';
 import { LoginComponent } from 'app/components/login/login.component';
 import { LibraryAdaptor } from 'app/library';
@@ -50,6 +49,12 @@ import {
 } from 'primeng/primeng';
 import { ToastModule } from 'primeng/toast';
 import { NavigationBarComponent } from 'app/components/navigation-bar/navigation-bar.component';
+import * as fromBreadcrumb from 'app/reducers/breadcrumb.reducer';
+import {
+  BREADCRUMB_FEATURE_KEY,
+  BreadcrumbState
+} from 'app/reducers/breadcrumb.reducer';
+import { MockStore } from '@ngrx/store/testing';
 
 describe('AppComponent', () => {
   const USER = USER_READER;
@@ -59,7 +64,7 @@ describe('AppComponent', () => {
   let authenticationAdaptor: AuthenticationAdaptor;
   let libraryAdaptor: LibraryAdaptor;
   let translateService: TranslateService;
-  let store: Store<any>;
+  let store: MockStore<BreadcrumbState>;
   let originalTimeout;
 
   beforeAll(async done => {
@@ -81,6 +86,7 @@ describe('AppComponent', () => {
         TranslateModule.forRoot(),
         LoggerModule.forRoot(),
         StoreModule.forRoot({}),
+        StoreModule.forFeature(BREADCRUMB_FEATURE_KEY, fromBreadcrumb.reducer),
         EffectsModule.forRoot([]),
         MenubarModule,
         ButtonModule,
@@ -97,7 +103,6 @@ describe('AppComponent', () => {
         MessageService,
         ConfirmationService,
         AuthenticationAdaptor,
-        BreadcrumbAdaptor,
         UserService
       ]
     }).compileComponents();

diff --git a/comixed-frontend/src/app/app.component.ts b/comixed-frontend/src/app/app.component.ts
@@ -21,8 +21,12 @@ import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationAdaptor, User } from 'app/user';
 import { LibraryAdaptor } from 'app/library';
 import { Subscription } from 'rxjs';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { LoggerLevel, LoggerService } from '@angular-ru/logger';
+import { Store } from '@ngrx/store';
+import { AppState } from 'app/app-state';
+import { selectBreadcrumbs } from 'app/selectors/breadcrumb.selectors';
+import { filter } from 'rxjs/operators';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'app-root',
@@ -37,17 +41,29 @@ export class AppComponent implements OnInit {
   comicCount = 0;
   processingCount = 0;
   fetchingUpdateSubscription: Subscription;
-  breadcrumbs = [];
+  breadcrumbs: MenuItem[] = [];
 
   constructor(
+    private store: Store<AppState>,
+    private logger: LoggerService,
     private translateService: TranslateService,
     private authenticationAdaptor: AuthenticationAdaptor,
-    private libraryAdaptor: LibraryAdaptor,
-    private breadcrumbsAdaptor: BreadcrumbAdaptor,
-    private logger: LoggerService
+    private libraryAdaptor: LibraryAdaptor
   ) {
     this.logger.level = LoggerLevel.INFO;
     translateService.setDefaultLang('en');
+    this.store
+      .select(selectBreadcrumbs)
+      .pipe(filter(entries => !!entries))
+      .subscribe(
+        entries =>
+          (this.breadcrumbs = entries.map(entry => {
+            return {
+              label: entry.label,
+              routerLink: entry.link
+            } as MenuItem;
+          }))
+      );
   }
 
   ngOnInit() {
@@ -81,8 +97,5 @@ export class AppComponent implements OnInit {
     this.libraryAdaptor.processingCount$.subscribe(
       imports => (this.processingCount = imports)
     );
-    this.breadcrumbsAdaptor.entries$.subscribe(
-      entries => (this.breadcrumbs = entries)
-    );
   }
 }
diff --git a/comixed-frontend/src/app/app.module.ts b/comixed-frontend/src/app/app.module.ts
@@ -33,7 +33,6 @@ import {
   TranslateLoader,
   TranslateModule
 } from '@ngx-translate/core';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { AppComponent } from 'app/app.component';
 import { AppRouting } from 'app/app.routing';
 import { BackendStatusModule } from 'app/backend-status/backend-status.module';
@@ -157,7 +156,6 @@ import { reducers } from 'app/app-state';
     MenuModule
   ],
   providers: [
-    BreadcrumbAdaptor,
     UserService,
     MessageService,
     [{ provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }],

diff --git a/comixed-frontend/src/app/backend-status/index.ts b/comixed-frontend/src/app/backend-status/index.ts
@@ -48,24 +48,24 @@ interface RouterStateUrl {
   queryParams: Params;
 }
 
-export interface AppState {
+export interface BackendStatusState {
   router: fromRouter.RouterReducerState<RouterStateUrl>;
   [BUILD_DETAILS_FEATURE_KEY]: BuildDetailsState;
   [LOAD_TASK_AUDIT_LOG_FEATURE_KEY]: LoadTaskAuditLogState;
   [CLEAR_TASK_AUDIT_LOG_FEATURE_KEY]: ClearTaskAuditLogState;
   [LOAD_REST_AUDIT_LOG_ENTRIES_FEATURE_KEY]: LoadRestAuditLogEntriesState;
 }
 
-export type State = AppState;
+export type State = BackendStatusState;
 
-export const reducers: ActionReducerMap<AppState> = {
+export const reducers: ActionReducerMap<BackendStatusState> = {
   router: fromRouter.routerReducer,
   [BUILD_DETAILS_FEATURE_KEY]: fromBuildDetails.reducer,
   [LOAD_TASK_AUDIT_LOG_FEATURE_KEY]: fromLoadTaskAuditLog.reducer,
   [CLEAR_TASK_AUDIT_LOG_FEATURE_KEY]: fromClearTaskAuditLog.reducer,
   [LOAD_REST_AUDIT_LOG_ENTRIES_FEATURE_KEY]: fromLoadRestAuditLog.reducer
 };
 
-export const metaReducers: MetaReducer<AppState>[] = !environment.production
-  ? []
-  : [];
+export const metaReducers: MetaReducer<
+  BackendStatusState
+>[] = !environment.production ? [] : [];
diff --git a/...tend/src/app/backend-status/pages/build-details-page/build-details-page.component.spec.ts b/...tend/src/app/backend-status/pages/build-details-page/build-details-page.component.spec.ts
@@ -29,15 +29,13 @@ import {
 import { EffectsModule } from '@ngrx/effects';
 import { BuildDetailsEffects } from 'app/backend-status/effects/build-details.effects';
 import { MessageService } from 'primeng/api';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { RouterTestingModule } from '@angular/router/testing';
 import { LoggerModule } from '@angular-ru/logger';
 import { Title } from '@angular/platform-browser';
 
 describe('BuildDetailsPageComponent', () => {
   let component: BuildDetailsPageComponent;
   let fixture: ComponentFixture<BuildDetailsPageComponent>;
-  let breadcrumbAdaptor: BreadcrumbAdaptor;
   let titleService: Title;
   let translateService: TranslateService;
 
@@ -53,15 +51,13 @@ describe('BuildDetailsPageComponent', () => {
         EffectsModule.forRoot([]),
         EffectsModule.forFeature([BuildDetailsEffects])
       ],
-      providers: [BreadcrumbAdaptor, MessageService],
+      providers: [MessageService],
       declarations: [BuildDetailsPageComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(BuildDetailsPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    breadcrumbAdaptor = TestBed.get(BreadcrumbAdaptor);
-    spyOn(breadcrumbAdaptor, 'loadEntries');
     titleService = TestBed.get(Title);
     spyOn(titleService, 'setTitle');
     translateService = TestBed.get(TranslateService);
@@ -76,10 +72,6 @@ describe('BuildDetailsPageComponent', () => {
       translateService.use('fr');
     });
 
-    it('reloads the breadcrumb trail', () => {
-      expect(breadcrumbAdaptor.loadEntries).toHaveBeenCalled();
-    });
-
     it('reloads the title', () => {
       expect(titleService.setTitle).toHaveBeenCalled();
     });

diff --git a/...-frontend/src/app/backend-status/pages/build-details-page/build-details-page.component.ts b/...-frontend/src/app/backend-status/pages/build-details-page/build-details-page.component.ts
@@ -19,13 +19,13 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { BuildDetails } from 'app/backend-status/models/build-details';
 import { Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
-import { AppState } from 'app/backend-status';
+import { BackendStatusState } from 'app/backend-status';
 import { selectBuildDetails } from 'app/backend-status/selectors/build-detail.selectors';
 import { fetchBuildDetails } from 'app/backend-status/actions/build-details.actions';
+import { setBreadcrumbs } from 'app/actions/breadcrumb.actions';
 
 @Component({
   selector: 'app-build-details-page',
@@ -37,10 +37,9 @@ export class BuildDetailsPageComponent implements OnDestroy {
   langChangeSubscription: Subscription;
 
   constructor(
+    private store: Store<BackendStatusState>,
     private titleService: Title,
-    private translateService: TranslateService,
-    private breadcrumbAdaptor: BreadcrumbAdaptor,
-    private store: Store<AppState>
+    private translateService: TranslateService
   ) {
     this.store.dispatch(fetchBuildDetails());
     this.store
@@ -57,14 +56,20 @@ export class BuildDetailsPageComponent implements OnDestroy {
   }
 
   private loadTranslations() {
-    this.breadcrumbAdaptor.loadEntries([
-      { label: this.translateService.instant('breadcrumb.entry.help.root') },
-      {
-        label: this.translateService.instant(
-          'breadcrumb.entry.help.build-details-page'
-        )
-      }
-    ]);
+    this.store.dispatch(
+      setBreadcrumbs({
+        entries: [
+          {
+            label: this.translateService.instant('breadcrumb.entry.help.root')
+          },
+          {
+            label: this.translateService.instant(
+              'breadcrumb.entry.help.build-details-page'
+            )
+          }
+        ]
+      })
+    );
     this.titleService.setTitle(
       this.translateService.instant('build-details.page-title')
     );

diff --git a/...nd/src/app/backend-status/pages/rest-audit-log-page/rest-audit-log-page.component.spec.ts b/...nd/src/app/backend-status/pages/rest-audit-log-page/rest-audit-log-page.component.spec.ts
@@ -30,7 +30,6 @@ import { LoadRestAuditLogEffects } from 'app/backend-status/effects/load-rest-au
 import { LoggerModule } from '@angular-ru/logger';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MessageService } from 'primeng/api';
-import { BreadcrumbAdaptor } from 'app/adaptors/breadcrumb.adaptor';
 import { REST_AUDIT_LOG_ENTRY_1 } from 'app/backend-status/backend-status.fixtures';
 import { Title } from '@angular/platform-browser';
 import { ScrollPanelModule, SidebarModule } from 'primeng/primeng';
@@ -40,7 +39,6 @@ describe('RestAuditLogPageComponent', () => {
 
   let component: RestAuditLogPageComponent;
   let fixture: ComponentFixture<RestAuditLogPageComponent>;
-  let breadcrumbAdaptor: BreadcrumbAdaptor;
   let titleService: Title;
   let translateService: TranslateService;
 
@@ -63,13 +61,11 @@ describe('RestAuditLogPageComponent', () => {
         ScrollPanelModule
       ],
       declarations: [RestAuditLogPageComponent],
-      providers: [MessageService, BreadcrumbAdaptor, Title]
+      providers: [MessageService, Title]
     }).compileComponents();
 
     fixture = TestBed.createComponent(RestAuditLogPageComponent);
     component = fixture.componentInstance;
-    breadcrumbAdaptor = TestBed.get(BreadcrumbAdaptor);
-    spyOn(breadcrumbAdaptor, 'loadEntries');
     titleService = TestBed.get(Title);
     spyOn(titleService, 'setTitle');
     translateService = TestBed.get(TranslateService);
@@ -174,9 +170,5 @@ describe('RestAuditLogPageComponent', () => {
     it('changes the page title', () => {
       expect(titleService.setTitle).toHaveBeenCalledWith(jasmine.any(String));
     });
-
-    it('reloads the breadcrumb trail', () => {
-      expect(breadcrumbAdaptor.loadEntries).toHaveBeenCalled();
-    });
   });
 });