chore: Minor refactorments

src/app/app.config.ts

@@ -1,4 +1,8 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -7,6 +11,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes),
-  ]
+  ],
 };

src/app/create-todo/create-todo.ts

@@ -1,11 +1,12 @@
 import { DatePipe } from '@angular/common';
-import { Component, Input, ResourceRef, signal } from '@angular/core';
+import { Component, inject, Input, ResourceRef, signal } from '@angular/core';
 import {
   FormControl,
   FormGroup,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { TaskService } from '../service/task-service';
 
 @Component({
   selector: 'app-create-todo',
@@ -15,61 +16,13 @@ import {
 })
 export class CreateTodo {
   public form!: FormGroup;
-  private datePipe = new DatePipe('en-US');
   public isEditing = signal(false);
+  private datePipe = new DatePipe('en-US');
+  private taskService: TaskService = inject(TaskService);
+
   @Input({ required: true }) tasks!: ResourceRef<any>;
   @Input() editTodo: number = -1;
 
-  submit() {
-    if (this.form.valid) {
-      if (this.form.value.id == -1) {
-        this.createTask(this.form.value);
-      } else {
-        this.updateTask(this.form.value);
-      }
-      this.form.controls['id'].setValue(-1);
-    }
-  }
-
-  stopEdit() {
-    this.isEditing.set(false);
-    this.form.controls['id'].setValue(-1);
-  }
-
-  updateTask(task: Task) {
-    fetch('http://localhost:2000/api/tasks/' + task.id, {
-      method: 'PUT',
-      body: JSON.stringify(task),
-      headers: {
-        'content-type': 'application/json',
-      },
-    }).then(() => {
-      this.tasks.reload();
-    });
-    this.isEditing.set(false);
-  }
-
-  createTask(task: Task) {
-    fetch('http://localhost:2000/api/tasks', {
-      method: 'POST',
-      body: JSON.stringify(task),
-      headers: {
-        'content-type': 'application/json',
-      },
-    }).then(() => {
-      this.tasks.reload();
-    });
-  }
-
-  editTask(task: Task) {
-    this.form.controls['id'].setValue(task.id);
-    this.form.controls['title'].setValue(task.title);
-    this.form.controls['dueDate'].setValue(
-      this.datePipe.transform(task.dueDate, 'yyyy-MM-dd'),
-    );
-    this.isEditing.set(true);
-  }
-
   ngOnInit() {
     this.form = new FormGroup({
       id: new FormControl(-1),
@@ -80,4 +33,34 @@ export class CreateTodo {
       done: new FormControl(false),
     });
   }
+
+  submit() {
+    if (this.form.valid) {
+      if (this.form.value.id == -1) {
+        this.taskService
+          .createTask(this.form.value)
+          .then(() => this.tasks.reload());
+      } else {
+        this.taskService
+          .updateTask(this.form.value)
+          .then(() => this.tasks.reload());
+        this.isEditing.set(false);
+      }
+      this.form.controls['id'].setValue(-1);
+    }
+  }
+
+  stopEdit() {
+    this.isEditing.set(false);
+    this.form.controls['id'].setValue(-1);
+  }
+
+  editTask(task: Task) {
+    this.form.controls['id'].setValue(task.id);
+    this.form.controls['title'].setValue(task.title);
+    this.form.controls['dueDate'].setValue(
+      this.datePipe.transform(task.dueDate, 'yyyy-MM-dd'),
+    );
+    this.isEditing.set(true);
+  }
 }

src/app/service/task-service.ts

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TaskService {
+  constructor() {}
+
+  public toggleTaskDoneStatus(task: Task): Promise<Task> {
+    return new Promise((resolve, reject) => {
+      fetch('http://localhost:2000/api/tasks/' + task.id, {
+        method: 'PUT',
+        body: JSON.stringify({
+          ...task,
+          done: !task.done,
+        }),
+        headers: {
+          'content-type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status != 200) {
+          reject('Error toggling task done status');
+        } else {
+          response.json().then((json) => resolve(json));
+        }
+      });
+    });
+  }
+
+  public deleteTask(task: Task): Promise<void> {
+    return new Promise((resolve, reject) => {
+      fetch('http://localhost:2000/api/tasks/' + task.id, {
+        method: 'DELETE',
+      }).then((response) => {
+        if (response.status != 200) {
+          reject('Error deleting task');
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  public createTask(task: Task): Promise<Task> {
+    return new Promise((resolve, reject) => {
+      fetch('http://localhost:2000/api/tasks', {
+        method: 'POST',
+        body: JSON.stringify(task),
+        headers: {
+          'content-type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status != 200) {
+          reject('Request did not create tasks succesfully');
+        } else {
+          response.json().then((json) => resolve(json));
+        }
+      });
+    });
+  }
+
+  public updateTask(task: Task): Promise<Task> {
+    return new Promise((resolve, reject) => {
+      fetch('http://localhost:2000/api/tasks/' + task.id, {
+        method: 'PUT',
+        body: JSON.stringify(task),
+        headers: {
+          'content-type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status != 200) {
+          reject('Request did not fetch tasks succesfully');
+        } else {
+          response.json().then((json) => resolve(json));
+        }
+      });
+    });
+  }
+}

src/app/todo-table/todo-table.ts

@@ -1,5 +1,12 @@
 import { DatePipe } from '@angular/common';
-import { Component, EventEmitter, Output, resource } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Output,
+  resource,
+} from '@angular/core';
+import { TaskService } from '../service/task-service';
 
 @Component({
   selector: 'app-todo-table',
@@ -14,34 +21,19 @@ export class TodoTable {
       return (await response.json()) as Task[];
     },
   });
+  private taskService: TaskService = inject(TaskService);
+
   @Output() editTaskEvent = new EventEmitter<Task>();
 
   editTask(task: Task) {
     this.editTaskEvent.emit(task);
   }
 
-  toggleTaskDoneStatus(task: Task) {
-    fetch('http://localhost:2000/api/tasks/' + task.id, {
-      method: 'PUT',
-      body: JSON.stringify({
-        ...task,
-        done: !task.done,
-      }),
-      headers: {
-        'content-type': 'application/json',
-      },
-    });
-  }
-
   deleteTask(task: Task) {
-    fetch('http://localhost:2000/api/tasks/' + task.id, {
+    this.taskService.deleteTask(task).then(() => this.tasks.reload());
-      method: 'DELETE',
-    }).then(() => {
-      this.tasks.reload();
-    });
   }
 
-  ngOnInit() {
+  toggleTaskDoneStatus(task: Task) {
-    console.log(this.tasks.value());
+    this.taskService.toggleTaskDoneStatus(task).then(() => this.tasks.reload());
   }
 }

src/main.ts

@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
-bootstrapApplication(App, appConfig)
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
-  .catch((err) => console.error(err));