From 3831694d3e40677510c69fca6ccde399ca9e0623 Mon Sep 17 00:00:00 2001
From: Spencer Ofwiti <maxspencer56@gmail.com>
Date: Fri, 4 Jun 2021 11:01:20 +0300
Subject: [PATCH] Refactor token list to use Observables for tracking changes.

---
 src/app/_services/auth.service.ts        |  2 +-
 src/app/_services/token.service.ts       | 33 +++++++++++++++++++-----
 src/app/pages/tokens/tokens.component.ts | 11 +++++---
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/app/_services/auth.service.ts b/src/app/_services/auth.service.ts
index 130a425..8ebc9d8 100644
--- a/src/app/_services/auth.service.ts
+++ b/src/app/_services/auth.service.ts
@@ -209,7 +209,7 @@ export class AuthService {
     this.trustedUsersList.next(this.trustedUsers);
   }
 
-  getTrustedUsers(): any {
+  getTrustedUsers(): void {
     this.mutableKeyStore.getPublicKeys().forEach((key) => {
       this.addTrustedUser(key.users[0].userId);
     });
diff --git a/src/app/_services/token.service.ts b/src/app/_services/token.service.ts
index f5b69f1..d9ffed8 100644
--- a/src/app/_services/token.service.ts
+++ b/src/app/_services/token.service.ts
@@ -4,6 +4,7 @@ import { TokenRegistry } from '@app/_eth';
 import { HttpClient } from '@angular/common/http';
 import { RegistryService } from '@app/_services/registry.service';
 import { Token } from '@app/_models';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -12,6 +13,9 @@ export class TokenService {
   registry: CICRegistry;
   tokenRegistry: TokenRegistry;
   onload: (status: boolean) => void;
+  tokens: Array<Token> = [];
+  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens);
+  tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
 
   constructor(private httpClient: HttpClient) {}
 
@@ -25,14 +29,24 @@ export class TokenService {
     };
   }
 
-  async getTokens(): Promise<Array<Token>> {
+  addToken(token: Token): void {
+    const savedIndex = this.tokens.findIndex((tk) => tk.address === token.address);
+    if (savedIndex === 0) {
+      return;
+    }
+    if (savedIndex > 0) {
+      this.tokens.splice(savedIndex, 1);
+    }
+    this.tokens.unshift(token);
+    this.tokensList.next(this.tokens);
+  }
+
+  async getTokens(): Promise<void> {
     const count: number = await this.tokenRegistry.totalTokens();
-    const tokens: Array<Token> = [];
     for (let i = 0; i < count; i++) {
       const token: Token = await this.getTokenByAddress(await this.tokenRegistry.entry(i));
-      tokens.push(token);
+      this.addToken(token);
     }
-    return tokens;
   }
 
   async getTokenByAddress(address: string): Promise<Token> {
@@ -46,9 +60,14 @@ export class TokenService {
     return token;
   }
 
-  async getTokenBySymbol(symbol: string): Promise<Token> {
-    const tokens: Array<Token> = await this.getTokens();
-    return tokens.find((token) => token.symbol === symbol);
+  async getTokenBySymbol(symbol: string): Promise<Observable<Token>> {
+    const tokenSubject: Subject<Token> = new Subject<Token>();
+    await this.getTokens();
+    this.tokensSubject.subscribe((tokens) => {
+      const queriedToken = tokens.find((token) => token.symbol === symbol);
+      tokenSubject.next(queriedToken);
+    });
+    return tokenSubject.asObservable();
   }
 
   async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> {
diff --git a/src/app/pages/tokens/tokens.component.ts b/src/app/pages/tokens/tokens.component.ts
index 6a2f2a8..3c86267 100644
--- a/src/app/pages/tokens/tokens.component.ts
+++ b/src/app/pages/tokens/tokens.component.ts
@@ -30,12 +30,15 @@ export class TokensComponent implements OnInit {
   async ngOnInit(): Promise<void> {
     await this.tokenService.init();
     this.tokenService.onload = async (status: boolean): Promise<void> => {
-      this.tokens = await this.tokenService.getTokens();
-      this.loggingService.sendInfoLevelMessage(this.tokens);
-      this.dataSource = new MatTableDataSource(this.tokens);
+      await this.tokenService.getTokens();
+    };
+    this.tokenService.tokensSubject.subscribe((tokens) => {
+      this.loggingService.sendInfoLevelMessage(tokens);
+      this.dataSource = new MatTableDataSource(tokens);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
-    };
+      this.tokens = tokens;
+    });
   }
 
   doFilter(value: string): void {