From 8926a9c25e8c21849e0ff1679834c7c3dca3ccb4 Mon Sep 17 00:00:00 2001
From: kevinagus <kevin.agus@outlook.it>
Date: Thu, 3 Apr 2025 17:58:07 +0200
Subject: [PATCH] feat(challenge 14): handle topics as signal and disabled the
 button if length is zero

---
 apps/rxjs/14-race-condition/project.json             |  9 +++++++++
 apps/rxjs/14-race-condition/src/app/app.component.ts | 11 +++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/rxjs/14-race-condition/project.json b/apps/rxjs/14-race-condition/project.json
index f84ccf155..4d10e73b9 100644
--- a/apps/rxjs/14-race-condition/project.json
+++ b/apps/rxjs/14-race-condition/project.json
@@ -78,6 +78,15 @@
           "coverage": true
         }
       }
+    },
+    "component-test": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/rxjs/14-race-condition/cypress.config.ts",
+        "testingType": "component",
+        "devServerTarget": "rxjs-race-condition:build",
+        "skipServe": true
+      }
     }
   }
 }
diff --git a/apps/rxjs/14-race-condition/src/app/app.component.ts b/apps/rxjs/14-race-condition/src/app/app.component.ts
index a7eb77710..574de62ed 100644
--- a/apps/rxjs/14-race-condition/src/app/app.component.ts
+++ b/apps/rxjs/14-race-condition/src/app/app.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   inject,
   OnInit,
+  signal,
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { take } from 'rxjs';
@@ -13,7 +14,9 @@ import { TopicService, TopicType } from './topic.service';
   standalone: true,
   selector: 'app-root',
   template: `
-    <button (click)="openTopicModal()">Open Topic</button>
+    <button [disabled]="topics().length === 0" (click)="openTopicModal()">
+      Open Topic
+    </button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -21,19 +24,19 @@ export class AppComponent implements OnInit {
   title = 'rxjs-race-condition';
   dialog = inject(MatDialog);
   topicService = inject(TopicService);
-  topics: TopicType[] = [];
+  topics = signal<TopicType[]>([]);
 
   ngOnInit(): void {
     this.topicService
       .fakeGetHttpTopic()
       .pipe(take(1))
-      .subscribe((topics) => (this.topics = topics));
+      .subscribe((topics) => this.topics.set(topics));
   }
 
   openTopicModal() {
     this.dialog.open(TopicModalComponent, {
       data: {
-        topics: this.topics,
+        topics: this.topics(),
       },
     });
   }