feat(daffio): consolidate docs list rendering (#2989)

Author: griest024

apps/daffio/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { DAFF_THEME_INITIALIZER } from '@daffodil/design';
+import { provideDaffRouterActivatedRoute } from '@daffodil/router';
 
 import { AppRoutingModule } from './app-routing.module';
 import { DaffioAppComponent } from './app.component';
@@ -35,7 +36,7 @@ import { environment } from '../environments/environment';
     BrowserAnimationsModule,
 
     StoreModule.forRoot({}),
-    EffectsModule.forRoot([]),
+    EffectsModule.forRoot(),
     HttpClientModule,
 
     AppRoutingModule,
@@ -75,6 +76,7 @@ import { environment } from '../environments/environment';
       provide: APP_ID,
       useValue: 'serverApp',
     },
+    provideDaffRouterActivatedRoute(),
   ],
 })
 export class AppModule {}

apps/daffio/src/app/docs/api/api-routing.module.ts

@@ -1,34 +1,41 @@
-import { NgModule } from '@angular/core';
+import {
+  inject,
+  NgModule,
+} from '@angular/core';
 import {
   Routes,
   RouterModule,
 } from '@angular/router';
 
-import { DaffRouteWithNamedViews } from '@daffodil/router';
+import { DaffDocKind } from '@daffodil/docs-utils';
 
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
 import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
-import { DaffioApiListResolver } from './resolvers/api-list-resolver.service';
 import { DaffioSimpleFooterComponent } from '../../core/footer/simple-footer/simple-footer.component';
+import { DaffioRoute } from '../../core/router/route.type';
 import { DaffioDocsSidebarContentComponent } from '../../core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component';
 import { DaffioRouterNamedViewsEnum } from '../../named-views/models/named-views.enum';
+import { DaffioDocsListContainer } from '../containers/docs-list/docs-list.component';
 import { DocsResolver } from '../resolvers/docs-resolver.service';
+import { DaffioDocsIndexService } from '../services/index.service';
 
 export const apiRoutes: Routes = [
-  <DaffRouteWithNamedViews>{
+  <DaffioRoute>{
     path: '',
     data: {
       daffNamedViews: {
         [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContentComponent,
+        [DaffioRouterNamedViewsEnum.DOCS_SIDEBAR]: DaffioDocsListContainer,
         [DaffioRouterNamedViewsEnum.FOOTER]: DaffioSimpleFooterComponent,
       },
+      docKind: DaffDocKind.API,
     },
     children: [
       {
         path: '',
         component: DaffioApiListPageComponent,
         resolve: {
-          reference: DaffioApiListResolver,
+          reference: () => inject(DaffioDocsIndexService).getList(DaffDocKind.API),
         },
       },
       {

apps/daffio/src/app/docs/api/components/api-list/api-list.component.html

@@ -1,9 +1,9 @@
-<div *ngFor="let doc of apiList" class="daffio-api-list__package">
+<div *ngFor="let doc of apiList.children" class="daffio-api-list__package">
   <h2 class="daffio-api-list__package-name">
     <a [routerLink]="doc.path">{{ doc.title }}</a>
   </h2>
   <div class="daffio-api-list__list">
-    <a *ngFor="let childDoc of doc.items" [routerLink]="childDoc.path" class="daffio-api-list__item" >
+    <a *ngFor="let childDoc of doc.children" [routerLink]="childDoc.path" class="daffio-api-list__item" >
       <div class="daffio-api-list__item-name">{{ childDoc.title }}</div>
       <label class="daffio-api-list__item-label {{ childDoc.docType }}">{{ childDoc.docType }}</label>
     </a>

apps/daffio/src/app/docs/api/components/api-list/api-list.component.spec.ts

@@ -14,24 +14,30 @@ import { DaffioApiReference } from '../../models/api-reference';
 
 @Component({ template: '<daffio-api-list [apiList]="apiListValue"></daffio-api-list>' })
 class WrapperComponent {
-  apiListValue: DaffioApiReference[] = [
-    {
-      id: 'name1',
-      title: 'title1',
-      path: 'path1',
-      docType: 'docType1',
-      docTypeShorthand: 'doc',
-      children: [],
-    },
-    {
-      id: 'name2',
-      title: 'title2',
-      path: 'path2',
-      docType: 'docType2',
-      docTypeShorthand: 'doc',
-      children: [],
-    },
-  ];
+  apiListValue: DaffioApiReference = {
+    id: 'id',
+    title: 'title',
+    docType: '',
+    docTypeShorthand: '',
+    children: [
+      {
+        id: 'name1Component',
+        title: 'title1Component',
+        path: 'path1',
+        docType: 'docType1',
+        docTypeShorthand: 'dt',
+        children: [],
+      },
+      {
+        id: 'name2Module',
+        title: 'title2Module',
+        path: 'path2',
+        docType: 'docType2',
+        docTypeShorthand: 'dt',
+        children: [],
+      },
+    ],
+  };
 }
 
 describe('DaffioApiListComponent', () => {
@@ -73,13 +79,13 @@ describe('DaffioApiListComponent', () => {
 
   it('should render a link for every doc in apiList', () => {
 
-    expect(links.length).toEqual(component.apiList.length);
+    expect(links.length).toEqual(component.apiList.children.length);
   });
 
   describe('on link', () => {
 
     it('should set routerLink', () => {
-      expect(links[0].attributes['ng-reflect-router-link']).toEqual(component.apiList[0].path);
+      expect(links[0].attributes['ng-reflect-router-link']).toEqual(component.apiList.children[0].path);
     });
   });
 });

apps/daffio/src/app/docs/api/components/api-list/api-list.component.ts

@@ -19,5 +19,5 @@ export class DaffioApiListComponent {
   /**
    * A list of references for API documents.
    */
-  @Input() apiList: DaffioApiReference[] = [];
+  @Input() apiList: DaffioApiReference;
 }

apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts

@@ -36,24 +36,30 @@ describe('DaffioApiListPageComponent', () => {
   let fixture: ComponentFixture<DaffioApiListPageComponent>;
   let activatedRoute: ActivatedRouteStub;
 
-  const stubDocsList = [
-    {
-      id: 'name1Component',
-      title: 'title1Component',
-      path: 'path1',
-      docType: 'docType1',
-      docTypeShorthand: 'dt',
-      children: [],
-    },
-    {
-      id: 'name2Module',
-      title: 'title2Module',
-      path: 'path2',
-      docType: 'docType2',
-      docTypeShorthand: 'dt',
-      children: [],
-    },
-  ];
+  const stubDocsList: DaffioApiReference = {
+    id: 'id',
+    title: 'title',
+    docType: '',
+    docTypeShorthand: '',
+    children: [
+      {
+        id: 'name1Component',
+        title: 'title1Component',
+        path: 'path1',
+        docType: 'docType1',
+        docTypeShorthand: 'dt',
+        children: [],
+      },
+      {
+        id: 'name2Module',
+        title: 'title2Module',
+        path: 'path2',
+        docType: 'docType2',
+        docTypeShorthand: 'dt',
+        children: [],
+      },
+    ],
+  };
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({

apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.ts

@@ -19,13 +19,13 @@ export class DaffioApiListPageComponent implements OnInit {
   /**
    * A list of references for API documents.
    */
-  apiList$: Observable<DaffioApiReference[]>;
+  apiList$: Observable<DaffioApiReference>;
 
   constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.apiList$ = this.route.data.pipe(
-      map((data: { reference: DaffioApiReference[] }) => data.reference),
+      map((data: { reference: DaffioApiReference }) => data.reference),
     );
   }
 }