Use async functions, move tests to experimental folder

Author: lpardosixtosMs

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js

@@ -84,12 +84,10 @@ class TodoApp extends HTMLElement {
         this.list.moveToNextPage();
     }
 
-    moveToPreviousPage() {
-        // Skeleton implementation of previous page navigation
-        this.list.moveToPreviousPage().then(() => {
-            this.bottombar.reenablePreviousPageButton();
-            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
-        });
+    async moveToPreviousPage() {
+        await this.list.moveToPreviousPage();
+        this.bottombar.reenablePreviousPageButton();
+        window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
     }
 
     update() {

experimental/javascript-wc-indexeddb/dist/components/todo-list/todo-list.component.js

@@ -139,26 +139,21 @@ class TodoList extends HTMLElement {
         this.#firstItemIndexOnScreen = this.listNode.firstChild.itemIndex;
     }
 
-    moveToPreviousPage() {
-        return this.storageManager
-            .getTodos(this.#firstItemIndexOnScreen, MAX_ON_SCREEN_ITEMS)
-            .then((items) => {
-                const elements = items.map((item) => {
-                    const { id, title, completed, priority } = item;
-                    const element = new TodoItem();
-                    element.setAttribute("itemid", id);
-                    element.setAttribute("itemtitle", title);
-                    element.setAttribute("itemcompleted", completed);
-                    element.setAttribute("data-priority", priority);
-                    element.itemIndex = item.itemNumber;
-                    return element;
-                });
-                this.#firstItemIndexOnScreen = items[0].itemNumber;
-                this.listNode.replaceChildren(...elements);
-            })
-            .catch((error) => {
-                // Error retrieving previous todos
-            });
+    async moveToPreviousPage() {
+        const items = await this.storageManager
+            .getTodos(this.#firstItemIndexOnScreen, MAX_ON_SCREEN_ITEMS);
+        const elements = items.map((item) => {
+            const { id, title, completed, priority } = item;
+            const element = new TodoItem();
+            element.setAttribute("itemid", id);
+            element.setAttribute("itemtitle", title);
+            element.setAttribute("itemcompleted", completed);
+            element.setAttribute("data-priority", priority);
+            element.itemIndex = item.itemNumber;
+            return element;
+        });
+        this.#firstItemIndexOnScreen = items[0].itemNumber;
+        this.listNode.replaceChildren(...elements);
     }
 
     #addItemToStorage(itemIndex, id, title, priority, completed) {

experimental/javascript-wc-indexeddb/dist/storage/indexedDB-manager.js

@@ -121,7 +121,6 @@ class IndexedDBManager {
             transaction.onerror = (event) => {
                 reject(event.target.error);
             };
-
         });
     }
 
@@ -182,7 +181,7 @@ class IndexedDBManager {
         const store = transaction.objectStore(this.storeName);
 
         // Delete the todo item directly using its primary key (itemNumber)
-        const deleteRequest = store.delete(itemNumber);
+        store.delete(itemNumber);
         this.pendingDeletions++;
 
         transaction.oncomplete = () => {

experimental/javascript-wc-indexeddb/src/components/todo-app/todo-app.component.js

@@ -46,7 +46,7 @@ class TodoApp extends HTMLElement {
     addItem(event) {
         const { detail: item } = event;
         this.list.addItem(item, this.#numberOfItems++);
-        this.update("add-item", item.id);
+        this.update();
     }
 
     toggleItem(event) {
@@ -56,20 +56,20 @@ class TodoApp extends HTMLElement {
             this.#numberOfCompletedItems--;
 
         this.list.toggleItem(event.detail.itemNumber, event.detail.completed);
-        this.update("toggle-item", event.detail.id);
+        this.update();
     }
 
     removeItem(event) {
         if (event.detail.completed)
             this.#numberOfCompletedItems--;
 
         this.#numberOfItems--;
-        this.update("remove-item", event.detail.id);
+        this.update();
         this.list.removeItem(event.detail.itemNumber);
     }
 
     updateItem(event) {
-        this.update("update-item", event.detail.id);
+        this.update();
     }
 
     toggleItems(event) {
@@ -84,12 +84,10 @@ class TodoApp extends HTMLElement {
         this.list.moveToNextPage();
     }
 
-    moveToPreviousPage() {
-        // Skeleton implementation of previous page navigation
-        this.list.moveToPreviousPage().then(() => {
-            this.bottombar.reenablePreviousPageButton();
-            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
-        });
+    async moveToPreviousPage() {
+        await this.list.moveToPreviousPage();
+        this.bottombar.reenablePreviousPageButton();
+        window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
     }
 
     update() {
@@ -140,7 +138,7 @@ class TodoApp extends HTMLElement {
     }
 
     connectedCallback() {
-        this.update("connected");
+        this.update();
         this.addListeners();
         this.router.initRouter(this.routeChange);
         this.#isReady = true;

experimental/javascript-wc-indexeddb/src/components/todo-list/todo-list.component.js

@@ -139,26 +139,20 @@ class TodoList extends HTMLElement {
         this.#firstItemIndexOnScreen = this.listNode.firstChild.itemIndex;
     }
 
-    moveToPreviousPage() {
-        return this.storageManager
-            .getTodos(this.#firstItemIndexOnScreen, MAX_ON_SCREEN_ITEMS)
-            .then((items) => {
-                const elements = items.map((item) => {
-                    const { id, title, completed, priority } = item;
-                    const element = new TodoItem();
-                    element.setAttribute("itemid", id);
-                    element.setAttribute("itemtitle", title);
-                    element.setAttribute("itemcompleted", completed);
-                    element.setAttribute("data-priority", priority);
-                    element.itemIndex = item.itemNumber;
-                    return element;
-                });
-                this.#firstItemIndexOnScreen = items[0].itemNumber;
-                this.listNode.replaceChildren(...elements);
-            })
-            .catch((error) => {
-                // Error retrieving previous todos
-            });
+    async moveToPreviousPage() {
+        const items = await this.storageManager.getTodos(this.#firstItemIndexOnScreen, MAX_ON_SCREEN_ITEMS);
+        const elements = items.map((item) => {
+            const { id, title, completed, priority } = item;
+            const element = new TodoItem();
+            element.setAttribute("itemid", id);
+            element.setAttribute("itemtitle", title);
+            element.setAttribute("itemcompleted", completed);
+            element.setAttribute("data-priority", priority);
+            element.itemIndex = item.itemNumber;
+            return element;
+        });
+        this.#firstItemIndexOnScreen = items[0].itemNumber;
+        this.listNode.replaceChildren(...elements);
     }
 
     #addItemToStorage(itemIndex, id, title, priority, completed) {