From 24c64dd7097538f5f51ea75cf7dc6d53a79a814d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20M=C3=BCller?= Date: Wed, 2 Dec 2020 09:57:03 +0100 Subject: [PATCH] BETTERZON-33: Implementing API service class --- Frontend/package-lock.json | 11 +----- Frontend/package.json | 5 +-- Frontend/src/app/api.service.spec.ts | 16 ++++++++ Frontend/src/app/api.service.ts | 27 +++++++++++++ Frontend/src/app/app.module.ts | 39 ++++++++++--------- Frontend/src/app/models/product.ts | 14 +++++++ .../product-list/product-list.component.html | 4 +- .../product-list/product-list.component.ts | 22 +++++++---- 8 files changed, 99 insertions(+), 39 deletions(-) create mode 100644 Frontend/src/app/api.service.spec.ts create mode 100644 Frontend/src/app/api.service.ts create mode 100644 Frontend/src/app/models/product.ts diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index d8a5269..a0ea13f 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -2472,14 +2472,6 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz", "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==" }, - "axios": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", - "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", - "requires": { - "follow-redirects": "^1.10.0" - } - }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -5333,7 +5325,8 @@ "follow-redirects": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", - "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==" + "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==", + "dev": true }, "for-in": { "version": "1.0.2", diff --git a/Frontend/package.json b/Frontend/package.json index 09e167c..75edaaf 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -20,7 +20,6 @@ "@angular/platform-browser": "^10.2.3", "@angular/platform-browser-dynamic": "^10.2.3", "@angular/router": "^10.2.3", - "axios": "^0.21.0", "ng": "0.0.0", "rxjs": "~6.6.0", "tslib": "^2.0.3", @@ -42,8 +41,8 @@ "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", - "typescript": "<4.1.0", "ts-node": "~8.3.0", - "tslint": "~6.1.0" + "tslint": "~6.1.0", + "typescript": "<4.1.0" } } diff --git a/Frontend/src/app/api.service.spec.ts b/Frontend/src/app/api.service.spec.ts new file mode 100644 index 0000000..c0310ae --- /dev/null +++ b/Frontend/src/app/api.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApiService } from './api.service'; + +describe('ApiService', () => { + let service: ApiService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApiService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/api.service.ts b/Frontend/src/app/api.service.ts new file mode 100644 index 0000000..e029888 --- /dev/null +++ b/Frontend/src/app/api.service.ts @@ -0,0 +1,27 @@ +import {Injectable} from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; +import process from 'process'; +import {Product} from './models/product'; +import {Observable, of} from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class ApiService { + apiUrl = 'https://backend.betterzon.xyz'; + + constructor( + private http: HttpClient + ) { + } + + getProducts(): Observable { + try { + const prods = this.http.get((this.apiUrl + '/products')); + console.log(prods); + return prods; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } +} diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index 79fa7bb..ba1c06c 100644 --- a/Frontend/src/app/app.module.ts +++ b/Frontend/src/app/app.module.ts @@ -1,22 +1,25 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {HttpClientModule} from '@angular/common/http'; +import {NgModule} from '@angular/core'; -import { AppComponent } from './app.component'; -import { HelloWorldComponent } from './hello-world/hello-world.component'; -import { AppRoutingModule } from './app-routing.module'; -import { ProductListComponent } from './product-list/product-list.component'; +import {AppComponent} from './app.component'; +import {HelloWorldComponent} from './hello-world/hello-world.component'; +import {AppRoutingModule} from './app-routing.module'; +import {ProductListComponent} from './product-list/product-list.component'; @NgModule({ - declarations: [ - AppComponent, - HelloWorldComponent, - ProductListComponent - ], - imports: [ - BrowserModule, - AppRoutingModule - ], - providers: [], - bootstrap: [AppComponent] + declarations: [ + AppComponent, + HelloWorldComponent, + ProductListComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule + ], + providers: [], + bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/Frontend/src/app/models/product.ts b/Frontend/src/app/models/product.ts new file mode 100644 index 0000000..8c51860 --- /dev/null +++ b/Frontend/src/app/models/product.ts @@ -0,0 +1,14 @@ +export interface Product { + product_id: number; + asin: string; + is_active: boolean; + name: string; + short_description: string; + long_description: string; + image_guid: string; + date_added: Date; + last_modified: Date; + manufacturer_id: number; + selling_rank: string; + category_id: number; +} diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/product-list/product-list.component.html index 8c104c3..c8ee494 100644 --- a/Frontend/src/app/product-list/product-list.component.html +++ b/Frontend/src/app/product-list/product-list.component.html @@ -1,4 +1,4 @@ -

- {{person}} +

+ {{product.name}}

diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts index d3cff64..0b5733e 100644 --- a/Frontend/src/app/product-list/product-list.component.ts +++ b/Frontend/src/app/product-list/product-list.component.ts @@ -1,18 +1,26 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import axios, {AxiosInterceptorManager, AxiosRequestConfig, AxiosResponse} from 'axios'; +import process from 'process'; +import {ApiService} from '../api.service'; +import {Product} from '../models/product'; @Component({ - selector: 'app-product-list', - templateUrl: './product-list.component.html', - styleUrls: ['./product-list.component.css'] + selector: 'app-product-list', + templateUrl: './product-list.component.html', + styleUrls: ['./product-list.component.css'] }) export class ProductListComponent implements OnInit { - testList: string[]; + products: Product[]; - constructor() { + constructor(private apiService: ApiService) { } ngOnInit(): void { - this.testList = ['Herbert', 'Sascha', 'Rolf']; + this.getProducts(); + } + + getProducts(): void { + this.apiService.getProducts().subscribe(products => this.products = products); } }