From 82793f4ad346f51db073581d228a641513c53768 Mon Sep 17 00:00:00 2001
From: George Spanos <gspanos@moby-it.com>
Date: Sat, 30 Mar 2024 01:28:40 +0200
Subject: [PATCH] ui: refactor input components

---
 .../poker-table/board/board.component.ts      |  6 ++---
 .../round/poker-table/card/card.component.ts  | 12 ++++-----
 .../opponent-hand/opponent-hand.component.ts  | 12 ++++-----
 .../playing-hand/playing-hand.component.ts    |  6 ++---
 .../poker-table/poker-table.component.html    |  8 +++---
 .../poker-table/poker-table.component.ts      | 10 +++----
 .../copy-link/copy-link.component.ts          | 10 +++----
 .../favorite/favorite.component.ts            | 10 +++----
 .../play/play-round.component.ts              | 12 ++++-----
 .../round-result/round-result.component.html  |  8 +++---
 .../round-result/round-result.component.ts    | 26 +++++++++++--------
 .../shared/ui/directives/tooltip.directive.ts |  9 ++++---
 .../ui/round-list/round-list.component.html   |  2 +-
 .../ui/round-list/round-list.component.ts     | 14 +++++-----
 14 files changed, 75 insertions(+), 70 deletions(-)

diff --git a/src/ui/src/app/round/poker-table/board/board.component.ts b/src/ui/src/app/round/poker-table/board/board.component.ts
index d4625ca5..affa27f3 100644
--- a/src/ui/src/app/round/poker-table/board/board.component.ts
+++ b/src/ui/src/app/round/poker-table/board/board.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { Board } from '@moby-it/poker-core';
 import { CardComponent } from '../card/card.component';
 
@@ -6,12 +6,12 @@ import { CardComponent } from '../card/card.component';
   selector: 'ppo-board',
   imports: [CardComponent],
   template: `
-  @for (card of board; track card) {
+  @for (card of board(); track card) {
     <ppo-card [card]="card"></ppo-card>
   }
   `,
   standalone: true
 })
 export class BoardComponent {
-  @Input() board!: Board;
+  board = input<Board>();
 }
diff --git a/src/ui/src/app/round/poker-table/card/card.component.ts b/src/ui/src/app/round/poker-table/card/card.component.ts
index 42dbfb62..b967e3f8 100644
--- a/src/ui/src/app/round/poker-table/card/card.component.ts
+++ b/src/ui/src/app/round/poker-table/card/card.component.ts
@@ -1,20 +1,20 @@
-import { Component, Input } from '@angular/core';
-import { Card } from '@moby-it/poker-core';
+import { Component, input } from '@angular/core';
 import { fadeAnimation } from '@app/shared/ui/animations/fadeIn';
+import { Card } from '@moby-it/poker-core';
 @Component({
   selector: 'ppo-card',
   template: `
-  @if (back) {
+  @if (back()) {
     <img src="/assets/cards/card_hidden.svg" @fade alt="" srcset="" />
   } @else {
-    <img src="/assets/cards/{{ card }}.svg" @fade alt="" srcset="" />
+    <img src="/assets/cards/{{ card() }}.svg" @fade alt="" srcset="" />
   }
   `,
   animations: [fadeAnimation],
   standalone: true
 })
 export class CardComponent {
-  @Input() back = false;
-  @Input() card: Card | undefined;
+  back = input(false);
+  card = input<Card>();
   cardLink = '/assets/svg-cards.svg#';
 }
diff --git a/src/ui/src/app/round/poker-table/opponent-hand/opponent-hand.component.ts b/src/ui/src/app/round/poker-table/opponent-hand/opponent-hand.component.ts
index e001a6a3..47d905e2 100644
--- a/src/ui/src/app/round/poker-table/opponent-hand/opponent-hand.component.ts
+++ b/src/ui/src/app/round/poker-table/opponent-hand/opponent-hand.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { Card } from '@moby-it/poker-core';
 import { CardComponent } from '../card/card.component';
 
@@ -6,15 +6,15 @@ import { CardComponent } from '../card/card.component';
   selector: 'ppo-opponent-hand',
   imports: [CardComponent],
   template: `
-  @if (isVisible) {
+  @if (isVisible()) {
   <div class="opponent-hand">
-    @for (card of hand; track card) {
+    @for (card of hand(); track card) {
       <ppo-card [card]="card" class="card"></ppo-card>
     }
   </div>
 } @else {
   <div class="opponent-hand">
-    @for (card of hand; track card) {
+    @for (card of hand(); track card) {
       <ppo-card [back]="true" class="card"></ppo-card>
     }
   </div>
@@ -28,6 +28,6 @@ import { CardComponent } from '../card/card.component';
   standalone: true
 })
 export class OpponentHandComponent {
-  @Input() hand: Card[] = [];
-  @Input() isVisible = false;
+  hand = input<Card[]>();
+  isVisible = input(false);
 }
diff --git a/src/ui/src/app/round/poker-table/playing-hand/playing-hand.component.ts b/src/ui/src/app/round/poker-table/playing-hand/playing-hand.component.ts
index 87755aa5..25a143b9 100644
--- a/src/ui/src/app/round/poker-table/playing-hand/playing-hand.component.ts
+++ b/src/ui/src/app/round/poker-table/playing-hand/playing-hand.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { Card } from '@moby-it/poker-core';
 import { CardComponent } from '../card/card.component';
 
@@ -7,7 +7,7 @@ import { CardComponent } from '../card/card.component';
   imports: [CardComponent],
   template: `
     <div class="player-hand">
-    @for (card of hand; track card) {
+    @for (card of hand(); track card) {
       <ppo-card [card]="card"></ppo-card>
     }
     </div>
@@ -22,5 +22,5 @@ import { CardComponent } from '../card/card.component';
   standalone: true
 })
 export class PlayingHandComponent {
-  @Input() hand: Card[] = [];
+  hand = input<Card[]>();
 }
diff --git a/src/ui/src/app/round/poker-table/poker-table/poker-table.component.html b/src/ui/src/app/round/poker-table/poker-table/poker-table.component.html
index 7e6d06b7..b3f76774 100644
--- a/src/ui/src/app/round/poker-table/poker-table/poker-table.component.html
+++ b/src/ui/src/app/round/poker-table/poker-table/poker-table.component.html
@@ -1,8 +1,8 @@
 <div class="poker-table-container">
-  @if (round) {
-    <ppo-board class="board" [board]="round.board"></ppo-board>
-    <ppo-playing-hand [hand]="round.myHand"></ppo-playing-hand>
-    @for (opponent of round.opponentsHands; track opponent; let i = $index) {
+  @if (round()) {
+    <ppo-board class="board" [board]="round()?.board"></ppo-board>
+    <ppo-playing-hand [hand]="round()?.myHand"></ppo-playing-hand>
+    @for (opponent of round()?.opponentsHands; track opponent; let i = $index) {
       <ppo-opponent-hand
         [hand]="opponent"
         [isVisible]="opponent | handIsVisible"
diff --git a/src/ui/src/app/round/poker-table/poker-table/poker-table.component.ts b/src/ui/src/app/round/poker-table/poker-table/poker-table.component.ts
index f95e83c8..c2a226de 100644
--- a/src/ui/src/app/round/poker-table/poker-table/poker-table.component.ts
+++ b/src/ui/src/app/round/poker-table/poker-table/poker-table.component.ts
@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
 import { Round } from '@moby-it/poker-core';
 import { BoardComponent } from '../board/board.component';
-import { PlayingHandComponent } from '../playing-hand/playing-hand.component';
 import { OpponentHandComponent } from '../opponent-hand/opponent-hand.component';
-import { HandIsVisiblePipe } from './handIsVisible.pipe';
+import { PlayingHandComponent } from '../playing-hand/playing-hand.component';
 import { HandBadgeGridPositionPipe } from './handBadgeGridPosition.pipe';
-import { CommonModule } from '@angular/common';
+import { HandIsVisiblePipe } from './handIsVisible.pipe';
 
 @Component({
   selector: 'ppo-poker-table',
@@ -27,5 +27,5 @@ import { CommonModule } from '@angular/common';
   standalone: true
 })
 export class PokerTableComponent {
-  @Input() round: Round | null | undefined;
+  round = input<Round | null | undefined>();
 }
diff --git a/src/ui/src/app/round/poker-table/round-actions/copy-link/copy-link.component.ts b/src/ui/src/app/round/poker-table/round-actions/copy-link/copy-link.component.ts
index 5cff95e7..e33e62fe 100644
--- a/src/ui/src/app/round/poker-table/round-actions/copy-link/copy-link.component.ts
+++ b/src/ui/src/app/round/poker-table/round-actions/copy-link/copy-link.component.ts
@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, input } from '@angular/core';
 import { createRouteUrl } from '@app/round/helpers';
 import { ToastrService } from 'ngx-toastr';
 @Component({
@@ -40,11 +40,11 @@ import { ToastrService } from 'ngx-toastr';
   standalone: true,
 })
 export class CopyRoundLinkButtonComponent {
-  @Input() roundId: string | undefined;
-  constructor(private clipboard: Clipboard, private toaster: ToastrService) {}
+  roundId = input<string>();
+  constructor(private clipboard: Clipboard, private toaster: ToastrService) { }
   copyToClipboard(): void {
-    if (this.roundId) {
-      const url = createRouteUrl(this.roundId);
+    if (this.roundId()) {
+      const url = createRouteUrl(this.roundId() as string);
       this.clipboard.copy(url);
       this.toaster.info('Link copied', '', { timeOut: 2000 });
     }
diff --git a/src/ui/src/app/round/poker-table/round-actions/favorite/favorite.component.ts b/src/ui/src/app/round/poker-table/round-actions/favorite/favorite.component.ts
index 5fbd14bb..fa97757b 100644
--- a/src/ui/src/app/round/poker-table/round-actions/favorite/favorite.component.ts
+++ b/src/ui/src/app/round/poker-table/round-actions/favorite/favorite.component.ts
@@ -1,5 +1,5 @@
 
-import { Component, Input, signal } from '@angular/core';
+import { Component, input, signal } from '@angular/core';
 import { PokerOddsStore } from '@app/play/poker-odds.store';
 @Component({
   selector: 'ppo-add-round-to-favorites-button',
@@ -33,16 +33,16 @@ import { PokerOddsStore } from '@app/play/poker-odds.store';
 })
 export class FavoriteButtonComponent {
   favoritesFill = signal('transparent');
+  roundId = input<string>();
   constructor(private pokerOdds: PokerOddsStore) { }
-  @Input() roundId: string | undefined;
   saveToFavorites(): void {
-    if (this.roundId) {
+    if (this.roundId()) {
       if (this.favoritesFill() === 'transparent') {
-        this.pokerOdds.addRoundToFavorites(this.roundId).subscribe(() => {
+        this.pokerOdds.addRoundToFavorites(this.roundId() as string).subscribe(() => {
           this.favoritesFill.set('white');
         });
       } else {
-        this.pokerOdds.removeRoundFromFavorites(this.roundId).subscribe(() => {
+        this.pokerOdds.removeRoundFromFavorites(this.roundId() as string).subscribe(() => {
           this.favoritesFill.set('transparent');
         });
       }
diff --git a/src/ui/src/app/round/poker-table/round-actions/play/play-round.component.ts b/src/ui/src/app/round/poker-table/round-actions/play/play-round.component.ts
index b569c91e..91741485 100644
--- a/src/ui/src/app/round/poker-table/round-actions/play/play-round.component.ts
+++ b/src/ui/src/app/round/poker-table/round-actions/play/play-round.component.ts
@@ -1,6 +1,6 @@
 
-import { Component, Input } from '@angular/core';
-import { Router, RouterModule } from '@angular/router';
+import { Component, input } from '@angular/core';
+import { Router } from '@angular/router';
 @Component({
   selector: 'ppo-play-round-button',
   template: `<svg
@@ -34,11 +34,11 @@ import { Router, RouterModule } from '@angular/router';
   standalone: true,
 })
 export class PlayRoundButtonComponent {
-  constructor(private router: Router) {}
-  @Input() roundId: string | undefined;
+  constructor(private router: Router) { }
+  roundId = input<string>();
   playRound(): void {
-    if (this.roundId) {
-      this.router.navigate(['/', 'play', this.roundId]);
+    if (this.roundId()) {
+      this.router.navigate(['/', 'play', this.roundId()]);
     }
   }
 }
diff --git a/src/ui/src/app/round/poker-table/round-result/round-result.component.html b/src/ui/src/app/round/poker-table/round-result/round-result.component.html
index 38741bc0..64d274d7 100644
--- a/src/ui/src/app/round/poker-table/round-result/round-result.component.html
+++ b/src/ui/src/app/round/poker-table/round-result/round-result.component.html
@@ -1,8 +1,8 @@
-@if (header && body) {
+@if (header() && body()) {
   <div class="round-result">
-    <span class="body-{{ headerClass }} header">{{ header }}</span>
-    <span class="body body-{{ bodyClass }}" [ngClass]="classes">
-      {{ body }}
+    <span class="body-{{ headerClass }} header">{{ header() }}</span>
+    <span class="body body-{{ bodyClass }}" [ngClass]="classes()">
+      {{ body() }}
     </span>
     <ng-content select="[actions]"></ng-content>
   </div>
diff --git a/src/ui/src/app/round/poker-table/round-result/round-result.component.ts b/src/ui/src/app/round/poker-table/round-result/round-result.component.ts
index 295832ce..559f17b1 100644
--- a/src/ui/src/app/round/poker-table/round-result/round-result.component.ts
+++ b/src/ui/src/app/round/poker-table/round-result/round-result.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
 
 @Component({
   selector: 'ppo-round-result',
@@ -7,17 +7,21 @@ import { Component, Input, OnInit } from '@angular/core';
   standalone: true,
   imports: [CommonModule]
 })
-export class RoundResultComponent implements OnInit {
+export class RoundResultComponent {
+
+  size = input('md');
+  header = input();
+  body = input();
+  classes = input<string[]>();
+
   headerClass = 'lg';
   bodyClass = 'sm';
-  @Input() size: 'lg' | 'md' = 'md';
-  @Input() header: string | number | undefined | null;
-  @Input() body: string | number | undefined | null;
-  @Input() classes: string[] = [];
-  ngOnInit(): void {
-    if (this.size === 'lg') {
-      this.headerClass = 'xl';
-      this.bodyClass = 'md';
-    }
+  constructor() {
+    effect(() => {
+      if (this.size() === 'lg') {
+        this.headerClass = 'xl';
+        this.bodyClass = 'md';
+      }
+    });
   }
 }
diff --git a/src/ui/src/app/shared/ui/directives/tooltip.directive.ts b/src/ui/src/app/shared/ui/directives/tooltip.directive.ts
index 21418bc7..11229a6b 100644
--- a/src/ui/src/app/shared/ui/directives/tooltip.directive.ts
+++ b/src/ui/src/app/shared/ui/directives/tooltip.directive.ts
@@ -5,9 +5,9 @@ import {
   ElementRef,
   EmbeddedViewRef,
   HostListener,
-  Input,
   OnDestroy,
   ViewContainerRef,
+  input
 } from '@angular/core';
 import { TooltipComponent } from '../components/tooltip/tooltip.component';
 
@@ -16,8 +16,9 @@ import { TooltipComponent } from '../components/tooltip/tooltip.component';
   standalone: true
 })
 export class TooltipDirective implements OnDestroy {
-  @Input() ppoTooltip = '';
-  @Input() fontSize = '22';
+
+  ppoTooltip = input('');
+  fontSize = input('22');
   private componentRef: ComponentRef<TooltipComponent> | null = null;
   @HostListener('mouseenter')
   onMouseEnter(): void {
@@ -53,7 +54,7 @@ export class TooltipDirective implements OnDestroy {
   ) { }
   private setTooltipComponentProperties(): void {
     if (this.componentRef !== null) {
-      this.componentRef.instance.tooltip = this.ppoTooltip;
+      this.componentRef.instance.tooltip = this.ppoTooltip();
       const { left, right, bottom } =
         this.elementRef.nativeElement.getBoundingClientRect();
       this.componentRef.instance.left = (right - left) / 2 + left;
diff --git a/src/ui/src/app/user/ui/round-list/round-list.component.html b/src/ui/src/app/user/ui/round-list/round-list.component.html
index cf5e6056..fd25d666 100644
--- a/src/ui/src/app/user/ui/round-list/round-list.component.html
+++ b/src/ui/src/app/user/ui/round-list/round-list.component.html
@@ -5,7 +5,7 @@
     </div>
     <div
       class="row"
-      *ngFor="let userRound of rounds; trackBy: userRoundTrackBy"
+      *ngFor="let userRound of rounds(); trackBy: userRoundTrackBy"
       (click)="selectRound(userRound)"
       [ngClass]="{
         selected: selectedRound()?.roundId === userRound.roundId
diff --git a/src/ui/src/app/user/ui/round-list/round-list.component.ts b/src/ui/src/app/user/ui/round-list/round-list.component.ts
index 16180b00..31c1012c 100644
--- a/src/ui/src/app/user/ui/round-list/round-list.component.ts
+++ b/src/ui/src/app/user/ui/round-list/round-list.component.ts
@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import {
   Component,
   DestroyRef,
-  Input,
   OnChanges,
   OnInit,
   SimpleChanges,
   inject,
-  signal,
+  input,
+  signal
 } from '@angular/core';
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router } from '@angular/router';
@@ -16,7 +16,7 @@ import { ScoreIsAccuratePipe } from '@app/round/helpers';
 import { CopyRoundLinkButtonComponent, PlayRoundButtonComponent, PokerTableComponent, RoundResultComponent } from "@app/round/poker-table";
 import { UserRoundViewmodel } from '@app/user/models';
 import { UserProfileStore } from '@app/user/user-profile.store';
-import { BehaviorSubject, filter, switchMap, take, tap } from 'rxjs';
+import { tap } from 'rxjs';
 import { SuitToSvgPipe } from './suitToSvg.pipe';
 @Component({
   selector: 'ppo-round-list',
@@ -49,11 +49,11 @@ export class RoundListComponent implements OnChanges, OnInit {
   ) {
     this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
       const selectedRoundId = params.get('selectedRoundId');
-      const selectedRoundIdx = this.rounds.findIndex(
+      const selectedRoundIdx = this.rounds().findIndex(
         (r) => r.roundId === selectedRoundId
       );
       if (selectedRoundIdx >= 0) {
-        this.selectedRound.set(this.rounds[selectedRoundIdx]);
+        this.selectedRound.set(this.rounds()[selectedRoundIdx]);
       }
     });
   }
@@ -61,7 +61,7 @@ export class RoundListComponent implements OnChanges, OnInit {
   watchingMyOwnProfile = this.userProfile.watchingMyOwnProfile;
   username = this.userProfile.username;
   destroy = inject(DestroyRef);
-  @Input() rounds: UserRoundViewmodel[] = [];
+  rounds = input<UserRoundViewmodel[]>([]);
   selectRound(round?: UserRoundViewmodel): void {
     if (!round) {
       this.router.navigate([], { relativeTo: this.route });
@@ -77,7 +77,7 @@ export class RoundListComponent implements OnChanges, OnInit {
   ngOnInit(): void {
     if (this.rounds.length) {
       if (!this.route.snapshot.queryParamMap.has('selectedRoundId')) {
-        this.selectRound(this.rounds[0]);
+        this.selectRound(this.rounds()[0]);
       }
     }