perf(frontend): replace toSignal with selectSignal

+ replace all toSignal(store.select) calls with store.selectSignal

Author: Quenary

frontend/src/app/app.component.ts

@@ -11,7 +11,6 @@ import {
   MatSidenav,
   MatSidenavContent,
 } from '@angular/material/sidenav';
-import { map } from 'rxjs';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
@@ -22,7 +21,7 @@ import {
   MatListItemIcon,
 } from '@angular/material/list';
 import { Store } from '@ngrx/store';
-import { selectAuthTokenResponse } from './entities/auth/state/auth.selectors';
+import { selectAuthIsAuthorized } from './entities/auth/state/auth.selectors';
 import { AuthActions } from './entities/auth/state/auth.actions';
 import { selectAppIsOffline } from './state/app.selectors';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
@@ -62,9 +61,9 @@ export class AppComponent {
   private readonly store = inject(Store);
   private readonly translateService = inject(TranslateService);
 
-  public readonly isOffline = toSignal(this.store.select(selectAppIsOffline));
+  public readonly isOffline = this.store.selectSignal(selectAppIsOffline);
 
-  private readonly isAdmin = toSignal(this.store.select(selectUserIsAdmin));
+  private readonly isAdmin = this.store.selectSignal(selectUserIsAdmin);
   private readonly navTranslates = toSignal(this.translateService.get('NAV'));
   public readonly links = computed<INavItem[]>(() => {
     const isAdmin = this.isAdmin();
@@ -106,8 +105,8 @@ export class AppComponent {
   /**
    * Whether to show authorized content (navigation, header, e.g.)
    */
-  public readonly isAuthorized = toSignal(
-    this.store.select(selectAuthTokenResponse).pipe(map((res) => !!res)),
+  public readonly isAuthorized = this.store.selectSignal(
+    selectAuthIsAuthorized,
   );
   /**
    * Side nav opened flag

frontend/src/app/entities/auth/state/auth.selectors.ts

@@ -5,9 +5,13 @@ const _selectAuth = createFeatureSelector<IAuthState>('auth');
 export const selectAuth = createSelector(_selectAuth, (state) => state);
 export const selectAuthIsLoading = createSelector(
   _selectAuth,
-  (state) => state.isLoading
+  (state) => state.isLoading,
 );
 export const selectAuthTokenResponse = createSelector(
   _selectAuth,
-  (state) => state.tokenResponse
+  (state) => state.tokenResponse,
+);
+export const selectAuthIsAuthorized = createSelector(
+  _selectAuth,
+  (state) => !!state.tokenResponse,
 );

frontend/src/app/features/about/about.component.ts

@@ -11,7 +11,6 @@ import { CodeExamplesComponent } from '../code-examples/code-examples.component'
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ChangelogComponent } from 'src/app/shared/components/changelog/changelog.component';
 import { Store } from '@ngrx/store';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { selectAppVersion } from 'src/app/state/app.selectors';
 
 @Component({
@@ -34,5 +33,5 @@ import { selectAppVersion } from 'src/app/state/app.selectors';
 export class AboutComponent {
   private readonly store = inject(Store);
 
-  public readonly version = toSignal(this.store.select(selectAppVersion));
+  public readonly version = this.store.selectSignal(selectAppVersion);
 }

frontend/src/app/features/admin/admin-status/admin-status.component.ts

@@ -1,11 +1,11 @@
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { map, retry, catchError, of, share } from 'rxjs';
+import { map, retry, catchError, of } from 'rxjs';
 import { SnackService } from 'src/app/core/services/snack.service';
 import { AdminApiService } from 'src/app/entities/admin/admin-api.service';
 import { PublicApiService } from 'src/app/entities/public/public-api.service';
@@ -16,7 +16,6 @@ import { PublicApiService } from 'src/app/entities/public/public-api.service';
     MatListModule,
     MatButton,
     MatIcon,
-    AsyncPipe,
     TranslateModule,
     NgTemplateOutlet,
   ],

frontend/src/app/features/admin/admin-user-dialog/admin-user-dialog.component.ts

@@ -5,7 +5,6 @@ import {
   inject,
   signal,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import {
@@ -62,7 +61,7 @@ export class AdminUserDialogComponent {
   private readonly translateService = inject(TranslateService);
   private readonly store = inject(Store);
 
-  public readonly isOwner = toSignal(this.store.select(selectUserIsOwner));
+  public readonly isOwner = this.store.selectSignal(selectUserIsOwner);
   public readonly isLoading = signal(false);
 
   public readonly EUserRole = EUserRole;

frontend/src/app/features/auth/auth.component.ts

@@ -21,7 +21,6 @@ import {
   selectAppAllowRegistration,
   selectAppSmtpDisabled,
 } from 'src/app/state/app.selectors';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
@@ -45,13 +44,11 @@ import { MatTooltip } from '@angular/material/tooltip';
 export class AuthComponent {
   private readonly store = inject(Store);
 
-  public readonly isLoading = toSignal(this.store.select(selectAuthIsLoading));
-  public readonly allowRegistration = toSignal(
-    this.store.select(selectAppAllowRegistration),
-  );
-  public readonly smtpDisabled = toSignal(
-    this.store.select(selectAppSmtpDisabled),
+  public readonly isLoading = this.store.selectSignal(selectAuthIsLoading);
+  public readonly allowRegistration = this.store.selectSignal(
+    selectAppAllowRegistration,
   );
+  public readonly smtpDisabled = this.store.selectSignal(selectAppSmtpDisabled);
   public readonly form = new FormGroup<
     TInterfaceToForm<Omit<IOAuth2PasswordRequestForm, 'grant_type'>>
   >({

frontend/src/app/features/card/card.component.ts

@@ -84,13 +84,13 @@ export class CardComponent implements OnInit, OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
   private readonly matDialog = inject(MatDialog);
 
-  public readonly card = toSignal(this.store.select(selectCardsActiveInfo));
-  public readonly isLoading = toSignal(this.store.select(selectCardsIsLoading));
-  public readonly canDelete = toSignal(
-    this.store.select(selectCardsActiveCanDelete),
+  public readonly card = this.store.selectSignal(selectCardsActiveInfo);
+  public readonly isLoading = this.store.selectSignal(selectCardsIsLoading);
+  public readonly canDelete = this.store.selectSignal(
+    selectCardsActiveCanDelete,
   );
-  public readonly hasChanges = toSignal(
-    this.store.select(selectCardsActiveHasChanges),
+  public readonly hasChanges = this.store.selectSignal(
+    selectCardsActiveHasChanges,
   );
 
   public readonly form = new FormGroup<TInterfaceToForm<ICardBase>>({

frontend/src/app/features/cards/cards.component.ts

@@ -71,7 +71,7 @@ export class CardsComponent {
     { initialValue: this.router.url === '/cards' },
   );
   public readonly cardsPlaceholder = Array(6).fill(null);
-  public readonly isLoading = toSignal(this.store.select(selectCardsIsLoading));
+  public readonly isLoading = this.store.selectSignal(selectCardsIsLoading);
   /**
    * Form control for search field
    */
@@ -80,7 +80,7 @@ export class CardsComponent {
   /**
    * All cards
    */
-  private readonly _cards = toSignal(this.store.select(selectCardsList));
+  private readonly _cards = this.store.selectSignal(selectCardsList);
   /**
    * Search signal
    */

frontend/src/app/features/user/user.component.ts

@@ -12,7 +12,7 @@ import {
   selectUserIsOwner,
 } from 'src/app/entities/user/state/user.selectors';
 import { UserActions } from 'src/app/entities/user/state/user.actions';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   ReactiveFormsModule,
   FormGroup,
@@ -57,11 +57,9 @@ export class UserComponent implements OnInit {
     return this.form.value as IUserUpdate;
   }
 
-  public readonly isOwner = toSignal(this.store.select(selectUserIsOwner));
-  public readonly isLoading = toSignal(this.store.select(selectUserIsLoading));
-  public readonly hasChanges = toSignal(
-    this.store.select(selectUserHasChanges),
-  );
+  public readonly isOwner = this.store.selectSignal(selectUserIsOwner);
+  public readonly isLoading = this.store.selectSignal(selectUserIsLoading);
+  public readonly hasChanges = this.store.selectSignal(selectUserHasChanges);
   public readonly hidePassword = signal(true);
   public readonly hideConfirmPassword = signal(true);