fix: get url of ai4life module detail statically (#312)

* fix: get url of ai4life module detail statically * test: fix ai4life module detail test
ai4os · Feb 3, 2025 · bd6af19 · bd6af19
1 parent 2d082fe
commit bd6af19
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/...rketplace/components/modules-cards/ai4life-module-card/ai4life-module-card.component.html b/...rketplace/components/modules-cards/ai4life-module-card/ai4life-module-card.component.html
@@ -1,8 +1,4 @@
-<mat-card
-    class="basic-card"
-    [routerLink]="['ai4lifeModules/' + module.name]"
-    (click)="loadModule()"
->
+<mat-card class="basic-card" [routerLink]="['ai4life-modules/' + module.name]">
     <mat-card-header class="basic-card-header">
         <mat-card-title>
             <mat-icon

diff --git a/...marketplace/components/modules-cards/ai4life-module-card/ai4life-module-card.component.ts b/...marketplace/components/modules-cards/ai4life-module-card/ai4life-module-card.component.ts
@@ -10,8 +10,4 @@ export class Ai4lifeModuleCardComponent {
     constructor() {}
 
     @Input() module!: Ai4lifeModule;
-
-    loadModule() {
-        sessionStorage.setItem('ai4lifeModule', JSON.stringify(this.module));
-    }
 }
diff --git a/...e/components/modules-detail/ai4life-module-detail/ai4life-module-detail.component.spec.ts b/...e/components/modules-detail/ai4life-module-detail/ai4life-module-detail.component.spec.ts
@@ -8,6 +8,11 @@ import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SharedModule } from '@app/shared/shared.module';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { AppConfigService } from '@app/core/services/app-config/app-config.service';
+
+const mockedConfigService: any = {};
 
 const mockedAuthService: any = {
     isAuthenticated: jest.fn(),
@@ -42,6 +47,9 @@ describe('Ai4lifeModuleDetailComponent', () => {
                 SharedModule,
             ],
             providers: [
+                provideHttpClient(),
+                provideHttpClientTesting(),
+                { provide: AppConfigService, useValue: mockedConfigService },
                 { provide: AuthService, useValue: mockedAuthService },
                 { provide: MediaMatcher, useValue: mockedMediaMatcher },
             ],

diff --git a/...tplace/components/modules-detail/ai4life-module-detail/ai4life-module-detail.component.ts b/...tplace/components/modules-detail/ai4life-module-detail/ai4life-module-detail.component.ts
@@ -1,7 +1,8 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService, UserProfile } from '@app/core/services/auth/auth.service';
+import { ModulesService } from '@app/modules/marketplace/services/modules-service/modules.service';
 import { Ai4lifeModule } from '@app/shared/interfaces/module.interface';
 import { SnackbarService } from '@app/shared/services/snackbar/snackbar.service';
 import { BreadcrumbService } from 'xng-breadcrumb';
@@ -17,6 +18,8 @@ export class Ai4lifeModuleDetailComponent implements OnInit {
         private authService: AuthService,
         private breadcrumbService: BreadcrumbService,
         private snackbarService: SnackbarService,
+        private modulesService: ModulesService,
+        private route: ActivatedRoute,
         private media: MediaMatcher,
         private changeDetectorRef: ChangeDetectorRef
     ) {
@@ -29,7 +32,18 @@ export class Ai4lifeModuleDetailComponent implements OnInit {
         this.mobileQuery.addEventListener('change', this._mobileQueryListener);
     }
 
-    module!: Ai4lifeModule;
+    module: Ai4lifeModule = {
+        id: '',
+        name: '',
+        description: '',
+        doi: '',
+        created: '',
+        covers: [],
+        downloadCount: '',
+        tags: [],
+        license: '',
+    };
+
     userProfile?: UserProfile;
     doiBadgeColor = '';
 
@@ -46,26 +60,43 @@ export class Ai4lifeModuleDetailComponent implements OnInit {
         const rs = getComputedStyle(r!);
         this.doiBadgeColor = rs.getPropertyValue('--primary');
 
-        this.authService.userProfileSubject.subscribe((profile) => {
-            this.userProfile = profile;
+        this.route.params.subscribe((params) => {
+            this.isLoading = true;
+
+            this.authService.userProfileSubject.subscribe((profile) => {
+                this.userProfile = profile;
+            });
+
+            this.modulesService.getAi4lifeModules().subscribe({
+                next: (modules: Ai4lifeModule[]) => {
+                    const ai4lifeModule =
+                        modules.find((m) => m.name === params['name']) ??
+                        this.module;
+
+                    if (ai4lifeModule.id !== '') {
+                        this.module = ai4lifeModule;
+                        this.breadcrumbService.set(
+                            '@moduleName',
+                            this.module.name
+                        );
+                        this.module.downloadCount =
+                            this.module.downloadCount === '?'
+                                ? 'Unknown'
+                                : this.module.downloadCount;
+                        this.tags = this.module.tags.slice(0, 7);
+                    } else {
+                        this.snackbarService.openError(
+                            "Couldn't retrieve AI4Life model. Try again later."
+                        );
+                    }
+
+                    this.isLoading = false;
+                },
+                error: () => {
+                    setTimeout(() => (this.isLoading = false), 3000);
+                },
+            });
         });
-
-        const data = sessionStorage.getItem('ai4lifeModule');
-        if (data) {
-            this.module = JSON.parse(data);
-
-            this.module.downloadCount =
-                this.module.downloadCount === '?'
-                    ? 'Unknown'
-                    : this.module.downloadCount;
-            this.tags = this.module.tags.slice(0, 7);
-
-            this.breadcrumbService.set('@moduleName', this.module.name);
-        } else {
-            this.snackbarService.openError(
-                "Couldn't retrieve AI4Life model. Try again later."
-            );
-        }
     }
 
     isLoggedIn() {

diff --git a/src/app/modules/marketplace/marketplace-routing.module.ts b/src/app/modules/marketplace/marketplace-routing.module.ts
@@ -38,7 +38,7 @@ const routes: Routes = [
         ],
     },
     {
-        path: 'ai4lifeModules/:id',
+        path: 'ai4life-modules/:name',
         component: ModuleDetailViewComponent,
         children: [
             {