Refactor (#75)

* Refactor

* Refactor

* Fix scripts

package.json

@@ -8,15 +8,14 @@
     "url": "https://github.com/remscodes"
   },
   "scripts": {
-    "start": "npm run init && ng serve",
+    "start": "pnpm run init && ng serve",
     "start:host": "ng serve --host 0.0.0.0 --port 3000 --disable-host-check",
-    "build": "npm run init && ng build",
+    "build": "pnpm run init && ng build",
     "types": "tsc --noEmit",
-    "test": "npm run init && ng test --code-coverage --browsers=ChromeHeadless",
-    "test:ci": "npm run test --watch=false --progress=false",
-    "init": "npm run inject-version & npm run create-env-file",
-    "inject-version": "node ./scripts/inject-version.cjs",
-    "create-env-file": "node ./scripts/create-env-js.cjs"
+    "test": "pnpm run init && ng test --code-coverage --browsers=ChromeHeadless",
+    "test:ci": "pnpm run test --watch=false --progress=false",
+    "init": "pnpm run create-env-file",
+    "create-env-file": "node scripts/create-env-js.cjs"
   },
   "repository": {
     "type": "git",

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { ChildrenOutletContexts, RouterOutlet } from '@angular/router';
 import { BottomNavBarComponent } from './components/bottom-nav-bar/bottom-nav-bar.component';
 import { LoadingComponent } from './components/loading/loading.component';
@@ -9,24 +9,24 @@ import { BetterRouter } from './shared/services/better-router.service';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [slideInAnimation],
   standalone: true,
   imports: [
     RouterOutlet,
     BottomNavBarComponent,
     VehicleSelectorComponent,
     LoadingComponent,
   ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [slideInAnimation],
 })
 export class AppComponent {
 
   private router = inject(BetterRouter);
   private outlet = inject(ChildrenOutletContexts);
 
-  public hideNavBar: Signal<boolean> = computed(() => this.router.navigationInfo().routeData['hideNavBar']);
+  public hideNavBar = computed<boolean>(() => this.router.navigationInfo().routeData['hideNavBar']);
 
   public getRouteAnimationData(): Optional<string> {
     return this.outlet.getContext('primary')?.route?.snapshot?.data?.['animation'];

src/app/components/basic-snackbar/basic-snackbar.component.ts

@@ -4,13 +4,13 @@ import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from "@angular/material/snack-bar"
 import { SnackBarData } from '../../models/snack-bar-data.model';
 
 @Component({
-  templateUrl: './basic-snackbar.component.html',
-  styleUrl: './basic-snackbar.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     MatButtonModule,
   ],
+  templateUrl: './basic-snackbar.component.html',
+  styleUrl: './basic-snackbar.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BasicSnackbarComponent {
 

src/app/components/bottom-nav-bar/bottom-nav-bar.component.html

@@ -4,7 +4,7 @@
 
     <div @fadeToTop class="flex gap-2 bg-white p-2 rounded-2xl shadow">
 
-      @for (item of items;track item.link) {
+      @for (item of items; track item.link) {
         <div matRipple
              class="flex flex-col gap-1 flex-1 justify-center items-center p-2 rounded-xl cursor-pointer"
              [routerLink]="[item.link]"

src/app/components/bottom-nav-bar/bottom-nav-bar.component.ts

@@ -12,17 +12,17 @@ interface MenuItem {
 
 @Component({
   selector: 'app-bottom-nav-bar',
-  templateUrl: './bottom-nav-bar.component.html',
-  styleUrl: './bottom-nav-bar.component.css',
-  animations: [fadeToTop],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     MatIconModule,
     MatRippleModule,
     RouterLink,
     RouterLinkActive,
   ],
+  templateUrl: './bottom-nav-bar.component.html',
+  styleUrl: './bottom-nav-bar.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeToTop],
 })
 export class BottomNavBarComponent {
 

src/app/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -4,14 +4,14 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { DialogData } from '../../models/dialog-data.model';
 
 @Component({
-  templateUrl: './confirmation-dialog.component.html',
-  styleUrl: './confirmation-dialog.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     MatDialogModule,
     MatButtonModule,
   ],
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrl: './confirmation-dialog.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfirmationDialogComponent {
 

src/app/components/loading/loading.component.ts

@@ -1,11 +1,16 @@
 import { animate, style, transition, trigger } from "@angular/animations";
-import { ChangeDetectionStrategy, Component, inject, WritableSignal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, Signal, WritableSignal } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { SpinnerComponent } from '../../shared/components/spinner/spinner.component';
 import { Loading } from '../../shared/services/loading.service';
 
 @Component({
   selector: 'app-loading',
+  standalone: true,
+  imports: [
+    MatIconModule,
+    SpinnerComponent,
+  ],
   templateUrl: './loading.component.html',
   styleUrl: './loading.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,17 +26,12 @@ import { Loading } from '../../shared/services/loading.service';
       ]),
     ]),
   ],
-  standalone: true,
-  imports: [
-    MatIconModule,
-    SpinnerComponent,
-  ],
 })
 export class LoadingComponent {
 
   private loading = inject(Loading);
 
-  public active: WritableSignal<boolean> = this.loading.active;
+  public active: Signal<boolean> = this.loading.active.asReadonly();
 
   public forceClose(): void {
     this.loading.stopForce();

src/app/components/vehicle-selector/vehicle-selector.component.ts

@@ -7,14 +7,14 @@ import { Optional } from '../../shared/models/shared.model';
 
 @Component({
   selector: 'app-vehicle-selector',
-  templateUrl: './vehicle-selector.component.html',
-  styleUrl: './vehicle-selector.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     NgOptimizedImage,
     RigidImageDirective,
   ],
+  templateUrl: './vehicle-selector.component.html',
+  styleUrl: './vehicle-selector.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VehicleSelectorComponent {
 

src/app/core/auth/auth.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
+import { LoginComponent } from './components/login/login.component';
 import { SelectAccountComponent } from './components/select-account/select-account.component';
 import { SelectCarComponent } from './components/select-car/select-car.component';
-import { LoginComponent } from './components/login/login.component';
 import { authGuard } from './guards/auth.guard';
 import { selectCarGuard } from './guards/select-car.guard';
 

src/app/core/auth/components/login/login.component.ts

@@ -10,16 +10,16 @@ import { Loading } from '../../../../shared/services/loading.service';
 import { Auth } from '../../services/auth.service';
 
 @Component({
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     ReactiveFormsModule,
     MatButtonModule,
     MatInputModule,
     PanelComponent,
   ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent {
 

src/app/core/auth/components/select-account/select-account.component.html

@@ -12,7 +12,7 @@
             (ngSubmit)="onSubmit()">
 
         <mat-radio-group class="flex flex-col gap-2" formControlName="accountId">
-          @for (account of accounts();track account.accountId) {
+          @for (account of accounts(); track account.accountId) {
             <mat-radio-button [value]="account.accountId">
               {{ account.accountType }}
             </mat-radio-button>

src/app/core/auth/components/select-account/select-account.component.ts

@@ -9,9 +9,6 @@ import { Bouncer } from '../../../../shared/services/bouncer.service';
 import { AuthStore } from '../../services/auth-store.service';
 
 @Component({
-  templateUrl: './select-account.component.html',
-  styleUrl: './select-account.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     ReactiveFormsModule,
@@ -20,14 +17,17 @@ import { AuthStore } from '../../services/auth-store.service';
     PanelComponent,
     SpinnerComponent,
   ],
+  templateUrl: './select-account.component.html',
+  styleUrl: './select-account.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectAccountComponent {
 
   private authStore = inject(AuthStore);
   private bouncer = inject(Bouncer);
   private formBuilder = inject(FormBuilder);
 
-  public accounts: Signal<Account[]> = computed(() => this.authStore.person()?.accounts ?? []);
+  public accounts = computed<Account[]>(() => this.authStore.person()?.accounts ?? []);
 
   public form = this.formBuilder.group({
     accountId: [this.authStore.accountId(), Validators.required],

src/app/core/auth/components/select-car/select-car.component.html

@@ -10,7 +10,7 @@
       <div>
         <mat-radio-group class="flex flex-col gap-2" formControlName="vin">
 
-          @for (vehicle of vehicles()!.vehicleLinks;track vehicle.vin) {
+          @for (vehicle of vehicles()!.vehicleLinks; track vehicle.vin) {
             <mat-radio-button [value]="vehicle.vin">
               {{ vehicle.vin }}
             </mat-radio-button>

src/app/core/auth/components/select-car/select-car.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, WritableSignal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, Signal, WritableSignal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,9 +15,6 @@ import { AuthStore } from '../../services/auth-store.service';
 import { Auth } from '../../services/auth.service';
 
 @Component({
-  templateUrl: './select-car.component.html',
-  styleUrl: './select-car.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     ReactiveFormsModule,
@@ -27,6 +24,9 @@ import { Auth } from '../../services/auth.service';
     PanelComponent,
     SpinnerComponent,
   ],
+  templateUrl: './select-car.component.html',
+  styleUrl: './select-car.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectCarComponent implements OnInit {
 
@@ -37,7 +37,7 @@ export class SelectCarComponent implements OnInit {
   private formBuilder = inject(FormBuilder);
   private destroyRef = inject(DestroyRef);
 
-  public vehicles: WritableSignal<Nullable<Vehicles>> = this.vehicleStore.vehicles;
+  public vehicles: Signal<Nullable<Vehicles>> = this.vehicleStore.vehicles.asReadonly();
 
   public form = this.formBuilder.group({
     vin: ['', Validators.required],

src/app/core/auth/services/auth-store.service.ts

@@ -1,6 +1,6 @@
-import { computed, effect, inject, Injectable, Signal, signal, WritableSignal } from '@angular/core';
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
 import { NgxRenaultSession } from '@remscodes/ngx-renault-api-client';
-import { AccountInfo, Person } from '@remscodes/renault-api';
+import { Account, Person } from '@remscodes/renault-api';
 import { Nullable, Optional } from '../../../shared/models/shared.model';
 import { StorageService } from '../../../shared/services/storage.service';
 
@@ -14,28 +14,27 @@ export class AuthStore {
   private storage = inject(StorageService);
   private session = inject(NgxRenaultSession);
 
-  public personId: WritableSignal<Nullable<string>> = signal(null);
-  public person: WritableSignal<Nullable<Person>> = signal(null);
+  public personId = signal<Nullable<string>>(null);
+  public person = signal<Nullable<Person>>(null);
 
-  public accountId: WritableSignal<Nullable<string>> = signal(this.storage.getAccountId());
-  public account: Signal<Optional<AccountInfo>> = computed(() => {
+  public accountId = signal<Nullable<string>>(this.storage.getAccountId());
+  public account = computed<Optional<Account>>(() => {
     return this.person()?.accounts?.find(acc => acc.accountId === this.accountId());
   });
 
-  public isAuth: Signal<boolean> = computed(() => !!this.person());
+  public isAuth = computed<boolean>(() => !!this.person());
 
   private $storeAccountId(): void {
     effect(() => {
       const accountId: Nullable<string> = this.accountId();
-
-      if (accountId) {
-        this.storage.setAccountId(accountId);
-        this.session.accountId = accountId;
-      }
-      else {
+      if (!accountId) {
         this.storage.clearAccountId();
         this.session.accountId = undefined;
+        return;
       }
+
+      this.storage.setAccountId(accountId);
+      this.session.accountId = accountId;
     });
   }
 }

src/app/core/error/components/error/error.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input as RouteData } from '@angular/core';
 
 @Component({
+  standalone: true,
+  imports: [],
   templateUrl: './error.component.html',
   styleUrl: './error.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [],
 })
 export class ErrorComponent {