Answer:5

apps/angular/5-crud-application/src/app/app.component.ts

@@ -1,50 +1,13 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
-import { randText } from '@ngneat/falso';
+import { Component } from '@angular/core';
+import { TodoListComponent } from './pages/todo-list/todo-list.component';
 
 @Component({
-  imports: [CommonModule],
+  imports: [CommonModule, TodoListComponent],
   selector: 'app-root',
   template: `
-    <div *ngFor="let todo of todos">
-      {{ todo.title }}
-      <button (click)="update(todo)">Update</button>
-    </div>
+    <app-todo-list />
   `,
   styles: [],
 })
-export class AppComponent implements OnInit {
-  todos!: any[];
-
-  constructor(private http: HttpClient) {}
-
-  ngOnInit(): void {
-    this.http
-      .get<any[]>('https://jsonplaceholder.typicode.com/todos')
-      .subscribe((todos) => {
-        this.todos = todos;
-      });
-  }
-
-  update(todo: any) {
-    this.http
-      .put<any>(
-        `https://jsonplaceholder.typicode.com/todos/${todo.id}`,
-        JSON.stringify({
-          todo: todo.id,
-          title: randText(),
-          body: todo.body,
-          userId: todo.userId,
-        }),
-        {
-          headers: {
-            'Content-type': 'application/json; charset=UTF-8',
-          },
-        },
-      )
-      .subscribe((todoUpdated: any) => {
-        this.todos[todoUpdated.id - 1] = todoUpdated;
-      });
-  }
-}
+export class AppComponent {}

apps/angular/5-crud-application/src/app/components/todo-item/todo-item.component.html

@@ -0,0 +1,6 @@
+<div class="todo-item">
+  <span>{{ todo.title }}</span>
+  <button (click)="update.emit(todo)" [disabled]="isProcessing">Update</button>
+  <button (click)="delete.emit(todo)" [disabled]="isProcessing">Delete</button>
+  <mat-progress-spinner *ngIf="isProcessing" diameter="20"></mat-progress-spinner>
+</div>

apps/angular/5-crud-application/src/app/components/todo-item/todo-item.component.spec.ts

@@ -0,0 +1,69 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Todo } from '../../models/todo.model';
+import { TodoItemComponent } from './todo-item.component';
+
+describe('TodoItemComponent', () => {
+  let component: TodoItemComponent;
+  let fixture: ComponentFixture<TodoItemComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TodoItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TodoItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should render the todo title', () => {
+    const mockTodo: Todo = {
+      id: 1,
+      title: 'Test Todo',
+      completed: false,
+      userId: 1,
+    };
+    component.todo = mockTodo;
+
+    fixture.detectChanges();
+
+    const todoText = fixture.nativeElement.querySelector('span').textContent;
+    expect(todoText).toContain('Test Todo');
+  });
+
+  it('should emit update event on clicking update button', () => {
+    const mockTodo: Todo = {
+      id: 1,
+      title: 'Test Todo',
+      completed: false,
+      userId: 1,
+    };
+    component.todo = mockTodo;
+    fixture.detectChanges();
+
+    jest.spyOn(component.update, 'emit');
+
+    const button = fixture.debugElement.query(By.css('button:nth-of-type(1)'));
+    button.triggerEventHandler('click', null);
+
+    expect(component.update.emit).toHaveBeenCalledWith(mockTodo);
+  });
+
+  it('should emit delete event on clicking delete button', () => {
+    const mockTodo: Todo = {
+      id: 1,
+      title: 'Test Todo',
+      completed: false,
+      userId: 1,
+    };
+    component.todo = mockTodo;
+    fixture.detectChanges();
+
+    jest.spyOn(component.delete, 'emit');
+
+    const button = fixture.debugElement.query(By.css('button:nth-of-type(2)'));
+    button.triggerEventHandler('click', null);
+
+    expect(component.delete.emit).toHaveBeenCalledWith(mockTodo);
+  });
+});

apps/angular/5-crud-application/src/app/components/todo-item/todo-item.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Todo } from '../../models/todo.model';
+
+@Component({
+  selector: 'app-todo-item',
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinnerModule],
+  templateUrl: './todo-item.component.html',
+  styleUrls: ['./todo-item.component.scss'],
+})
+export class TodoItemComponent {
+  @Input()
+  todo!: Todo;
+  @Input() loadingIds!: number[];
+  @Input() isProcessing!: boolean;
+  @Output() update = new EventEmitter<Todo>();
+  @Output() delete = new EventEmitter<Todo>();
+
+  updateTodo() {
+    this.update.emit(this.todo);
+  }
+
+  deleteTodo() {
+    this.delete.emit(this.todo);
+  }
+}

apps/angular/5-crud-application/src/app/models/todo.model.ts

@@ -0,0 +1,6 @@
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+}

apps/angular/5-crud-application/src/app/pages/todo-list/todo-list.component.html

@@ -0,0 +1,20 @@
+<app-loading-spinner *ngIf="(loadingIds$ | async)?.length??0 > 0"></app-loading-spinner>
+
+<div *ngIf="(error$ | async) as errorMessage" class="error-message">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="(todos$ | async)?.length??0 > 0; else noTodos">
+  <app-todo-item
+    *ngFor="let todo of (todos$ | async)"
+    [todo]="todo"
+    (update)="update($event)"
+    (delete)="delete($event)"
+    [loadingIds]="(loadingIds$ | async) ?? []" 
+    [isProcessing]="isProcessing(todo.id)">
+  </app-todo-item>
+</div>
+
+<ng-template #noTodos>
+  <p>No todos found</p>
+</ng-template>

apps/angular/5-crud-application/src/app/pages/todo-list/todo-list.component.scss

@@ -0,0 +1,17 @@
+.loading-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.error-message {
+  color: red;
+  text-align: center;
+  margin: 10px 0;
+}

apps/angular/5-crud-application/src/app/pages/todo-list/todo-list.component.spec.ts

@@ -0,0 +1,73 @@
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { of } from 'rxjs';
+import { TodoItemComponent } from '../../components/todo-item/todo-item.component';
+import { Todo } from '../../models/todo.model';
+import { TodoService } from '../../services/todo.service';
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+  let todoService: TodoService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TodoListComponent,
+        MatProgressSpinnerModule,
+        TodoItemComponent,
+        HttpClientTestingModule,
+      ],
+      providers: [TodoService],
+    }).compileComponents();
+    httpMock = TestBed.inject(HttpTestingController);
+
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    todoService = TestBed.inject(TodoService);
+    jest.spyOn(todoService, 'getTodos').mockReturnValue(of([]));
+  });
+
+  it('should call get todos on initialization', () => {
+    const mockTodos: Todo[] = [
+      { id: 1, title: 'Test Todo', completed: false, userId: 1 },
+    ];
+    jest.spyOn(todoService, 'getTodos').mockReturnValue(of(mockTodos));
+
+    fixture.detectChanges();
+
+    expect(todoService.getTodos).toHaveBeenCalled();
+  });
+
+  it('should call updateTodo when an item is updated', () => {
+    const mockTodo: Todo = {
+      id: 1,
+      title: 'Test Todo',
+      completed: false,
+      userId: 1,
+    };
+
+    jest.spyOn(todoService, 'updateTodo').mockReturnValue(of(mockTodo));
+    component.update(mockTodo);
+    expect(todoService.updateTodo).toHaveBeenCalledWith(mockTodo);
+  });
+
+  it('should call deleteTodo when an item is deleted', () => {
+    const mockTodo: Todo = {
+      id: 1,
+      title: 'Test Todo',
+      completed: false,
+      userId: 1,
+    };
+
+    jest.spyOn(todoService, 'deleteTodo').mockReturnValue(of(mockTodo));
+    component.delete(mockTodo);
+    expect(todoService.deleteTodo).toHaveBeenCalledWith(mockTodo);
+  });
+});

apps/angular/5-crud-application/src/app/pages/todo-list/todo-list.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TodoItemComponent } from '../../components/todo-item/todo-item.component';
+import { Todo } from '../../models/todo.model';
+import { LoadingSpinnerComponent } from '../../shared/loading-spinner/loading-spinner.component';
+import { TodoStore } from '../../stores/todo.store';
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TodoItemComponent,
+    MatProgressSpinnerModule,
+    LoadingSpinnerComponent,
+  ],
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss'],
+  providers: [TodoStore],
+})
+export class TodoListComponent implements OnInit {
+  todoStore = inject(TodoStore);
+  todos$ = this.todoStore.todos$;
+  loadingIds$ = this.todoStore.loadingIds$;
+  error$ = this.todoStore.error$;
+  processingId = signal<number | null>(null);
+
+  ngOnInit(): void {
+    this.todoStore.loadTodos();
+  }
+
+  update(todo: Todo) {
+    this.processingId.set(todo.id);
+    this.todoStore.updateTodo(todo);
+  }
+
+  delete(todo: Todo) {
+    this.processingId.set(todo.id);
+    this.todoStore.deleteTodo(todo);
+  }
+
+  isProcessing = (id: number) => this.processingId() === id;
+}