feat(53): solution

Author: lukasss88

apps/signal/53-big-signal-performance/src/app/address.component.ts

@@ -7,9 +7,9 @@ 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: {{ userService.address.street() }}</div>
+      <div>ZipCode: {{ userService.address.zipCode() }}</div>
+      <div>City: {{ userService.address.city() }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/job.component.ts

@@ -7,8 +7,8 @@ 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: {{ userService.title() }}</div>
+      <div>salary: {{ userService.salary() }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/name.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
   selector: 'name',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Name: {{ userService.user().name }}
+      Name: {{ userService.name() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/note.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
   selector: 'note',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Note: {{ userService.user().note }}
+      Note: {{ userService.note() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/user-form.component.ts

@@ -64,36 +64,24 @@ 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.name(), { nonNullable: true }),
+    street: new FormControl(this.userStore.address.street(), {
       nonNullable: true,
     }),
-    zipCode: new FormControl(this.userStore.user().address.zipCode, {
+    zipCode: new FormControl(this.userStore.address.zipCode(), {
       nonNullable: true,
     }),
-    city: new FormControl(this.userStore.user().address.city, {
+    city: new FormControl(this.userStore.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.note(), { nonNullable: true }),
+    title: new FormControl(this.userStore.title(), { nonNullable: true }),
+    salary: new FormControl(this.userStore.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,
-    }));
+    this.userStore.updateUser(this.form.getRawValue());
   }
 }

apps/signal/53-big-signal-performance/src/app/user.service.ts

@@ -1,16 +1,64 @@
 import { Injectable, signal } from '@angular/core';
 
+export interface Address {
+  street: string;
+  zipCode: string;
+  city: string;
+}
+
+export interface User {
+  name: string;
+  address: Address;
+  note: string;
+  title: string;
+  salary: number;
+}
+
 @Injectable({ providedIn: 'root' })
 export class UserStore {
-  user = signal({
-    name: 'Bob',
-    address: {
-      street: '',
-      zipCode: '',
-      city: '',
-    },
-    note: '',
-    title: '',
-    salary: 0,
-  });
+  private readonly _name = signal('Bob');
+  private readonly _note = signal('');
+  private readonly _title = signal('');
+  private readonly _salary = signal(0);
+  private readonly _address = {
+    street: signal(''),
+    zipCode: signal(''),
+    city: signal(''),
+  };
+
+  readonly name = this._name.asReadonly();
+  readonly note = this._note.asReadonly();
+  readonly title = this._title.asReadonly();
+  readonly salary = this._salary.asReadonly();
+  readonly address = {
+    street: this._address.street.asReadonly(),
+    zipCode: this._address.zipCode.asReadonly(),
+    city: this._address.city.asReadonly(),
+  };
+
+  updateUser(
+    updates: Partial<User & { street: string; zipCode: string; city: string }>,
+  ) {
+    if (updates.name !== undefined) {
+      this._name.set(updates.name);
+    }
+    if (updates.street !== undefined) {
+      this._address.street.set(updates.street);
+    }
+    if (updates.zipCode !== undefined) {
+      this._address.zipCode.set(updates.zipCode);
+    }
+    if (updates.city !== undefined) {
+      this._address.city.set(updates.city);
+    }
+    if (updates.note !== undefined) {
+      this._note.set(updates.note);
+    }
+    if (updates.title !== undefined) {
+      this._title.set(updates.title);
+    }
+    if (updates.salary !== undefined) {
+      this._salary.set(updates.salary);
+    }
+  }
 }