refactor: use observable chains in rating component

.changeset/fair-colts-explain.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Use observable chains instead of change detection in the rating component

frontend/app/src/app/modules/data/elements/rating.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/no-useless-undefined */
 /*
  * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -12,60 +13,51 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ElementRef, HostListener, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ElementRef, HostListener, Input} from '@angular/core';
-import {SCDish, SCRatingRequest, SCUuid} from '@openstapps/core';
+import {SCDish, SCRatingRequest} from '@openstapps/core';
 import {RatingProvider} from '../rating.provider';
 import {ratingAnimation} from './rating.animation';
+import {BehaviorSubject, filter, merge, mergeMap, of, ReplaySubject, withLatestFrom} from 'rxjs';
+import {catchError, map} from 'rxjs/operators';
 
 @Component({
   selector: 'stapps-rating',
   templateUrl: 'rating.html',
   styleUrls: ['rating.scss'],
   animations: [ratingAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StappsRatingComponent {
-  rate = false;
+  performRating = new BehaviorSubject(false);
 
-  rated = false;
+  userRating = new BehaviorSubject<number | undefined>(undefined);
 
-  canBeRated = false;
+  dish = new ReplaySubject<SCDish>(1);
 
-  uid: SCUuid;
+  wasAlreadyRated = merge(
-
+    this.dish.pipe(mergeMap(({uid}) => this.ratingProvider.hasRated(uid))),
-  rating?: number;
+    this.userRating.pipe(
-
+      filter(it => it !== undefined),
-  @Input() set item(value: SCDish) {
+      withLatestFrom(this.dish),
-    this.uid = value.uid;
+      mergeMap(([rating, {uid}]) => this.ratingProvider.rate(uid, rating as SCRatingRequest['rating'])),
-
+      map(() => true),
-    Promise.all([this.ratingProvider.canRate(value), this.ratingProvider.hasRated(this.uid)] as const).then(
+      catchError(() => of(false)),
-      ([canRate, hasRated]) => {
+    ),
-        this.canBeRated = canRate;
-        this.rated = hasRated;
-      },
   );
+
+  canBeRated = this.dish.pipe(mergeMap(dish => this.ratingProvider.canRate(dish)));
+
+  @Input({required: true}) set item(value: SCDish) {
+    this.dish.next(value);
   }
 
   constructor(readonly elementRef: ElementRef, readonly ratingProvider: RatingProvider) {}
 
-  async submitRating(rating: number) {
-    this.rating = rating;
-    try {
-      await this.ratingProvider.rate(this.uid, rating as SCRatingRequest['rating']);
-      this.rated = true;
-    } catch {
-      this.rating = undefined;
-      // allow change detection to catch up first
-      setTimeout(() => {
-        this.rate = false;
-      });
-    }
-  }
-
   @HostListener('document:mousedown', ['$event'])
   clickOutside(event: MouseEvent) {
-    if (this.rating) return;
+    if (this.userRating.value) return;
     if (!this.elementRef.nativeElement.contains(event.target)) {
-      this.rate = false;
+      this.performRating.next(false);
     }
   }
 }

frontend/app/src/app/modules/data/elements/rating.html

@@ -14,19 +14,23 @@
   -->
 
 <ion-button
-  *ngIf="canBeRated"
+  *ngIf="canBeRated | async"
   fill="clear"
-  (click)="$event.stopPropagation(); rate = true"
+  (click)="$event.stopPropagation(); performRating.next(true)"
-  [disabled]="rated"
+  [disabled]="wasAlreadyRated | async"
 >
   <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
 </ion-button>
 
-<div class="rating-stars" *ngIf="rate && !rated" [@rating]="rating ? 'rated' : 'abandoned'">
+<div
+  class="rating-stars"
+  *ngIf="(performRating | async) && (wasAlreadyRated | async) !== true"
+  [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'"
+>
   <ion-icon
-    [class.rated-value]="rating === i"
+    [class.rated-value]="(userRating | async) === i"
     *ngFor="let i of [5, 4, 3, 2, 1]"
-    (click)="$event.stopPropagation(); submitRating(i)"
+    (click)="$event.stopPropagation(); userRating.next(i)"
     slot="icon-only"
     size="32"
     color="medium"