From ecf457e073acd2f03e95c2f72b43d214c4f77609 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 4 Jul 2026 22:15:03 +0700
Subject: [PATCH] Task/improve type safety in api page and public page
 components (#7214)

* fix(client): fallback api key to empty string

* feat(client): replace constructor based DI with inject functions

* feat(client): enforce encapsulation

* fix(client): fallback name to symbol in public page
---
 .../src/app/pages/api/api-page.component.ts   | 31 ++++++++++---------
 .../app/pages/public/public-page.component.ts |  2 +-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/app/pages/api/api-page.component.ts b/apps/client/src/app/pages/api/api-page.component.ts
index b949cfb0f..0f39c67d6 100644
--- a/apps/client/src/app/pages/api/api-page.component.ts
+++ b/apps/client/src/app/pages/api/api-page.component.ts
@@ -20,7 +20,7 @@ import {
   HttpHeaders,
   HttpParams
 } from '@angular/common/http';
-import { Component, DestroyRef, OnInit } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatCardModule } from '@angular/material/card';
 import { format, startOfYear } from 'date-fns';
@@ -38,28 +38,29 @@ import { FetchFailure, FetchResult } from './interfaces/interfaces';
   templateUrl: './api-page.html'
 })
 export class GfApiPageComponent implements OnInit {
-  public aiServiceHealth$: Observable<FetchResult<AiServiceHealthResponse>>;
-  public assetProfile$: Observable<
+  protected aiServiceHealth$: Observable<FetchResult<AiServiceHealthResponse>>;
+  protected assetProfile$: Observable<
     FetchResult<DataProviderGhostfolioAssetProfileResponse>
   >;
-  public dividends$: Observable<FetchResult<DividendsResponse['dividends']>>;
-  public historicalData$: Observable<
+  protected dividends$: Observable<FetchResult<DividendsResponse['dividends']>>;
+  protected historicalData$: Observable<
     FetchResult<HistoricalResponse['historicalData']>
   >;
-  public isinLookupItems$: Observable<FetchResult<LookupResponse['items']>>;
-  public lookupItems$: Observable<FetchResult<LookupResponse['items']>>;
-  public quotes$: Observable<FetchResult<QuotesResponse['quotes']>>;
-  public status$: Observable<FetchResult<DataProviderGhostfolioStatusResponse>>;
+  protected isinLookupItems$: Observable<FetchResult<LookupResponse['items']>>;
+  protected lookupItems$: Observable<FetchResult<LookupResponse['items']>>;
+  protected quotes$: Observable<FetchResult<QuotesResponse['quotes']>>;
+  protected status$: Observable<
+    FetchResult<DataProviderGhostfolioStatusResponse>
+  >;
 
   private apiKey: string;
 
-  public constructor(
-    private destroyRef: DestroyRef,
-    private http: HttpClient
-  ) {}
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly http = inject(HttpClient);
 
   public ngOnInit() {
-    this.apiKey = prompt($localize`Please enter your Ghostfolio API key:`);
+    this.apiKey =
+      prompt($localize`Please enter your Ghostfolio API key:`) ?? '';
 
     this.aiServiceHealth$ = this.fetchAiServiceHealth();
     this.assetProfile$ = this.fetchAssetProfile({ symbol: 'AAPL' });
@@ -71,7 +72,7 @@ export class GfApiPageComponent implements OnInit {
     this.status$ = this.fetchStatus();
   }
 
-  public isFetchFailure(value: unknown): value is FetchFailure {
+  protected isFetchFailure(value: unknown): value is FetchFailure {
     return isObject(value) && value !== null && 'fetchError' in value;
   }
 
diff --git a/apps/client/src/app/pages/public/public-page.component.ts b/apps/client/src/app/pages/public/public-page.component.ts
index 43d961c1d..91410d5f7 100644
--- a/apps/client/src/app/pages/public/public-page.component.ts
+++ b/apps/client/src/app/pages/public/public-page.component.ts
@@ -249,7 +249,7 @@ export class GfPublicPageComponent implements OnInit {
       }
 
       this.symbols[prettifySymbol(symbol)] = {
-        name: position.assetProfile.name,
+        name: position.assetProfile.name ?? prettifySymbol(symbol),
         symbol: prettifySymbol(symbol),
         value: isNumber(position.valueInBaseCurrency)
           ? position.valueInBaseCurrency