Implement bikesService

src/app/pages/tables/bikes/bikes.component.ts

@@ -1,33 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
-import { GetCargoBikesGQL, GetCargoBikesQuery } from '../../../../generated/graphql';
-
-type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBikes"]>;
+import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
 
 @Component({
   selector: 'app-bikes',
   templateUrl: './bikes.component.html',
   styleUrls: ['./bikes.component.scss'],
 })
-export class BikesComponent implements OnInit {
+export class BikesComponent {
   displayedColumns: string[] = ['id', 'name', 'weight', 'symbol'];
   
   bikes: CargoBikeResult[];
 
-  constructor(private bikesGQL: GetCargoBikesGQL) {
-    this.bikesGQL.watch().valueChanges.subscribe((result) => {
-      this.bikes = result.data.cargoBikes;
-    });
-  }
+  constructor(private bikesService: BikesService) {
+    bikesService.bikes.subscribe(bikes => this.bikes = bikes);
 
-  onTableInput(element) {
-    //element.weight += 1;
-    console.log(element);
+    bikesService.loadBikes();
   }
-
-  onFocus(event) {
-    console.log(event);
-  }
-
-  ngOnInit(): void {}
 }

src/app/services/bikes.service.ts

@@ -1,9 +1,21 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { GetCargoBikesGQL, GetCargoBikesQuery } from 'src/generated/graphql';
+import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
+
+export type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBikes"]>;
 
 @Injectable({
   providedIn: 'root'
 })
 export class BikesService {
+  bikes: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
+
+  constructor(private bikesGQL: GetCargoBikesGQL) { }
 
-  constructor() { }
+  loadBikes() {
+    this.bikesGQL.watch().valueChanges.subscribe((result) => {
+      this.bikes.next(result.data.cargoBikes);
+    });
+  }
 }