feat(demo): use reworked external router

graycoreio · Oct 18, 2024 · e1e50e5 · e1e50e5
1 parent 9500a9b
commit e1e50e5
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 81 deletions.
diff --git a/apps/demo/src/app/app-routing.module.ts b/apps/demo/src/app/app-routing.module.ts
@@ -4,12 +4,8 @@ import {
   RouterModule,
 } from '@angular/router';
 
-import {
-  DaffExternalRouterModule,
-  daffDataPathUrlMatcher,
-  daffInsertDataPathStrategy,
-} from '@daffodil/external-router';
-import { DaffExternalRouterExistenceGuard } from '@daffodil/external-router/routing';
+import { provideExternalRouter } from '@daffodil/external-router';
+import { daffExternalMatcherTypeGuard } from '@daffodil/external-router/routing';
 import {
   DaffProductPageIdResolver,
   DaffProductPageUrlResolver,
@@ -37,61 +33,40 @@ export const appRoutes: Routes = [
           product: DaffProductPageIdResolver,
         },
       },
-      {
-        matcher: daffDataPathUrlMatcher,
-        data: {
-          daffExternalRouteType: 'PRODUCT',
-        },
-        component: ProductViewComponent,
-        resolve: {
-          product: DaffProductPageUrlResolver,
-        },
-      },
       {
         path: 'category',
         loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
       },
-      {
-        matcher: daffDataPathUrlMatcher,
-        data: {
-          daffExternalRouteType: 'CATEGORY',
-        },
-        loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
-      },
       {
         path: 'checkout',
         loadChildren: () => import('./checkout/checkout.module').then(m => m.CheckoutModule),
       },
       { path: '404', component: NotFoundComponent },
+      {
+        path: '**',
+        canMatch: [daffExternalMatcherTypeGuard('PRODUCT')],
+        component: ProductViewComponent,
+        resolve: {
+          product: DaffProductPageUrlResolver,
+        },
+      },
+      {
+        path: '**',
+        canMatch: [daffExternalMatcherTypeGuard('CATEGORY')],
+        loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
+      },
     ],
   },
-  {
-    path: '**',
-    canActivate: [DaffExternalRouterExistenceGuard],
-    children: [],
-  },
 ];
 
 @NgModule({
   imports: [
     RouterModule.forRoot(appRoutes, {
       scrollPositionRestoration: 'enabled',
     }),
-    DaffExternalRouterModule.forRoot({
-      failedResolutionPath: '404',
-      notFoundResolutionPath: '404',
-    }, [
-      {
-        type: 'CATEGORY',
-        insertionStrategy: daffInsertDataPathStrategy,
-        route: {},
-      },
-      {
-        type: 'PRODUCT',
-        insertionStrategy: daffInsertDataPathStrategy,
-        route: {},
-      },
-    ]),
+  ],
+  providers: [
+    provideExternalRouter(),
   ],
   exports: [
     RouterModule,

diff --git a/apps/demo/src/app/category/category-routing.module.ts b/apps/demo/src/app/category/category-routing.module.ts
@@ -9,7 +9,6 @@ import {
   DaffCategoryPageUrlResolver,
   DaffCategoryRoutingModule,
 } from '@daffodil/category/routing';
-import { daffDataPathUrlMatcher } from '@daffodil/external-router';
 
 import { CategoryViewComponent } from './pages/category-view/category-view.component';
 

diff --git a/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts b/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
@@ -4,6 +4,7 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
 
 import { DaffCategory } from '@daffodil/category';
 import {
@@ -46,6 +47,9 @@ describe('CategoryViewComponent', () => {
         DaffCategoryStateTestingModule,
         DaffProductTestingModule,
       ],
+      providers: [
+        provideRouter([]),
+      ],
     })
       .compileComponents();
   }));

diff --git a/apps/demo/src/app/drivers/in-memory.module.ts b/apps/demo/src/app/drivers/in-memory.module.ts
@@ -10,7 +10,7 @@ import { DaffCartInMemoryDriverModule } from '@daffodil/cart/driver/in-memory';
 import { DaffCategoryInMemoryDriverModule } from '@daffodil/category/driver/in-memory';
 import { DaffInMemoryBackendCategoryService } from '@daffodil/category/driver/in-memory';
 import { DaffInMemoryDriverModule } from '@daffodil/driver/in-memory';
-import { DaffExternalRouterDriverInMemoryModule } from '@daffodil/external-router/driver/in-memory';
+import { provideDaffExternalRouterInMemoryDriver } from '@daffodil/external-router/driver/in-memory';
 import { DaffGeographyInMemoryDriverModule } from '@daffodil/geography/driver/in-memory';
 import {
   DaffNavigationInMemoryDriverModule,
@@ -36,9 +36,9 @@ import { DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG } from './in-memory/extern
     DaffNewsletterInMemoryDriverModule.forRoot(),
     DaffGeographyInMemoryDriverModule.forRoot(),
     DaffCategoryInMemoryDriverModule.forRoot(),
-    DaffExternalRouterDriverInMemoryModule.forRoot(DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG),
   ],
   providers: [
+    provideDaffExternalRouterInMemoryDriver(DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG),
     {
       provide: DAFF_NAVIGATION_IN_MEMORY_SEED_DATA_PROVIDER,
       useFactory: () => {

diff --git a/apps/demo/src/app/drivers/magento.module.ts b/apps/demo/src/app/drivers/magento.module.ts
@@ -10,7 +10,7 @@ import { DaffMagentoAuthorizeNetDriverModule } from '@daffodil/authorizenet/driv
 import { DaffCartMagentoDriverModule } from '@daffodil/cart/driver/magento';
 import { DaffCategoryMagentoDriverModule } from '@daffodil/category/driver/magento';
 import { DaffMagentoApolloCacheableOperationsLinkGenerator } from '@daffodil/driver/magento';
-import { DaffExternalRouterDriverMagentoModule } from '@daffodil/external-router/driver/magento/2.4.3';
+import { provideDaffExternalRouterMagentoDriver } from '@daffodil/external-router/driver/magento/2.4.3';
 import { DaffGeographyMagentoDriverModule } from '@daffodil/geography/driver/magento';
 import { DaffNavigationMagentoDriverModule } from '@daffodil/navigation/driver/magento';
 import { DaffNewsletterInMemoryDriverModule } from '@daffodil/newsletter/driver/in-memory';
@@ -32,11 +32,11 @@ import { MagentoEnvironmentDriverConfiguration } from '../../environments/enviro
     DaffNewsletterInMemoryDriverModule.forRoot(),
     DaffGeographyMagentoDriverModule.forRoot(),
     DaffCategoryMagentoDriverModule.forRoot(),
-    DaffExternalRouterDriverMagentoModule.forRoot(),
     DaffMagentoAuthorizeNetDriverModule.forRoot((<MagentoEnvironmentDriverConfiguration>environment.driver).anetConfig),
     ApolloModule,
   ],
   providers: [
+    provideDaffExternalRouterMagentoDriver(),
     {
       provide: APOLLO_OPTIONS,
       useFactory: demoMagentoApolloOptions,

diff --git a/apps/demo/src/app/product/components/product-card/product-card.component.html b/apps/demo/src/app/product/components/product-card/product-card.component.html
@@ -1,14 +1,16 @@
-<div class="demo-product-card" (click)="navigateToProduct()">
-  <img class="demo-product-card__image" src="{{product.images[0].url}}">
-  <div class="demo-product-card__details">
-    <p class="demo-product-card__brand single-line-ellipsis">
-      {{product.brand}}
-    </p>
-    <p class="demo-product-card__name single-line-ellipsis">
-      {{product.name}}
-    </p>
-    <p class="demo-product-card__price">
-      ${{product.price}}
-    </p>
-  </div>
-</div>      
+<a [routerLink]="product.url">
+  <div class="demo-product-card">
+    <img class="demo-product-card__image" src="{{product.images[0].url}}">
+    <div class="demo-product-card__details">
+      <p class="demo-product-card__brand single-line-ellipsis">
+        {{product.brand}}
+      </p>
+      <p class="demo-product-card__name single-line-ellipsis">
+        {{product.name}}
+      </p>
+      <p class="demo-product-card__price">
+        ${{product.price}}
+      </p>
+    </div>
+  </div>      
+</a>
diff --git a/apps/demo/src/app/product/components/product-card/product-card.component.spec.ts b/apps/demo/src/app/product/components/product-card/product-card.component.spec.ts
@@ -68,15 +68,4 @@ describe('ProductCardComponent', () => {
   it('should be able to take a product as input', () => {
     expect(productCardComponent.componentInstance.product).toEqual(stubProduct);
   });
-
-  describe('when demo-product-card is clicked', () => {
-
-    beforeEach(() => {
-      fixture.debugElement.query(By.css('.demo-product-card')).nativeElement.click();
-    });
-
-    it('should call router.navigateByUrl', () => {
-      expect(productCardComponent.componentInstance.router.navigateByUrl).toHaveBeenCalledWith('product/' + stubProduct.id);
-    });
-  });
 });
diff --git a/apps/demo/src/app/product/components/product-card/product-card.component.ts b/apps/demo/src/app/product/components/product-card/product-card.component.ts
@@ -14,12 +14,4 @@ import { DaffProduct } from '@daffodil/product';
 export class ProductCardComponent {
 
   @Input() product: DaffProduct;
-
-  constructor(
-    private router: Router,
-  ) { }
-
-  navigateToProduct() {
-    this.router.navigateByUrl('product/' + this.product.id);
-  }
 }
diff --git a/apps/demo/src/app/product/components/product-card/product-card.module.ts b/apps/demo/src/app/product/components/product-card/product-card.module.ts
@@ -1,11 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { ProductCardComponent } from './product-card.component';
 
 @NgModule({
   imports: [
     CommonModule,
+    RouterModule,
   ],
   declarations: [
     ProductCardComponent,