View doesn't update when new todo is added

[msabramo]

The view doesn't update when I add a new todo. I have to refresh the page to see the new todo.

See video:

Screen.Recording.2022-06-28.at.10.51.31.PM.mov

[msabramo]

OK, well I added this console.log:

diff --git a/frontend/stores/store.ts b/frontend/stores/store.ts
index cb009b1..a31a1d5 100644
--- a/frontend/stores/store.ts
+++ b/frontend/stores/store.ts
@@ -18,6 +18,7 @@ class Store {

   async saveTodo(todo: Todo) {
     const saved = await endpoint.saveTodo(todo);
+    console.log('saveTodo saved:>> ', saved);
     if (todo.id === 0) {
       this.addTodo(saved);
     } else {

and when I add a new todo, the output is:

saveTodo saved:>>  {id: 13, task: 'new todo', done: false}

Note that the code in saveTodo is expecting the id of a new todo to be 0 and it is not.

Furthermore, if I change the code to detect if the todo is new without relying on the id to be 0, then it works properly:

diff --git a/frontend/stores/store.ts b/frontend/stores/store.ts
index cb009b1..6e51293 100644
--- a/frontend/stores/store.ts
+++ b/frontend/stores/store.ts
@@ -18,13 +18,21 @@ class Store {

   async saveTodo(todo: Todo) {
     const saved = await endpoint.saveTodo(todo);
-    if (todo.id === 0) {
+    if (this.isNewTodo(todo)) {
       this.addTodo(saved);
     } else {
       this.updateTodo(saved);
     }
   }

+  private todoExists(todo: Todo) {
+    return this.todos.some((t) => t.id === todo.id);
+  }
+
+  private isNewTodo(todo: Todo) {
+    return !this.todoExists(todo);
+  }
+
   private addTodo(todo: Todo) {
     this.todos = [...this.todos, todo];
   }