BETTERZON-33: Implementing API service class

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,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 {
+}

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">
-    {{person}}
+<p *ngFor="let product of products">
+    {{product.name}}
 </p>

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