chore: getting glyco-database #7

client/projects/website/src/app/modules/glyco-databases/glyco-databases.component.ts

@@ -1,13 +1,9 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
-} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {Observable} from 'rxjs';
 import {finalize, map} from 'rxjs/operators';
 import {GlycoDatabases} from '../../shared/interfaces/collections/glyco-databases.interface';
-import {JasperoApiService} from '../../shared/services/jaspero-api/jaspero-api.service';
+import {FirestoreCollection} from '../../shared/enums/firestore-collection.enum';
+import {AngularFirestore} from '@angular/fire/firestore';
 
 @Component({
   selector: 'hg-glyco-databases',
@@ -17,22 +13,29 @@ import {JasperoApiService} from '../../shared/services/jaspero-api/jaspero-api.s
 })
 export class GlycoDatabasesComponent implements OnInit {
   constructor(
-    private _jasperoApi: JasperoApiService,
-    private _cdr: ChangeDetectorRef
+    private afs: AngularFirestore,
+    private cdr: ChangeDetectorRef
   ) {}
 
   loading = true;
   glycoDatabases$: Observable<GlycoDatabases[]>;
 
-  ngOnInit() {
-    this.glycoDatabases$ = this._jasperoApi
-      .get<GlycoDatabases>('glyco-databases')
+  ngOnInit(): void {
+    this.glycoDatabases$ = this.afs
+      .collection(FirestoreCollection.Resources)
+      .snapshotChanges()
       .pipe(
-        map(res => res.data),
+        map(actions =>
+          actions.map(action => ({
+            id: action.payload.doc.id,
+            ...(action.payload.doc.data() as any)
+          }))
+        ),
         finalize(() => {
           this.loading = false;
-          this._cdr.detectChanges();
+          this.cdr.detectChanges();
         })
       );
   }
+
 }