refactor: use image from API object instead of search result
This avoids one additional search request on the api details page.
MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
</mat-panel-title>
</mat-expansion-panel-header>
<div id="content-header">
- <app-img-or-icon-selector [imgUrl]="apiImgUrl" [dimension]="'44'">
+ <app-img-or-icon-selector [imgUrl]="api.api.image" [dimension]="'44'">
</app-img-or-icon-selector>
<div *ngIf="api.api.description; else noDesc">
{{ api.api.description }}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
@@ -27,7 +27,6 @@ import { ConfigService } from '../../services/config/config.service';
export class MarketplaceApiDescriptionComponent implements OnInit {
@Input() api!: IApiVersionExt;
@Input() isLatest!: boolean;
- @Input() apiImgUrl!: string;
// TODO get features from backend as soon as the endpoint is created
features = [];

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.html
src/app/components/marketplace-api-details/marketplace-api-details.component.html
<app-marketplace-api-description
*ngFor="let api of apis; first as isLatest"
[isLatest]="isLatest"
- [api]="api"
- [apiImgUrl]="apiImgUrl!"></app-marketplace-api-description>
+ [api]="api"></app-marketplace-api-description>
</mat-accordion>
</ng-container>

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
@@ -20,15 +20,9 @@ import { ApiService } from '../../services/api/api.service';
import { HeroService } from '../../services/hero/hero.service';
import { map, switchMap } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
-import {
- IApiSummary,
- IApiVersion,
- ISearchCriteria,
- ISearchResultsApiSummary
-} from '../../interfaces/ICommunication';
+import { IApiVersion } from '../../interfaces/ICommunication';
import { SpinnerService } from '../../services/spinner/spinner.service';
import { IApiVersionExt } from '../../interfaces/IApiVersionExt';
-import { BackendService } from '../../services/backend/backend.service';
@Component({
selector: 'app-marketplace-api-details',
@@ -40,8 +34,7 @@ export class MarketplaceApiDetailsComponent implements OnInit {
private route: ActivatedRoute,
private apiService: ApiService,
private heroService: HeroService,
- private spinnerService: SpinnerService,
- private backend: BackendService
+ private spinnerService: SpinnerService
) {}
apiImgUrl?: string;
@@ -95,27 +88,6 @@ export class MarketplaceApiDetailsComponent implements OnInit {
this.spinnerService.stopWaiting();
this.apis = apiVersions;
this.setUpHero();
- this.getApiImage();
- });
- }
-
- private getApiImage() {
- const searchCriteria: ISearchCriteria = {
- filters: [{ name: 'name', value: this.apis[0].api.name, operator: 'eq' }],
- paging: { page: 1, pageSize: 1 }
- };
-
- // TODO: At the moment search endpoint returns every API
- this.backend
- .searchApis(searchCriteria)
- .subscribe((summary: ISearchResultsApiSummary) => {
- const found = summary.beans.find((bean: IApiSummary) => {
- return bean.name === this.apis[0].api.name;
- });
-
- if (found) {
- this.apiImgUrl = found.image;
- }
});
}
}

refactor: use image from API object instead of search result

This avoids one additional search request on the api details page.