refactor(Web): ⚡ using signals instead of observables

JuamBer · Jan 26, 2024 · 9ca795f · 9ca795f
1 parent 4c1610f
commit 9ca795f
Show file tree

Hide file tree

Showing 17 changed files with 333 additions and 312 deletions.
diff --git a/...fice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html b/...fice/home/components/certificates-in-time-chart/certificates-in-time-chart.component.html
@@ -1 +1 @@
-<p-chart type="bar" height="100%" [data]="chartData$ | async" [options]="chartOptions$ | async"></p-chart>
+<p-chart type="bar" height="100%" [data]="chartData$$()" [options]="chartOptions$$()"></p-chart>
diff --git a/...office/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts b/...office/home/components/certificates-in-time-chart/certificates-in-time-chart.component.ts
@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
@@ -8,7 +10,6 @@ import { Observable, combineLatest, filter, map, startWith } from 'rxjs';
 import { CertificateStateModule } from 'src/app/backoffice/tables/certificate/state/certificate-state.module';
 import { certificateActions } from 'src/app/backoffice/tables/certificate/state/certificate.actions';
 import { certificateReducer } from 'src/app/backoffice/tables/certificate/state/certificate.reducer';
-import { Language } from 'src/app/backoffice/tables/language/models/language.model';
 import { TranslationProvider } from 'src/app/shared/models/translation-provider.model';
 import { LanguagesModule } from 'src/app/shared/modules/languages.module';
 import { publicLanguageReducer } from 'src/app/shared/state/languages/public-language.reducer';
@@ -27,7 +28,7 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem
   private translateSrv = inject(TranslateService);
   private titleCasePipe = inject(TitleCasePipe);
 
-  language$: Observable<Language | undefined> = this.store.select(publicLanguageReducer.getOne);
+  language$ = this.store.select(publicLanguageReducer.getOne);
   chartOptions$: Observable<ChartOptions> = this.translateSrv.onLangChange.pipe(
     startWith(this.translateSrv.currentLang),
     map(() => ({
@@ -84,6 +85,8 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem
       },
     })),
   );
+  chartOptions$$ = toSignal(this.chartOptions$);
+
   chartData$: Observable<ChartData<'bar', any[]>> = combineLatest([
     this.store.select(certificateReducer.getAll),
     this.language$,
@@ -135,8 +138,9 @@ export class CertificatesInTimeChartComponent extends TranslationProvider implem
       return res;
     }),
   );
+  chartData$$ = toSignal(this.chartData$);
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.store.dispatch(certificateActions.loadAll({}));
   }
 }
diff --git a/...backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html b/...backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.html
@@ -1 +1 @@
-<p-chart type="bar" height="100%" [data]="chartData$ | async" [options]="chartOptions$ | async"></p-chart>
+<p-chart type="bar" height="100%" [data]="chartData$$()" [options]="chartOptions$$()"></p-chart>
diff --git a/...p/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts b/...p/backoffice/home/components/positions-in-time-chart/positions-in-time-chart.component.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
 import { ChartModule } from 'primeng/chart';
 import { Observable, combineLatest, map, startWith } from 'rxjs';
-import { Language } from 'src/app/backoffice/tables/language/models/language.model';
 import { PositionStateModule } from 'src/app/backoffice/tables/position/state/position-state.module';
 import { positionActions } from 'src/app/backoffice/tables/position/state/position.actions';
 import { positionReducer } from 'src/app/backoffice/tables/position/state/position.reducer';
@@ -28,7 +28,7 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement
   private translateSrv = inject(TranslateService);
   private titleCasePipe = inject(TitleCasePipe);
 
-  language$: Observable<Language | undefined> = this.store.select(publicLanguageReducer.getOne);
+  language$ = this.store.select(publicLanguageReducer.getOne);
   chartOptions$: Observable<ChartOptions> = this.translateSrv.onLangChange.pipe(
     startWith(this.translateSrv.currentLang),
     map(() => ({
@@ -89,6 +89,8 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement
       },
     })),
   );
+  chartOptions$$ = toSignal(this.chartOptions$);
+
   chartData$: Observable<ChartData<'bar', any[]>> = combineLatest([
     this.store.select(positionReducer.getAll),
     this.language$,
@@ -130,8 +132,9 @@ export class PositionsInTimeChartComponent extends TranslationProvider implement
       return res;
     }),
   );
+  chartData$$ = toSignal(this.chartData$);
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.store.dispatch(positionActions.loadAll({}));
   }
 }
diff --git a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.html
@@ -1 +1 @@
-<p-chart type="bar" height="100%" [data]="chartData$ | async" [options]="chartOptions$ | async"> </p-chart>
+<p-chart type="bar" height="100%" [data]="chartData$$()" [options]="chartOptions$$()"> </p-chart>
diff --git a/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts b/src/app/backoffice/home/components/salary-in-time-chart/salary-in-time-chart.component.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
 import { ChartModule } from 'primeng/chart';
 import { Observable, combineLatest, map, startWith } from 'rxjs';
-import { Language } from 'src/app/backoffice/tables/language/models/language.model';
 import { PositionStateModule } from 'src/app/backoffice/tables/position/state/position-state.module';
 import { positionActions } from 'src/app/backoffice/tables/position/state/position.actions';
 import { positionReducer } from 'src/app/backoffice/tables/position/state/position.reducer';
@@ -28,7 +28,7 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O
   private translateSrv = inject(TranslateService);
   private titleCasePipe = inject(TitleCasePipe);
 
-  language$: Observable<Language | undefined> = this.store.select(publicLanguageReducer.getOne);
+  language$ = this.store.select(publicLanguageReducer.getOne);
   chartOptions$: Observable<ChartOptions> = this.translateSrv.onLangChange.pipe(
     startWith(this.translateSrv.currentLang),
     map(() => ({
@@ -85,6 +85,8 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O
       },
     })),
   );
+  chartOptions$$ = toSignal(this.chartOptions$);
+
   chartData$: Observable<ChartData<'bar', any[]>> = combineLatest([
     this.store.select(positionReducer.getAll),
     this.language$,
@@ -114,8 +116,9 @@ export class SalaryInTimeChartComponent extends TranslationProvider implements O
       return res;
     }),
   );
+  chartData$$ = toSignal(this.chartData$);
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.store.dispatch(positionActions.loadAll({}));
   }
 }
diff --git a/src/app/backoffice/layout/backoffice/header/header.component.html b/src/app/backoffice/layout/backoffice/header/header.component.html
@@ -5,12 +5,12 @@ <h1 routerLink="/backoffice">Personal Web</h1>
     </div>
   </div>
   <div class="breadcrumb">
-    <p-breadcrumb class="max-w-full" [model]="(breadcrumbs$ | async)!"></p-breadcrumb>
+    <p-breadcrumb class="max-w-full" [model]="breadcrumbs$$()"></p-breadcrumb>
   </div>
   <div class="options">
     <div class="user">
       <div class="user-name">
-        <h2>{{ (user$ | async)?.email }}</h2>
+        <h2>{{ user$$()?.email }}</h2>
       </div>
     </div>
     <div class="menu">

diff --git a/src/app/backoffice/layout/backoffice/header/header.component.ts b/src/app/backoffice/layout/backoffice/header/header.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { MenuItem } from 'primeng/api';
@@ -18,9 +19,11 @@ export class HeaderComponent {
   private translateSrv = inject(TranslateService);
 
   sidebarVisible = false;
+
   user$ = this.authService.getCurrentUser();
+  user$$ = toSignal(this.user$);
 
-  public breadcrumbs$: Observable<MenuItem[]> = this.router.events.pipe(
+  breadcrumbs$: Observable<MenuItem[]> = this.router.events.pipe(
     startWith(undefined),
     debounceTime(200),
     map(() => {
@@ -34,6 +37,10 @@ export class HeaderComponent {
       }));
     }),
   );
+  breadcrumbs$$ = toSignal(this.breadcrumbs$, {
+    initialValue: [],
+  });
+
   menus = [
     {
       routerLink: '/backoffice/certificates',

diff --git a/src/app/backoffice/tables/skill-type/services/skill-type.service.ts b/src/app/backoffice/tables/skill-type/services/skill-type.service.ts
@@ -13,7 +13,7 @@ export class SkillTypeService extends CommonService<SkillType> {
     super(
       supabaseClient,
       skillTypeNames.name(Naming.SNAKE_CASE, NumberMode.PLURAL),
-      'id, name_translations, description_translations',
+      'id, name_translations, description_translations, skills ( * )',
       '*, "skills": "skills" ( * )',
       'name_translations',
     );

diff --git a/src/app/website/components/experience/experience.component.html b/src/app/website/components/experience/experience.component.html
@@ -1,88 +1,86 @@
-<ng-container *appLet="language$ | async as language">
-  @switch (positionsActionStatus$ | async) {
-    @case (ActionStatus.SUCCESS) {
-      <div class="experience">
-        <ul>
-          @for (positionGrouped of positionsGrouped$ | async; track positionGrouped) {
-            <li
-              #position
-              [id]="positionGrouped.company.id"
-              [@positionEnterAnimation]="getPositionEnterAnimationState(positionGrouped.company.id)"
-            >
-              <div class="header">
-                <div class="icon">
-                  @switch (positionGrouped.company.type) {
-                    @case (CompanyType.SCHOOL) {
-                      <fa-icon [icon]="faGraduationCap"></fa-icon>
-                    }
-                    @case (CompanyType.COMPANY) {
-                      <fa-icon [icon]="faBriefcase"></fa-icon>
-                    }
+@switch (positionsActionStatus$$()) {
+  @case (ActionStatus.SUCCESS) {
+    <div class="experience">
+      <ul>
+        @for (positionGrouped of positionsGrouped$$(); track positionGrouped) {
+          <li
+            #position
+            [id]="positionGrouped.company.id"
+            [@positionEnterAnimation]="getPositionEnterAnimationState(positionGrouped.company.id)"
+          >
+            <div class="header">
+              <div class="icon">
+                @switch (positionGrouped.company.type) {
+                  @case (CompanyType.SCHOOL) {
+                    <fa-icon [icon]="faGraduationCap"></fa-icon>
                   }
-                </div>
-                <div class="organization">
-                  <h3>
-                    @if (positionGrouped.company.url) {
-                      <a [href]="positionGrouped.company.url" target="_blank">{{ positionGrouped.company.name }}</a>
-                    } @else {
-                      {{ positionGrouped.company.name }}
-                    }
-                  </h3>
-                  <span>({{ positionGrouped.time }})</span>
-                </div>
-              </div>
-              <div class="items">
-                <ul>
-                  @for (position of positionGrouped.positions; track position) {
-                    <li class="item">
-                      <div class="position">
-                        <span>{{ getTranslation(language?.acronym, position?.nameTranslations) }}</span>
-                      </div>
-                      <div class="date">
-                        <span>{{
-                          (position.dateFrom | date: 'MM-yyyy') +
-                            ' - ' +
-                            (position.dateTo ? (position.dateTo | date: 'MM-yyyy') : ('general.present' | translate))
-                        }}</span>
-                      </div>
-                    </li>
+                  @case (CompanyType.COMPANY) {
+                    <fa-icon [icon]="faBriefcase"></fa-icon>
                   }
-                </ul>
-              </div>
-            </li>
-          }
-        </ul>
-      </div>
-    }
-    @case (ActionStatus.PENDING) {
-      <div class="experience">
-        <ul>
-          @for (skeleton of [0, 1, 2, 3]; track skeleton) {
-            <li>
-              <div class="header">
-                <p-skeleton width="100%" height="10px"></p-skeleton>
+                }
               </div>
-              <div class="items">
-                <ul>
-                  @for (position of [0, 1]; track position) {
-                    <li class="item">
-                      <div class="position pb-1">
-                        <p-skeleton width="80%"></p-skeleton>
-                      </div>
-                      <div class="date">
-                        <p-skeleton width="60%"></p-skeleton>
-                      </div>
-                    </li>
+              <div class="organization">
+                <h3>
+                  @if (positionGrouped.company.url) {
+                    <a [href]="positionGrouped.company.url" target="_blank">{{ positionGrouped.company.name }}</a>
+                  } @else {
+                    {{ positionGrouped.company.name }}
                   }
-                </ul>
+                </h3>
+                <span>({{ positionGrouped.time }})</span>
               </div>
-            </li>
-          }
-        </ul>
-      </div>
-    }
-    @case (ActionStatus.ERROR) {
-      <app-generic-error></app-generic-error>
-    }
+            </div>
+            <div class="items">
+              <ul>
+                @for (position of positionGrouped.positions; track position) {
+                  <li class="item">
+                    <div class="position">
+                      <span>{{ getTranslation(language$$()?.acronym, position?.nameTranslations) }}</span>
+                    </div>
+                    <div class="date">
+                      <span>{{
+                        (position.dateFrom | date: 'MM-yyyy') +
+                          ' - ' +
+                          (position.dateTo ? (position.dateTo | date: 'MM-yyyy') : ('general.present' | translate))
+                      }}</span>
+                    </div>
+                  </li>
+                }
+              </ul>
+            </div>
+          </li>
+        }
+      </ul>
+    </div>
+  }
+  @case (ActionStatus.PENDING) {
+    <div class="experience">
+      <ul>
+        @for (skeleton of [0, 1, 2, 3]; track skeleton) {
+          <li>
+            <div class="header">
+              <p-skeleton width="100%" height="10px"></p-skeleton>
+            </div>
+            <div class="items">
+              <ul>
+                @for (position of [0, 1]; track position) {
+                  <li class="item">
+                    <div class="position pb-1">
+                      <p-skeleton width="80%"></p-skeleton>
+                    </div>
+                    <div class="date">
+                      <p-skeleton width="60%"></p-skeleton>
+                    </div>
+                  </li>
+                }
+              </ul>
+            </div>
+          </li>
+        }
+      </ul>
+    </div>
+  }
+  @case (ActionStatus.ERROR) {
+    <app-generic-error></app-generic-error>
   }
-</ng-container>
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p-chart type="bar" height="100%" [data]="chartData$ \| async" [options]="chartOptions$ \| async"></p-chart>
		<p-chart type="bar" height="100%" [data]="chartData$$()" [options]="chartOptions$$()"></p-chart>