Bugfix/fix view mode toggle of holdings tab (#3698)

* Fix view mode toggle

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Reworked the portfolio calculator
 
+### Fixed
+
+- Fixed an issue in the view mode toggle of the holdings tab on the home page (experimental)
+
 ## 2.105.0 - 2024-08-21
 
 ### Added

apps/client/src/app/components/header/header.component.ts

@@ -161,10 +161,8 @@ export class HeaderComponent implements OnChanges {
       .putUserSetting({ dateRange })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe();
       });
@@ -191,10 +189,8 @@ export class HeaderComponent implements OnChanges {
       .putUserSetting(userSetting)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe();
       });

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -18,7 +18,7 @@ import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
-import { skip, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'gf-home-holdings',
@@ -87,20 +87,14 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
       });
 
     this.viewModeFormControl.valueChanges
-      .pipe(
+      .pipe(takeUntil(this.unsubscribeSubject))
-        // Skip inizialization: "new FormControl"
-        skip(1),
-        takeUntil(this.unsubscribeSubject)
-      )
       .subscribe((holdingsViewMode) => {
         this.dataService
           .putUserSetting({ holdingsViewMode })
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe(() => {
-            this.userService.remove();
-
             this.userService
-              .get()
+              .get(true)
               .pipe(takeUntil(this.unsubscribeSubject))
               .subscribe((user) => {
                 this.user = user;
@@ -144,7 +138,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
   }
 
   private initialize() {
-    this.viewModeFormControl.disable();
+    this.viewModeFormControl.disable({ emitEvent: false });
 
     if (
       this.hasPermissionToAccessHoldingsChart &&

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -73,10 +73,8 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
       .putUserSetting({ emergencyFund })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -125,10 +125,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       .putUserSetting({ [aKey]: aValue })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -180,10 +178,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       .putUserSetting({ isExperimentalFeatures: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -218,10 +214,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       .putUserSetting({ isRestrictedView: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -259,10 +253,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
       .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -114,10 +114,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .putUserSetting({ benchmark: symbolProfileId })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -103,10 +103,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
       .putUserSetting({ annualInterestRate })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -124,10 +122,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -153,10 +149,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
       .putUserSetting({ savingsRate })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
@@ -174,10 +168,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.userService.remove();
-
         this.userService
-          .get()
+          .get(true)
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;