From afcfbda16389ebb7d38c415fd0606b267af6edec Mon Sep 17 00:00:00 2001 From: WhoisBsa Date: Mon, 14 Apr 2025 11:43:22 -0300 Subject: [PATCH] feat: answer:53 big signal performance --- .../src/app/address.component.ts | 6 +-- .../src/app/job.component.ts | 4 +- .../src/app/name.component.ts | 2 +- .../src/app/note.component.ts | 2 +- .../src/app/user-form.component.ts | 44 ++++++++++--------- .../src/app/user.service.ts | 16 +++---- 6 files changed, 39 insertions(+), 35 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..9c9b7e0ca 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 @@ -7,9 +7,9 @@ import { UserStore } from './user.service'; template: `
Address: -
Street: {{ userService.user().address.street }}
-
ZipCode: {{ userService.user().address.zipCode }}
-
City: {{ userService.user().address.city }}
+
Street: {{ userService.user.address().street }}
+
ZipCode: {{ userService.user.address().zipCode }}
+
City: {{ userService.user.address().city }}
`, changeDetection: ChangeDetectionStrategy.OnPush, 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..c64ac8b88 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 @@ -7,8 +7,8 @@ import { UserStore } from './user.service'; template: `
Job: -
title: {{ userService.user().title }}
-
salary: {{ userService.user().salary }}
+
title: {{ userService.user.title() }}
+
salary: {{ userService.user.salary() }}
`, changeDetection: ChangeDetectionStrategy.OnPush, 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..7c6aeb848 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 @@ -6,7 +6,7 @@ import { UserStore } from './user.service'; selector: 'name', template: `
- Name: {{ userService.user().name }} + Name: {{ userService.user.name() }}
`, changeDetection: ChangeDetectionStrategy.OnPush, 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..e659fdf03 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 @@ -6,7 +6,7 @@ import { UserStore } from './user.service'; selector: 'note', template: `
- Note: {{ userService.user().note }} + Note: {{ userService.user.note() }}
`, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts index d0f2164ce..01f12c1ad 100644 --- a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts +++ b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts @@ -64,36 +64,40 @@ export class UserFormComponent { userStore = inject(UserStore); form = new FormGroup({ - name: new FormControl(this.userStore.user().name, { nonNullable: true }), - street: new FormControl(this.userStore.user().address.street, { + name: new FormControl(this.userStore.user.name(), { nonNullable: true }), + street: new FormControl(this.userStore.user.address().street, { nonNullable: true, }), - zipCode: new FormControl(this.userStore.user().address.zipCode, { + zipCode: new FormControl(this.userStore.user.address().zipCode, { nonNullable: true, }), - city: new FormControl(this.userStore.user().address.city, { + city: new FormControl(this.userStore.user.address().city, { nonNullable: true, }), - note: new FormControl(this.userStore.user().note, { nonNullable: true }), - title: new FormControl(this.userStore.user().title, { nonNullable: true }), - salary: new FormControl(this.userStore.user().salary, { + note: new FormControl(this.userStore.user.note(), { nonNullable: true }), + title: new FormControl(this.userStore.user.title(), { nonNullable: true }), + salary: new FormControl(this.userStore.user.salary(), { nonNullable: true, }), }); submit() { - this.userStore.user.update((u) => ({ - ...u, - name: this.form.getRawValue().name, - address: { - ...u.address, - street: this.form.getRawValue().street, - zipCode: this.form.getRawValue().zipCode, - city: this.form.getRawValue().city, - }, - note: this.form.getRawValue().note, - title: this.form.getRawValue().title, - salary: this.form.getRawValue().salary, - })); + const formValues = this.form.getRawValue(); + + this.userStore.user.name.set(formValues.name); + this.userStore.user.title.set(formValues.title); + this.userStore.user.salary.set(formValues.salary); + + const address = { + street: formValues.street, + zipCode: formValues.zipCode, + city: formValues.city, + }; + + if ( + JSON.stringify(address) !== JSON.stringify(this.userStore.user.address()) + ) { + this.userStore.user.address.set(address); + } } } diff --git a/apps/signal/53-big-signal-performance/src/app/user.service.ts b/apps/signal/53-big-signal-performance/src/app/user.service.ts index 4b3b7c512..1447c81f7 100644 --- a/apps/signal/53-big-signal-performance/src/app/user.service.ts +++ b/apps/signal/53-big-signal-performance/src/app/user.service.ts @@ -2,15 +2,15 @@ import { Injectable, signal } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class UserStore { - user = signal({ - name: 'Bob', - address: { + user = { + name: signal('Bob'), + address: signal({ street: '', zipCode: '', city: '', - }, - note: '', - title: '', - salary: 0, - }); + }), + note: signal(''), + title: signal(''), + salary: signal(0), + }; }