From 96699324695ffaa92799b48e3d05da26b7a350ad Mon Sep 17 00:00:00 2001
From: Hung Pham <truonghungit@gmail.com>
Date: Thu, 16 Apr 2026 15:25:39 +0700
Subject: [PATCH] refactor(challenge 53): refactor components to use computed
 properties for user data

---
 .../src/app/address.component.ts              | 30 +++++++++++++++----
 .../src/app/job.component.ts                  | 23 +++++++++++---
 .../src/app/name.component.ts                 | 13 ++++++--
 .../src/app/note.component.ts                 | 13 ++++++--
 4 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/apps/signal/53-big-signal-performance/src/app/address.component.ts b/apps/signal/53-big-signal-performance/src/app/address.component.ts
index f894d697e..1b736dcdb 100644
--- a/apps/signal/53-big-signal-performance/src/app/address.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/address.component.ts
@@ -1,5 +1,10 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
 import { UserStore } from './user.service';
 
 @Component({
@@ -7,14 +12,29 @@ import { UserStore } from './user.service';
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Address:
-      <div>Street: {{ userService.user().address.street }}</div>
-      <div>ZipCode: {{ userService.user().address.zipCode }}</div>
-      <div>City: {{ userService.user().address.city }}</div>
+      <div>Street: {{ address().street }}</div>
+      <div>ZipCode: {{ address().zipCode }}</div>
+      <div>City: {{ address().city }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CDFlashingDirective],
 })
 export class AddressComponent {
-  userService = inject(UserStore);
+  private readonly userService = inject(UserStore);
+
+  address = computed(
+    () => {
+      const user = this.userService.user();
+
+      return {
+        street: user.address.street,
+        zipCode: user.address.zipCode,
+        city: user.address.city,
+      };
+    },
+    {
+      equal: (prev, next) => JSON.stringify(prev) === JSON.stringify(next),
+    },
+  );
 }
diff --git a/apps/signal/53-big-signal-performance/src/app/job.component.ts b/apps/signal/53-big-signal-performance/src/app/job.component.ts
index d3186fc9f..829ab62fe 100644
--- a/apps/signal/53-big-signal-performance/src/app/job.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/job.component.ts
@@ -1,5 +1,10 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
 import { UserStore } from './user.service';
 
 @Component({
@@ -7,13 +12,23 @@ import { UserStore } from './user.service';
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Job:
-      <div>title: {{ userService.user().title }}</div>
-      <div>salary: {{ userService.user().salary }}</div>
+      <div>title: {{ job().title }}</div>
+      <div>salary: {{ job().salary }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CDFlashingDirective],
 })
 export class JobComponent {
-  userService = inject(UserStore);
+  private readonly userService = inject(UserStore);
+
+  job = computed(
+    () => ({
+      title: this.userService.user().title,
+      salary: this.userService.user().salary,
+    }),
+    {
+      equal: (prev, next) => JSON.stringify(prev) === JSON.stringify(next),
+    },
+  );
 }
diff --git a/apps/signal/53-big-signal-performance/src/app/name.component.ts b/apps/signal/53-big-signal-performance/src/app/name.component.ts
index f93b5675a..4fd6abbd7 100644
--- a/apps/signal/53-big-signal-performance/src/app/name.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/name.component.ts
@@ -1,17 +1,24 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
 import { UserStore } from './user.service';
 
 @Component({
   selector: 'name',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Name: {{ userService.user().name }}
+      Name: {{ name() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CDFlashingDirective],
 })
 export class NameComponent {
-  userService = inject(UserStore);
+  private readonly userService = inject(UserStore);
+
+  name = computed(() => this.userService.user().name);
 }
diff --git a/apps/signal/53-big-signal-performance/src/app/note.component.ts b/apps/signal/53-big-signal-performance/src/app/note.component.ts
index dd0033962..ffdbd55cc 100644
--- a/apps/signal/53-big-signal-performance/src/app/note.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/note.component.ts
@@ -1,17 +1,24 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
 import { UserStore } from './user.service';
 
 @Component({
   selector: 'note',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Note: {{ userService.user().note }}
+      Note: {{ note() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CDFlashingDirective],
 })
 export class NoteComponent {
-  userService = inject(UserStore);
+  private readonly userService = inject(UserStore);
+
+  note = computed(() => this.userService.user().note);
 }