feat: Switch from Observables to Promises and return only new logs

src/app/about/about.component.ts

@@ -15,7 +15,7 @@ import { interval } from 'rxjs';
 export class AboutComponent implements OnInit {
   version: string | null = environment.version;
 
-  data: Array<Object>;
+  // data: Array<Object>;
 
   map: mapboxgl.Map;
   style = 'mapbox://styles/mapbox/streets-v11';
@@ -24,7 +24,7 @@ export class AboutComponent implements OnInit {
 
   constructor(private logsService: LogsService) {}
 
-  ngOnInit() {
+  async ngOnInit() {
     Object.getOwnPropertyDescriptor(mapboxgl, 'accessToken').set(environment.mapbox.accessToken);
     this.map = new mapboxgl.Map({
       container: 'map',
@@ -36,9 +36,9 @@ export class AboutComponent implements OnInit {
     // Add map controls
     // this.map.addControl(new mapboxgl.NavigationControl());
 
-    this.logsService.getLogs().subscribe((data: Array<Object>) => {
-      this.data = data;
-      for (let log of data) {
+    let data = await this.logsService.getUpdates();
+    for (let log of data) {
+      if (log['gps_data']['status'] == 'A') {
         let html =
           log['gps_data']['datestamp'] +
           ' ' +
@@ -58,6 +58,6 @@ export class AboutComponent implements OnInit {
           .setPopup(popup)
           .addTo(this.map);
       }
-    });
+    }
   }
 }

src/app/logs.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
+import { map, catchError, last } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -9,13 +9,32 @@ import { map, catchError } from 'rxjs/operators';
 export class LogsService {
   constructor(private httpClient: HttpClient) {}
 
-  getLogs(): Observable<Array<Object>> {
-    return this.httpClient.get('http://192.168.100.4:4000/logs').pipe(
-      map((body: any) => {
-        console.log(body);
-        return body;
-      }),
-      catchError(() => of('Error, could not load logs'))
-    );
+  previousData: Array<Object> | undefined = undefined;
+
+  getLogs(): Promise<Array<Object>> {
+    return this.httpClient
+      .get('http://192.168.100.4:3000/logs')
+      .pipe(
+        map((body: any) => {
+          return body;
+        }),
+        catchError(() => of('Error, could not load logs'))
+      )
+      .toPromise();
+  }
+
+  async getUpdates(): Promise<Array<Object>> {
+    if (!this.previousData) {
+      let data = await this.getLogs();
+      this.previousData = data;
+      return data;
+    } else {
+      let latestData = await this.getLogs();
+      let changes = latestData.filter(function(e) {
+        return this.indexOf(e) < 0;
+      }, this.previousData);
+      this.previousData = latestData;
+      return changes;
+    }
   }
 }