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

.postcssrc.json

@@ -1,5 +0,0 @@
-{
-    "plugins": {
-      "@tailwindcss/postcss": {}
-    }
-}

package.json

@@ -20,11 +20,8 @@
     "@angular/platform-server": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@angular/ssr": "^19.2.8",
-    "@tailwindcss/postcss": "^4.1.5",
     "express": "^4.18.2",
-    "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
-    "tailwindcss": "^4.1.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

src/app/app.component.html

@@ -1,3 +1,21 @@
-<div class="container mx-auto p-4 m-3 flex justify-center items-center min-h-screen">
-  <app-product-overview></app-product-overview>
+<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>
+
+<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,17 +0,0 @@
-<div class="flex flex-col gap-6 p-6 max-w-lg mx-auto bg-white rounded-lg shadow-md">
-  <app-product-selection 
-    (productChange)="onProductChange($event)" 
-    (quantityChange)="onQuantityChange($event)"
-    class="w-full">
-  </app-product-selection>
-  
-  <app-product-quantity 
-    [product]="selectedProduct()" 
-    (quantityChange)="onQuantityChange($event)"
-    class="w-full">
-  </app-product-quantity>
-
-  <div class="mt-4 border-t pt-4 min-h-[40px]">
-    <p class="text-xl font-semibold text-right">Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
-  </div>
-</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,11 +0,0 @@
-<div class="min-h-[90px]">
-  <div class="mb-2 font-medium text-gray-700">Quantity</div>
-  <input 
-    type="number" 
-    [ngModel]="quantity" 
-    (ngModelChange)="onQuantityChange($event)" 
-    [disabled]="!product" 
-    min="1"
-    class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-  >
-</div>

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

@@ -1,34 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } 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,21 +0,0 @@
-<div class="min-h-[120px]">
-  <ng-container *ngIf="isProductLoading()">
-    <div class="flex items-center justify-center h-[72px] p-4 text-gray-500 border border-gray-300 rounded-md">
-      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
-      Loading...
-    </div>
-  </ng-container>
-  <ng-container *ngIf="!isProductLoading()">
-    <div class="mb-2 font-medium text-gray-700">Select Product</div>
-    <select 
-      [ngModel]="selectedProduct()" 
-      (ngModelChange)="onProductChange($event)"
-      class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-      <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>
-  </ng-container>
-</div>

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

@@ -1,58 +0,0 @@
-import { NgFor, NgIf } 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, NgIf],
-  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);
-
-  isProductLoading = signal(true);
-  
-  @Output() quantityChange = new EventEmitter<number>();
-  @Output() productChange = new EventEmitter<Product>();
-
-  private productService = inject(ProductService);
-
-  ngOnInit() {
-    this.productService.getProducts().subscribe(products => {
-      this.products.set(products);
-      this.isProductLoading.set(false);
-    });
-  }
-
-  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,45 +0,0 @@
-import { Injectable, signal, WritableSignal } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { delay, 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) {}
-
-  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();
-  }
-
-  getProducts(): Observable<any[]> {
-    return this.http.get<any[]>('https://fakestoreapi.com/products').pipe(
-      delay(1000)
-    );
-  }
-
-  getProductById(id: number): Observable<any> {
-    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`).pipe(
-      delay(1000)
-    );
-  }
-} 

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)
+    )
+  }
+}

src/styles.css

@@ -1 +1 @@
-@import "tailwindcss";
+/* You can add global styles to this file, and also import other style files */