Move to onPush

PhilippMDoerner · Jan 25, 2025 · 1b8542f · 1b8542f
1 parent b9d3982
commit 1b8542f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 47 deletions.
diff --git a/src/app/design/organisms/image-carousel-card/image-carousel-card.component.html b/src/app/design/organisms/image-carousel-card/image-carousel-card.component.html
@@ -1,4 +1,4 @@
-@switch (state) {
+@switch (state()) {
   @case ("DISPLAY") {
     <ng-container *ngTemplateOutlet="displayState" />
   }
@@ -15,14 +15,14 @@
 
 <ng-template #displayState>
   <app-image-carousel
-    [images]="images"
-    [serverUrl]="serverUrl"
-    [canDelete]="canDelete"
-    [canUpdate]="canUpdate"
-    [canCreate]="canCreate"
-    [currentSlideIndex]="currentImageIndex"
-    (deleteImage)="changeState(currentImage, 'DELETE')"
-    (updateImage)="changeState(currentImage, 'UPDATE')"
+    [images]="images()"
+    [serverUrl]="serverUrl()"
+    [canDelete]="canDelete()"
+    [canUpdate]="canUpdate()"
+    [canCreate]="canCreate()"
+    [currentSlideIndex]="currentImageIndex()"
+    (deleteImage)="changeState(currentImage(), 'DELETE')"
+    (updateImage)="changeState(currentImage(), 'UPDATE')"
     (createImage)="changeState({}, 'CREATE')"
     (slide)="onSlide($event)"
   ></app-image-carousel>
@@ -33,7 +33,7 @@
     <h5 class="form-card__heading">
       <app-icon [icon]="'pencil'"></app-icon>
       Updating:
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -42,14 +42,14 @@ <h5 class="form-card__heading">
       <img
         title="None"
         class="form-card__image"
-        [src]="serverUrl + currentImage.image"
+        [src]="serverUrl() + currentImage().image"
         alt=""
       />
     </div>
 
     <app-form
       class="form-card__form"
-      [model]="userModel"
+      [model]="userModel()"
       [fields]="updateFields"
       [enctype]="'multipart/form-data'"
       [cancelButtonType]="'DARK'"
@@ -64,7 +64,7 @@ <h5 class="form-card__heading">
     <h5 class="form-card__heading">
       <app-icon [icon]="'plus-square'" />
       Upload new image
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -86,7 +86,7 @@ <h5 class="form-card__heading">
     <h5 class="form-card__heading">
       <app-icon [icon]="'trash'" />
       Deleting:
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -95,7 +95,7 @@ <h5 class="form-card__heading">
       <img
         title="None"
         class="form-card__image"
-        [src]="serverUrl + currentImage.image"
+        [src]="serverUrl() + currentImage().image"
         alt="image to delete"
       />
     </div>

diff --git a/src/app/design/organisms/image-carousel-card/image-carousel-card.component.ts b/src/app/design/organisms/image-carousel-card/image-carousel-card.component.ts
@@ -1,11 +1,12 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
+  ChangeDetectionStrategy,
   Component,
+  computed,
   EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
+  input,
   Output,
+  signal,
 } from '@angular/core';
 import { NgbSlideEvent } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig } from '@ngx-formly/core';
@@ -32,24 +33,25 @@ type State = 'DISPLAY' | 'DELETE' | 'UPDATE' | 'UPDATE_OUTDATED' | 'CREATE';
     ButtonComponent,
     NgTemplateOutlet,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ImageCarouselCardComponent implements OnInit, OnChanges {
-  @Input() images!: Image[];
-  @Input() serverUrl!: string;
-  @Input() serverModel?: Image;
-  @Input() canUpdate: boolean = false;
-  @Input() canCreate: boolean = false;
-  @Input() canDelete: boolean = false;
+export class ImageCarouselCardComponent {
+  images = input.required<Image[]>();
+  serverUrl = input.required<string>();
+  serverModel = input.required<Image>();
+  canUpdate = input.required<boolean>();
+  canCreate = input.required<boolean>();
+  canDelete = input.required<boolean>();
 
   @Output() createImage: EventEmitter<Image> = new EventEmitter();
   @Output() deleteImage: EventEmitter<Image> = new EventEmitter();
   @Output() updateImage: EventEmitter<Image> = new EventEmitter();
 
-  currentImageIndex: number = 0;
-  currentImage!: Image;
-  state: State = 'DISPLAY';
-  userModel?: Image = {} as Image;
-  isLoading: boolean = false;
+  currentImageIndex = signal(0);
+  currentImage = computed(() => this.images()[this.currentImageIndex()]);
+  state = signal<State>('DISPLAY');
+  userModel = signal<Partial<Image> | null>({});
+  isLoading = signal(false);
 
   createFields: FormlyFieldConfig[] = [
     this.formlyService.buildInputConfig({
@@ -114,45 +116,36 @@ export class ImageCarouselCardComponent implements OnInit, OnChanges {
 
   constructor(private formlyService: FormlyService) {}
 
-  ngOnInit(): void {
-    this.currentImage = this.images[this.currentImageIndex];
-  }
-
-  ngOnChanges(): void {
-    this.currentImage = this.images[this.currentImageIndex];
-  }
-
   changeState(event: any, newState: State) {
-    this.userModel = event ?? null;
-    this.state = newState;
+    this.userModel.set(event ?? null);
+    this.state.set(newState);
   }
 
   onSlide(slideEvent: { event: NgbSlideEvent; index: number }) {
-    this.currentImageIndex = slideEvent.index;
-    this.currentImage = this.images[this.currentImageIndex];
+    this.currentImageIndex.set(slideEvent.index);
   }
 
   onCancel(): void {
     this.changeState(null, 'DISPLAY');
   }
 
   onSubmit(event: any): void {
-    switch (this.state) {
+    switch (this.state()) {
       case 'DELETE':
-        this.deleteImage.emit(this.currentImage);
+        this.deleteImage.emit(this.currentImage());
         break;
       case 'UPDATE':
       case 'UPDATE_OUTDATED':
-        this.updateImage.emit(this.userModel);
+        this.updateImage.emit(this.userModel() as Image);
         break;
       case 'CREATE':
-        this.createImage.emit(this.userModel);
+        this.createImage.emit(this.userModel() as Image);
         break;
       default:
         throw `ImageCarouselCard - Submitted form while in state '${this.state}', which is not possible.`;
     }
 
-    this.userModel = {} as Image;
+    this.userModel.set({});
     this.changeState(null, 'DISPLAY');
   }
 }