fix: No dual requests

src/app/create-todo/create-todo.html

@@ -2,13 +2,16 @@
   <input class="input" type="text" formControlName="title" />
   <input class="input" type="date" formControlName="dueDate" />
 
-  <button class="btn-primary" type="submit">
+  <button class="btn-primary min-w-[80px]" type="submit">
     {{ isEditing() ? "Update" : "Create" }}
   </button>
 
-  @if (isEditing()) {
-  <button class="btn-secondary" type="button" (click)="stopEdit()">
+  <button
+    [class.invisible]="!isEditing()"
+    class="btn-secondary"
+    type="button"
+    (click)="stopEdit()"
+  >
     Stop Editing
   </button>
-  }
 </form>

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

@@ -20,7 +20,7 @@ export class CreateTodo {
   private datePipe = new DatePipe('en-US');
   private taskService: TaskService = inject(TaskService);
 
-  @Input({ required: true }) tasks!: ResourceRef<any>;
+  @Input({ required: true }) tasks!: ResourceRef<Task[]>;
   @Input() editTodo: number = -1;
 
   ngOnInit() {
@@ -37,13 +37,24 @@ export class CreateTodo {
   submit() {
     if (this.form.valid) {
       if (this.form.value.id == -1) {
-        this.taskService
-          .createTask(this.form.value)
-          .then(() => this.tasks.reload());
+        this.taskService.createTask(this.form.value).then((task) =>
+          this.tasks.update((tasks: Task[]) => {
+            tasks.push(task);
+            return tasks;
+          }),
+        );
       } else {
-        this.taskService
-          .updateTask(this.form.value)
-          .then(() => this.tasks.reload());
+        this.taskService.updateTask(this.form.value).then((task: Task) => {
+          this.tasks.update((tasks: Task[]) => {
+            return tasks.map((existingTask) => {
+              if (existingTask.id == task.id) {
+                return task;
+              } else {
+                return existingTask;
+              }
+            });
+          });
+        });
         this.isEditing.set(false);
       }
       this.form.controls['id'].setValue(-1);

src/app/service/task-service.ts

@@ -71,7 +71,7 @@ export class TaskService {
         if (response.status != 200) {
           reject('Request did not fetch tasks succesfully');
         } else {
-          response.json().then((json) => resolve(json));
+          response.json().then((json) => resolve(task));
         }
       });
     });

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

@@ -20,6 +20,7 @@ export class TodoTable {
       const response = await fetch('http://localhost:2000/api/tasks');
       return (await response.json()) as Task[];
     },
+    defaultValue: [],
   });
   private taskService: TaskService = inject(TaskService);
 
@@ -30,10 +31,14 @@ export class TodoTable {
   }
 
   deleteTask(task: Task) {
-    this.taskService.deleteTask(task).then(() => this.tasks.reload());
+    this.taskService.deleteTask(task).then(() =>
+      this.tasks.update((tasks: Task[]) => {
+        return tasks.filter((existingTask) => existingTask.id != task.id);
+      }),
+    );
   }
 
   toggleTaskDoneStatus(task: Task) {
-    this.taskService.toggleTaskDoneStatus(task).then(() => this.tasks.reload());
+    this.taskService.toggleTaskDoneStatus(task);
   }
 }