refactor(app): improve loading state management in user fetch

src/app/app.component.html

@@ -1,3 +1,21 @@
-<h1>Shopping Cart</h1>
+<ng-container *ngIf="isLoadingUsers()">
+    <p>Loading...</p>
+</ng-container>
+<ng-container *ngIf="!isLoadingUsers()">
+<select id="userId" (change)="onUserSelect($event)">
+  <ng-container *ngFor="let user of users()">
+    <option [value]="user.id">{{user.name}}</option>
+  </ng-container>
+</select>
+</ng-container>
 
-<app-product-overview></app-product-overview>
+<ng-container *ngIf="isLoadingTodos()">
+  <p>Loading...</p>
+</ng-container>
+<div *ngIf="!isLoadingTodos() && selectedUserId() !== null && todos()">
+  <select id="todoId">
+    <ng-container *ngFor="let todo of todos()">
+      <option [value]="todo.id">{{todo.title}}</option>
+    </ng-container>
+  </select>
+</div>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'angular-workshop' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-workshop');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-workshop');
+  });
+});

src/app/app.component.ts

@@ -1,12 +1,44 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { ProductOverviewComponent } from "./product-overview/product-overview.component";
+import { Component, signal, ChangeDetectionStrategy, inject, WritableSignal } from '@angular/core';
+import { UserService } from './user.service';
+import { NgFor, NgIf } from '@angular/common';
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [ProductOverviewComponent],
+  imports: [NgFor, NgIf],
   templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   title = 'angular-workshop';
+  
+  private userService = inject(UserService);
+  
+  selectedUserId = signal<number | null>(null);
+
+  users: WritableSignal<any[]> = signal([]);
+  
+  todos: WritableSignal<any[]> = signal([]);
+
+  isLoadingUsers = signal(true);
+  isLoadingTodos = signal(false);
+  
+  ngOnInit() {
+    this.userService.getUsers().subscribe(users => {
+      this.users.set(users);
+      this.isLoadingUsers.set(false)
+    });
+  }
+  
+  onUserSelect(event: Event): void {
+    const userId = Number((event.target as HTMLSelectElement).value);
+    this.selectedUserId.set(userId);
+    this.isLoadingTodos.set(true);
+    this.userService.getTodos(userId).subscribe({
+      next: (todos) => this.todos.set(todos),
+      error: () => this.isLoadingTodos.set(false),
+      complete: () => this.isLoadingTodos.set(false)
+    });
+  }
 }

src/app/app.config.ts

@@ -7,6 +7,7 @@ import { provideHttpClient, withFetch } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
+
     provideRouter(routes), 
     provideHttpClient(withFetch())
   ]

src/app/product-overview/product-overview.component.html

@@ -1,6 +0,0 @@
-<app-product-selection (productChange)="onProductChange($event)" (quantityChange)="onQuantityChange($event)"></app-product-selection>
-<app-product-quantity [product]="selectedProduct()" (quantityChange)="onQuantityChange($event)"></app-product-quantity>
-
-<div>
-    <p>Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
-</div>

src/app/product-overview/product-overview.component.ts

@@ -1,28 +0,0 @@
-import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
-import { ProductSelectionComponent, Product } from '../product-selection/product-selection.component';
-import { ProductQuantityComponent } from '../product-quantity/product-quantity.component';
-import { CurrencyPipe } from '@angular/common';
-@Component({
-  selector: 'app-product-overview',
-  standalone: true,
-  imports: [ProductSelectionComponent, ProductQuantityComponent, CurrencyPipe],
-  templateUrl: './product-overview.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProductOverviewComponent {
-  selectedProduct = signal<Product | null>(null);
-  quantity = signal<number>(1);
-  
-  total = computed(() => {
-    const product = this.selectedProduct();
-    return product ? product.price * this.quantity() : 0;
-  });
-
-  onProductChange(product: Product) {
-    this.selectedProduct.set(product);
-  }
-
-  onQuantityChange(quantity: number) {
-    this.quantity.set(quantity);
-  }
-}

src/app/product-quantity/product-quantity.component.html

@@ -1 +0,0 @@
-<input type="number" [ngModel]="quantity" (ngModelChange)="onQuantityChange($event)" [disabled]="!product" min="1">

src/app/product-quantity/product-quantity.component.ts

@@ -1,33 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { Product } from '../product-selection/product-selection.component';
-import { FormsModule } from '@angular/forms';
-import { ProductService } from '../services/product.service';
-
-@Component({
-  selector: 'app-product-quantity',
-  standalone: true,
-  imports: [FormsModule],
-  templateUrl: './product-quantity.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProductQuantityComponent {
-  @Input({ required: true }) set product(value: Product | null) {
-    this.productService.setProduct(value);
-  }
-  get product(): Product | null {
-    return this.productService.getProduct();
-  }
-
-  @Output() quantityChange = new EventEmitter<number>();
-
-  constructor(private productService: ProductService) {}
-
-  get quantity(): number {
-    return this.productService.getQuantity();
-  }
-
-  onQuantityChange(value: number) {
-    this.productService.setQuantity(value);
-    this.quantityChange.emit(value);
-  }
-}

src/app/product-selection/product-selection.component.html

@@ -1,4 +0,0 @@
-<select [ngModel]="selectedProduct()" (ngModelChange)="onProductChange($event)">
-  <option [ngValue]="null">Select a product</option>
-  <option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
-</select>

src/app/product-selection/product-selection.component.ts

@@ -1,53 +0,0 @@
-import { NgFor } from '@angular/common';
-import { CurrencyPipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core';
-import { ProductService } from '../services/product.service';
-
-export type Product = {
-  id: number;
-  title: string;
-  price: number;
-  description: string;
-  category: string;
-  image: string;
-  rating: {
-    rate: number;
-    count: number;
-  }
-}
-
-@Component({
-  selector: 'app-product-selection',
-  standalone: true,
-  imports: [NgFor, CurrencyPipe, FormsModule],
-  templateUrl: './product-selection.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-
-export class ProductSelectionComponent implements OnInit {
-  products = signal<Product[]>([]);
-
-  selectedProduct = signal<Product | null>(null);
-
-  quantity = signal<number>(1);
-  
-  @Output() quantityChange = new EventEmitter<number>();
-  @Output() productChange = new EventEmitter<Product>();
-
-  private productService = inject(ProductService);
-
-  ngOnInit() {
-    this.productService.getProducts().subscribe(products => this.products.set(products));
-  }
-
-  onProductChange(selectedProduct: Product) {
-    this.selectedProduct.set(selectedProduct);
-    const product = this.selectedProduct();
-    if (product) {
-      this.productChange.emit(product);
-      this.quantity.set(1);
-      this.quantityChange.emit(1);
-    }
-  }
-}

src/app/services/product.service.ts

@@ -1,43 +0,0 @@
-import { Injectable, signal, WritableSignal } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, shareReplay } from 'rxjs';
-import { Product } from '../product-selection/product-selection.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProductService {
-  private productSignal = signal<Product | null>(null);
-  private quantitySignal = signal<number>(1);
-
-  constructor(private http: HttpClient) {}
-
-  // Local state management
-  setProduct(product: Product | null): void {
-    this.productSignal.set(product);
-    if (product) {
-      this.quantitySignal.set(1);
-    }
-  }
-
-  getProduct(): Product | null {
-    return this.productSignal();
-  }
-
-  setQuantity(quantity: number): void {
-    this.quantitySignal.set(quantity);
-  }
-
-  getQuantity(): number {
-    return this.quantitySignal();
-  }
-
-  // API calls
-  getProducts(): Observable<any[]> {
-    return this.http.get<any[]>('https://fakestoreapi.com/products');
-  }
-
-  getProductById(id: number): Observable<any> {
-    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`);
-  }
-} 

src/app/services/user.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UserService {
-  constructor(private http: HttpClient) {}
-}

src/app/user.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { delay, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  constructor(private http: HttpClient) {}
+
+  getUsers(): Observable<any[]> {
+    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users').pipe(
+      delay(1000)
+    )
+  }
+
+  getUser(id: number): Observable<any> {
+    return this.http.get<any>(`https://jsonplaceholder.typicode.com/users/${id}`).pipe(
+      delay(1000)
+    )
+  }
+
+  getTodos(userId: number): Observable<any[]> {
+    return this.http.get<any[]>(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).pipe(
+      delay(1000)
+    )
+  }
+
+  getTodo(id: number): Observable<any> {
+    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${id}`).pipe(
+      delay(1000)
+    )
+  }
+}