Task #44 - Create ApiService and ApiResponse classes for backend communication

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent],
@@ -15,7 +16,8 @@ import { AppRoutingModule } from './app-routing.module';
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule,
   ],
   providers: [
     StatusBar,

src/app/home/home.module.ts

@@ -5,12 +5,14 @@ import { IonicModule } from '@ionic/angular';
 import { RouterModule } from '@angular/router';
 
 import { HomePage } from './home.page';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    HttpClientModule,
     RouterModule.forChild([
       {
         path: '',

src/app/home/home.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {ApiService} from '../service/api.service';
 
 @Component({
   selector: 'app-home',
@@ -7,6 +8,8 @@ import { Component } from '@angular/core';
 })
 export class HomePage {
 
-  constructor() {}
+  constructor(
+      protected api: ApiService,
+  ) {}
 
 }

src/app/service/api.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ApiService = TestBed.get(ApiService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/api.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import ApiResponse from '../structures/ApiResponse';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  protected baseEndpoint: string = environment.backendBase;
+
+  constructor(
+      protected http: HttpClient,
+  ) { }
+
+  public get(endpoint, params = {}): Observable<ApiResponse> {
+    return this.request(endpoint, params, 'get');
+  }
+
+  public post(endpoint, body = {}): Observable<ApiResponse> {
+    return this.request(endpoint, body, 'post');
+  }
+
+  public request(endpoint, params = {}, method: 'get'|'post' = 'get'): Observable<ApiResponse> {
+    return new Observable<ApiResponse>(sub => {
+      const data: any = {}
+      if ( method === 'get' ) {
+        data.params = params;
+      } else {
+        data.body = params;
+      }
+
+      this.http[method](this._build_url(endpoint), data).subscribe({
+        next: (response: any) => {
+          sub.next(new ApiResponse(response));
+        },
+        error: (err) => {
+          const response = {
+            status: err.status,
+            message: err.message,
+            data: err.error,
+          };
+
+          sub.next(new ApiResponse(response));
+        },
+      });
+    });
+  }
+
+  private _build_url(endpoint) {
+    if ( !endpoint.startsWith('/') ) {
+      endpoint = `/${endpoint}`;
+    }
+
+    return `${this.baseEndpoint.endsWith('/') ? this.baseEndpoint.slice(0, -1) : this.baseEndpoint}${endpoint}`;
+  }
+}

src/app/structures/ApiResponse.ts

@@ -0,0 +1,11 @@
+export default class ApiResponse {
+    public data: any;
+    public message: string;
+    public status: number;
+
+    constructor(data: { status: number, message: string, data: any }) {
+        this.data = data.data;
+        this.message = data.message;
+        this.status = data.status;
+    }
+}

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  backendBase: '/link_api/api/v1',
 };
 
 /*