BETTERZON-33: Implementing API service class

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",

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"
     }
 }

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();
+  });
+});

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<Product[]> {
+        try {
+            const prods = this.http.get<Product[]>((this.apiUrl + '/products'));
+            console.log(prods);
+            return prods;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+}

Frontend/src/app/app.module.ts

@@ -1,10 +1,11 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { HelloWorldComponent } from './hello-world/hello-world.component';
+import {HelloWorldComponent} from './hello-world/hello-world.component';
-import { AppRoutingModule } from './app-routing.module';
+import {AppRoutingModule} from './app-routing.module';
-import { ProductListComponent } from './product-list/product-list.component';
+import {ProductListComponent} from './product-list/product-list.component';
 
 @NgModule({
     declarations: [
@@ -14,9 +15,11 @@ import { ProductListComponent } from './product-list/product-list.component';
     ],
     imports: [
         BrowserModule,
-    AppRoutingModule
+        AppRoutingModule,
+        HttpClientModule
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

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;
+}

Frontend/src/app/product-list/product-list.component.html

@@ -1,4 +1,4 @@
 <meta charset="UTF-8">
-<p *ngFor="let person of testList">
+<p *ngFor="let product of products">
-    {{person}}
+    {{product.name}}
 </p>

Frontend/src/app/product-list/product-list.component.ts

@@ -1,4 +1,8 @@
-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',
@@ -6,13 +10,17 @@ import { Component, OnInit } from '@angular/core';
     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);
     }
 
 }