From 0b0dbb94f66ae257b102ac01651c7d828ad1c61a Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Mon, 7 Apr 2025 15:02:52 +0200
Subject: [PATCH] feat(14): finished

---
 .../src/app/app.component.ts                  | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

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..5d0829858 100644
--- a/apps/rxjs/14-race-condition/src/app/app.component.ts
+++ b/apps/rxjs/14-race-condition/src/app/app.component.ts
@@ -1,39 +1,28 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
-import { take } from 'rxjs';
 import { TopicModalComponent } from './topic-dialog.component';
-import { TopicService, TopicType } from './topic.service';
+import { TopicService } from './topic.service';
 
 @Component({
   standalone: true,
   selector: 'app-root',
   template: `
-    <button (click)="openTopicModal()">Open Topic</button>
+    @if (this.topics()) {
+      <button (click)="openTopicModal()">Open Topic</button>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
   title = 'rxjs-race-condition';
   dialog = inject(MatDialog);
-  topicService = inject(TopicService);
-  topics: TopicType[] = [];
-
-  ngOnInit(): void {
-    this.topicService
-      .fakeGetHttpTopic()
-      .pipe(take(1))
-      .subscribe((topics) => (this.topics = topics));
-  }
+  protected readonly topics = toSignal(inject(TopicService).fakeGetHttpTopic());
 
   openTopicModal() {
     this.dialog.open(TopicModalComponent, {
       data: {
-        topics: this.topics,
+        topics: this.topics(),
       },
     });
   }