replace axios with angular http client
MODIFY
src/app/app-routing.module.ts
src/app/app-routing.module.ts
@@ -12,7 +12,7 @@ const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'marketplace', component: MarketplaceComponent},
{path: 'api-details/:orgId/:apiId', component: MarketplaceApiDetailsComponent},
- {path: 'api-signup', component: MarketplaceSignupStepperComponent},
+ {path: 'api-signup/:orgId/:apiId', component: MarketplaceSignupStepperComponent},
{path: 'account', component: AccountComponent},
{path: 'applications', component: MyAppsComponent},
];

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -24,8 +24,6 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
import {InitializerService} from './services/initializer/initializer.service';
import config from './../../config.json';
import {MaterialModule} from './material.module';
-import {ActivatedRoute, ActivationEnd, NavigationEnd, Router, RouterEvent} from '@angular/router';
-import {HeroService} from './services/hero/hero.service';
import {ConfigService} from './services/config/config.service';
import {NavigationComponent} from './components/navigation/navigation.component';
import { ApiCardListComponent } from './components/api-card-list/api-card-list.component';

MODIFY
src/app/components/api-card-list/api-card-list.component.html
src/app/components/api-card-list/api-card-list.component.html
<input matInput type="search"
placeholder="search here"
class="search-input"
- (input)="inputEvent = OnInput($event)" >
+ (input)="OnInput($event)" >
</mat-form-field>
</ng-container>
<ng-container class="api-card-list">
- <app-api-card *ngFor="let api of apiService.apis;" [api]="api" class="api-card"></app-api-card>
+ <app-api-card *ngFor="let api of apis;" [api]="api" class="api-card"></app-api-card>
</ng-container>
<ng-container *ngIf="listType==='api'">
- <mat-paginator [length]="apiService.totalSize"
- [pageSize]="apiService.searchCriteria.paging.pageSize"
+ <mat-paginator [length]="totalSize"
+ [pageSize]="searchCriteria.paging.pageSize"
[pageSizeOptions]="[4, 8, 12, 16]"
- (page)="pageEvent = OnPageChange($event)">
+ (page)="OnPageChange($event)">
</mat-paginator>
</ng-container>

MODIFY
src/app/components/api-card-list/api-card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
import {Component, Input, OnInit} from '@angular/core';
-import {ApiSummaryBean} from "../../services/backend/backend.service";
+import {ApiSummaryBean, SearchCriteriaBean} from "../../services/backend/backend.service";
import {ApiService} from "../../services/api/api.service";
import {PageEvent} from "@angular/material/paginator";
@@ -11,14 +11,25 @@ import {PageEvent} from "@angular/material/paginator";
export class ApiCardListComponent implements OnInit {
apis: ApiSummaryBean[] = [];
+ totalSize: number = 0;
+ searchCriteria: SearchCriteriaBean = {
+ filters: [{
+ name: "name",
+ value: "*",
+ operator: "like"
+ }],
+ paging: {
+ page: 1,
+ pageSize: 8
+ }
+ };
@Input() listType = "";
- pageEvent: void;
- inputEvent: void;
constructor(public apiService: ApiService) { }
ngOnInit(): void {
+ this.apis = [];
if (this.listType === "api") {
this.getApis();
} else if (this.listType === "featuredApi") {
@@ -27,23 +38,28 @@ export class ApiCardListComponent implements OnInit {
}
OnInput(event:any){
- this.apiService.searchCriteria.paging.page = 1;
- this.apiService.searchCriteria.filters[0].value = '*' + event.target.value + '*';
+ this.searchCriteria.paging.page = 1;
+ this.searchCriteria.filters[0].value = '*' + event.target.value + '*';
this.getApis();
}
OnPageChange(event: PageEvent){
- this.apiService.searchCriteria.paging.page = event.pageIndex + 1;
- this.apiService.searchCriteria.paging.pageSize = event.pageSize;
+ this.searchCriteria.paging.page = event.pageIndex + 1;
+ this.searchCriteria.paging.pageSize = event.pageSize;
this.getApis();
}
getApis(): void {
- this.apiService.searchApis();
+ this.apiService.searchApis(this.searchCriteria).subscribe(searchResult => {
+ this.apis = searchResult.beans;
+ this.totalSize = searchResult.totalSize;
+ });
}
getFeaturedApis(): void {
- this.apiService.getFeaturedApis();
+ this.apiService.getFeaturedApis(this.searchCriteria).subscribe(searchResult => {
+ this.apis = searchResult.beans;
+ });
}
}

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.html
src/app/components/marketplace-api-details/marketplace-api-details.component.html
-<ng-container *ngIf="apiService.currentApi">
- <app-marketplace-api-description [api]="apiService.currentApi"></app-marketplace-api-description>
+<ng-container *ngIf="api">
+ <app-marketplace-api-description [api]="api"></app-marketplace-api-description>
<h2>Plans</h2>
<app-plan-card-list></app-plan-card-list>
</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
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ApiService} from "../../services/api/api.service";
import {ApiBean} from "../../services/backend/backend.service";
-import {Api} from "../../interfaces/api";
import {HeroService} from '../../services/hero/hero.service';
@Component({
@@ -11,16 +10,14 @@ import {HeroService} from '../../services/hero/hero.service';
styleUrls: ['./marketplace-api-details.component.sass']
})
export class MarketplaceApiDetailsComponent implements OnInit {
-
- @Input() id: string = "";
-
- api: ApiBean = {};
-
constructor(private route: ActivatedRoute,
public apiService: ApiService,
private heroService: HeroService,
private router: Router) { }
+ api!:ApiBean;
+
+
ngOnInit(): void {
this.getApi();
this.setUpHero();
@@ -33,16 +30,15 @@ export class MarketplaceApiDetailsComponent implements OnInit {
}
getApi() {
- const orgId = this.route.snapshot.paramMap.get('orgId');
- const apiId = this.route.snapshot.paramMap.get('apiId');
-
- this.apiService.getApi(orgId!, apiId!).then((response: any) => {
- if (response.data) {
- this.apiService.currentApi = response.data
- }else{
- console.warn('Could not find API: ' + apiId);
- this.router.navigate(['marketplace']);
- }
- });;
+ const orgId = this.route.snapshot.paramMap.get('orgId')!;
+ const apiId = this.route.snapshot.paramMap.get('apiId')!;
+
+ this.apiService.getApi(orgId, apiId).subscribe(
+ api => {
+ this.api = api;
+ }, error => {
+ console.log(error.status);
+ this.router.navigate(['marketplace'])
+ });
};
}

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
import {Component, OnInit} from '@angular/core';
-import {Api} from "../../interfaces/api";
+import {ActivatedRoute} from '@angular/router';
import {HeroService} from '../../services/hero/hero.service';
import {TranslateService} from '@ngx-translate/core';
+import {ApiService} from "../../services/api/api.service";
+import {ApiBean} from "../../services/backend/backend.service";
@Component({
selector: 'app-marketplace-signup-stepper',
@@ -11,42 +13,7 @@ import {TranslateService} from '@ngx-translate/core';
export class MarketplaceSignupStepperComponent implements OnInit {
// ToDo replace fixed api mockData with backendCall
- api: Api = {
- id: "2",
- title: "Lorem ipsum dolor",
- shortDescription: "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
- longDescription: "# Fere in tibi de aula actusque\n" +
- "\n" +
- "## Circuitu gurgite dum inmensum litora pater quid\n" +
- "\n" +
- "Lorem markdownum Ismenis est pares videt tacito; tibi gestit senem *unda*.\n" +
- "Consumpserat dedit retinentibus recepta venisset digitis. Miratur commenta suae,\n" +
- "venatrixque notitiam.\n" +
- "\n" +
- "> **Tamen tanta retardat** et inane vivere tremescere laetus, erat et virisque\n" +
- "> iussa, non nisi humano humum factas praeceps. Amissum palmae. Apri vellent\n" +
- "> Cadmo, *cremabit* haruspex liquefacta ferrum.\n" +
- "\n" +
- "[Ungues de](http://est-nato.io/desierim-illa) ne petiere fuit. **Mora** cur\n" +
- "altera Pallados [suarum quae](http://alii-iungitur.io/animo) colla; e, cava tela\n" +
- "motae lacrimas: pendens vultus fateri.\n" +
- "\n" +
- "## Volantes vulnus defendentia divis viscera\n" +
- "\n" +
- "*Nec nescio* modo, circum doluit tetigere ille ingemuit refovet, vallis dant, in\n" +
- "fretum cumque Laurentes dabis procul. Crescente *sinitis*. *Fossa* siccis neci\n" +
- "nullo monstro Saeculaque sororem ipsaque concubitus pecudesque vidit clipeo\n" +
- "pruniceum, cuncta [Castrumque](http://www.hanc-opus.net/) in amat. Et integer\n" +
- "inducit Cadmus robora lumina *nitor*; que miser.\n" +
- "\n" +
- "- Amorum mitia quaerit\n" +
- "- Mater haec cum trans nemoris feriente vox\n" +
- "- Potuisset nec\n" +
- "- Ignis optat tollens gaudebat\n" +
- "- Haec soli creditur pressam",
- icon: "data:image/png;base64,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",
- featuredApi: true
- };
+ api!: ApiBean;
features: string[] = ['fast', 'free', 'fancy features'];
markdown: string = '# In inmotae messes et tamen sustinuit fieri\n' +
@@ -98,10 +65,13 @@ export class MarketplaceSignupStepperComponent implements OnInit {
'fugisse quae est: a.';
constructor(private heroService: HeroService,
+ private apiService: ApiService,
+ private route: ActivatedRoute,
private translater: TranslateService) { }
ngOnInit(): void {
this.setUpHero();
+ this.getApi();
}
private setUpHero() {
@@ -109,4 +79,16 @@ export class MarketplaceSignupStepperComponent implements OnInit {
title: this.translater.instant('API_SIGN_UP.TITLE')
});
}
+
+ private getApi(): void {
+ const orgId = this.route.snapshot.paramMap.get('orgId')!;
+ const apiId = this.route.snapshot.paramMap.get('apiId')!;
+
+ this.apiService.getApi(orgId, apiId);
+
+ this.apiService.currentApi.subscribe(
+ api => {
+ this.api = api;
+ });
+ }
}

MODIFY
src/app/components/plan-card/plan-card.component.html
src/app/components/plan-card/plan-card.component.html
</mat-list>
</mat-card-content>
<mat-card-actions>
- <button mat-raised-button [routerLink]="['/api-signup']">SIGN UP</button>
+ <button mat-raised-button [routerLink]="['/api-signup', orgId, apiId]">SIGN UP</button>
</mat-card-actions>
</mat-card>

MODIFY
src/app/components/plan-card/plan-card.component.ts
src/app/components/plan-card/plan-card.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {Plan} from "../../interfaces/plan";
+import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-plan-card',
@@ -8,9 +9,13 @@ import {Plan} from "../../interfaces/plan";
})
export class PlanCardComponent implements OnInit {
- constructor() { }
+ constructor(private route: ActivatedRoute) { }
+ orgId: String = '';
+ apiId: String = '';
ngOnInit(): void {
+ this.orgId = this.route.snapshot.paramMap.get('orgId')!;
+ this.apiId = this.route.snapshot.paramMap.get('apiId')!;
}
@Input() plan: Plan = {
id: "",

MODIFY
src/app/services/api/api.service.ts
src/app/services/api/api.service.ts
import { Injectable } from '@angular/core';
-import {ApiBean, ApiSummaryBean, BackendService, SearchCriteriaBean} from "../backend/backend.service";
+import {
+ ApiBean,
+ ApiSummaryBean,
+ ApiVersionSummaryBean,
+ BackendService,
+ SearchCriteriaBean, SearchResultsBeanApiSummaryBean
+} from "../backend/backend.service";
+import {Observable, throwError} from "rxjs";
+import {catchError, map, retry} from "rxjs/operators";
@Injectable({
providedIn: 'root'
@@ -7,7 +15,8 @@ import {ApiBean, ApiSummaryBean, BackendService, SearchCriteriaBean} from "../ba
export class ApiService {
apis: ApiSummaryBean[] = [];
- currentApi: ApiBean = {};
+ currentApi!: Observable<ApiBean>;
+ currentApiVersions!: Observable<ApiVersionSummaryBean[]>
totalSize: number = 0;
searchCriteria: SearchCriteriaBean = {
filters: [{
@@ -23,20 +32,51 @@ export class ApiService {
constructor(private backendService: BackendService) { }
- getFeaturedApis(): void {
- this.searchApis();
- this.apis= this.apis.slice(0, 4);
+ getFeaturedApis(searchCriteria: SearchCriteriaBean): Observable<SearchResultsBeanApiSummaryBean> {
+ return this.searchApis(searchCriteria).pipe(
+ map( searchResult => {
+ searchResult.beans = searchResult.beans.slice(0,4)
+ return searchResult
+ })
+ );
+ }
+
+ getApi(orgId: String, apiId: String): Observable<ApiBean> {
+ return this.currentApi = this.backendService.getApi(orgId, apiId).pipe(
+ retry(1),
+ catchError(this.handleError)
+ );
}
- getApi(orgId: String, apiId: String): Promise<any> {
- return this.backendService.getApi(orgId, apiId);
+ getApiVersions(orgId: String, apiId: String): Observable<ApiVersionSummaryBean[]> {
+ return this.currentApiVersions = this.backendService.getApiVersions(orgId, apiId).pipe(
+ retry(1),
+ catchError(this.handleError)
+ );
}
- searchApis(): void {
- this.backendService.searchApis(this.searchCriteria)
- .then(response => {
- this.totalSize = response.data.totalSize;
- this.apis = response.data.beans;
- });
+
+
+ searchApis(searchCriteria: SearchCriteriaBean): Observable<SearchResultsBeanApiSummaryBean> {
+ return this.backendService.searchApis(searchCriteria).pipe(
+ retry(1),
+ catchError(this.handleError)
+ );
+ }
+
+
+ handleError(error: any) {
+ let errorMessage = '';
+ if (error.error instanceof ErrorEvent) {
+ // client-side error
+ // ToDo do something meaningful with error
+ errorMessage = `Error: ${error.error.message}`;
+ } else {
+ // server-side error
+ // ToDo do something meaningful with error
+ errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+ }
+ window.alert(errorMessage);
+ return throwError(errorMessage);
}
}

MODIFY
src/app/services/backend/backend.service.ts
src/app/services/backend/backend.service.ts
import { Injectable } from '@angular/core';
-import Axios from 'axios';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {map} from "rxjs/operators";
export interface ApiSummaryBean {
organizationId?: string;
@@ -52,10 +54,10 @@ export interface OrganizationBean {
}
export interface SearchResultsBeanApiSummaryBean {
- beans?: ApiSummaryBean[];
+ beans: ApiSummaryBean[];
/** @format int32 */
- totalSize?: number;
+ totalSize: number;
}
export interface SearchCriteriaBean {
@@ -86,46 +88,47 @@ export interface PagingBean {
export class BackendService {
- constructor() { }
+ constructor(private http: HttpClient) { }
// ToDo replace hard-coded URL with variable URL in config File
private apiMgmtUiRestUrl: string = 'https://vagrantguest/pas/apiman';
// ToDo remove credentials and use anonymous call
private credentials: string = 'test:test1234' // Format username:password
-
+ private httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Basic ' + btoa(this.credentials)
+ })
+ };
/**
* Searches apis
*/
- public async searchApis(searchCriteria: SearchCriteriaBean): Promise<any> {
+ public searchApis(searchCriteria: SearchCriteriaBean): Observable<SearchResultsBeanApiSummaryBean> {
const url = this.apiMgmtUiRestUrl + '/search/apis';
- return await Axios.post(url, searchCriteria,{
- headers: {
- 'accept': 'application/json',
- 'Authorization': 'Basic ' + btoa(this.credentials)
- }});
+ return this.http.post(url, searchCriteria, this.httpOptions) as Observable<SearchResultsBeanApiSummaryBean>;
}
/**
* Get Api
*/
- public async getApi(orgId: String, apiId: String): Promise<any> {
- const url = this.apiMgmtUiRestUrl + '/organizations/' + orgId + '/apis/' + apiId
- return await Axios.get(url,{
- headers: {
- 'accept': 'application/json',
- 'Authorization': 'Basic ' + btoa(this.credentials)
- }});
+ public getApi(orgId: String, apiId: String): Observable<ApiBean> {
+ const url = this.apiMgmtUiRestUrl + `/organizations/${orgId}/apis/${apiId}`;
+ return this.http.get(url, this.httpOptions) as Observable<ApiBean>;
}
/**
* Get Api Versions
*/
- public async getApiVersions(orgId: String, apiId: String): Promise<ApiVersionSummaryBean[]> {
- const url = this.apiMgmtUiRestUrl + '/organizations/' + orgId + '/apis/' + apiId + '/versions'
- return await Axios.get(url,{
- headers: {
- 'accept': 'application/json',
- 'Authorization': 'Basic ' + btoa(this.credentials)
- }});
+ public getApiVersions(orgId: String, apiId: String): Observable<ApiVersionSummaryBean[]> {
+ const url = this.apiMgmtUiRestUrl + `/organizations/${orgId}/apis/${apiId}/versions`
+ return this.http.get<ApiVersionSummaryBean[]>(url, this.httpOptions).pipe(
+ map(apiVersions => {
+ apiVersions.sort((a, b) => {
+ // @ts-ignore
+ return a.version > b.version ? -1 : 1;
+ })
+ return apiVersions
+ })
+ );
}
}

replace axios with angular http client