fix(com-pwa): order list and detail state issues

Alwatr · Mar 6, 2023 · 00752a6 · 00752a6
1 parent 2d94ed3
commit 00752a6
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 44 deletions.
diff --git a/uniquely/com-pwa/src/alwatr-pwa.ts b/uniquely/com-pwa/src/alwatr-pwa.ts
@@ -1,4 +1,3 @@
 // TODO: rename me to index
 import './manager/index.js';
-import './old/index.js';
 import './ui/alwatr-pwa.js';
diff --git a/uniquely/com-pwa/src/manager/context-provider/order-storage.ts b/uniquely/com-pwa/src/manager/context-provider/order-storage.ts
@@ -15,13 +15,17 @@ export const fetchOrderStorage = async (): Promise<void> => {
   const userContext = userContextConsumer.getValue() ?? (await userContextConsumer.untilChange());
 
   try {
-    await fetchContext(orderStorageContextConsumer.id, {
-      ...config.fetchContextOptions,
-      url: config.api + '/order-list/',
-      queryParameters: {
-        userId: userContext.id,
-      },
-    });
+    await fetchContext(
+        orderStorageContextConsumer.id,
+        {
+          ...config.fetchContextOptions,
+          url: config.api + '/order-list/',
+          queryParameters: {
+            userId: userContext.id,
+          },
+        },
+        {debounce: 'NextCycle'},
+    );
   }
   catch (err) {
     // TODO: refactor

diff --git a/uniquely/com-pwa/src/manager/context-provider/product-storage.ts b/uniquely/com-pwa/src/manager/context-provider/product-storage.ts
@@ -20,6 +20,7 @@ export const fetchProductStorage = async (productStorageName = 'tile'): Promise<
             storage: productStorageName,
           },
         },
+        {debounce: 'NextCycle'},
     ));
     fetchPromiseList.push(fetchContext(
         `price-list-storage-${productStorageName}-context`,
@@ -30,6 +31,7 @@ export const fetchProductStorage = async (productStorageName = 'tile'): Promise<
             name: config.priceListName.replace('${productStorage}', productStorageName),
           },
         },
+        {debounce: 'NextCycle'},
     ));
     fetchPromiseList.push(fetchContext(
         `final-price-list-storage-${productStorageName}-context`,
@@ -40,6 +42,7 @@ export const fetchProductStorage = async (productStorageName = 'tile'): Promise<
             name: config.finalPriceListName.replace('${productStorage}', productStorageName),
           },
         },
+        {debounce: 'NextCycle'},
     ));
 
     (await Promise.all(fetchPromiseList)).length = 0;

diff --git a/uniquely/com-pwa/src/manager/context.ts b/uniquely/com-pwa/src/manager/context.ts
@@ -12,7 +12,7 @@ import type {Product, Order, OrderDelivery} from '@alwatr/type/customer-order-ma
 export * from '@alwatr/pwa-helper/context.js';
 
 export const productStorageContextConsumer =
-  contextConsumer.bind<AlwatrDocumentStorage<Product>>('`product-storage-tile-context`');
+  contextConsumer.bind<AlwatrDocumentStorage<Product>>('product-storage-tile-context');
 
 export const orderStorageContextConsumer =
   contextConsumer.bind<AlwatrDocumentStorage<Order>>('order-storage-context');

diff --git a/uniquely/com-pwa/src/manager/controller/order-detail.ts b/uniquely/com-pwa/src/manager/controller/order-detail.ts
@@ -12,7 +12,6 @@ export const pageOrderDetailFsm = new FiniteStateMachine({
   id: 'page-order-detail',
   initial: 'unresolved',
   context: {
-    order: <Order | null>null,
     orderId: <number | null>null,
     orderStorage: <AlwatrDocumentStorage<Order> | null>null,
     productStorage: <AlwatrDocumentStorage<Product> | null> null,
@@ -22,7 +21,7 @@ export const pageOrderDetailFsm = new FiniteStateMachine({
       on: {
         SHOW_DETAIL: '$self',
         CONNECTED: '$self',
-        CONTEXT_LOADED: 'detail',
+        CONTEXT_LOADED: '$self',
       },
     },
     unresolved: {
@@ -36,7 +35,9 @@ export const pageOrderDetailFsm = new FiniteStateMachine({
       },
     },
     loading: {
-      on: {},
+      on: {
+        CONTEXT_LOADED: 'detail',
+      },
     },
     detail: {
       on: {
@@ -45,10 +46,14 @@ export const pageOrderDetailFsm = new FiniteStateMachine({
       },
     },
     reloading: {
-      on: {},
+      on: {
+        CONTEXT_LOADED: 'detail',
+      },
     },
     notFound: {
-      on: {},
+      on: {
+        CONTEXT_LOADED: 'detail',
+      },
     },
   },
 });
@@ -61,15 +66,12 @@ pageOrderDetailFsm.signal.subscribe(async (state) => {
       topAppBarContextProvider.setValue({
         headlineKey: 'loading',
       });
-      const fetchList = [];
       if (productStorageContextConsumer.getValue() == null) {
-        fetchList.push(fetchProductStorage());
+        fetchProductStorage();
       }
       if (orderStorageContextConsumer.getValue() == null) {
-        fetchList.push(fetchOrderStorage());
+        fetchOrderStorage();
       }
-      await Promise.all(fetchList);
-      pageOrderDetailFsm.transition('CONTEXT_LOADED');
       break;
     }
 
@@ -81,27 +83,31 @@ pageOrderDetailFsm.signal.subscribe(async (state) => {
     }
 
     case 'REQUEST_UPDATE': {
-      await fetchOrderStorage();
+      await fetchOrderStorage(); // if not changed signal not fired!
       pageOrderDetailFsm.transition('CONTEXT_LOADED');
       break;
     }
   }
 
-  if (state.to === 'detail') {
-    // validate order id
-    const order = pageOrderDetailFsm.context.orderStorage?.data[pageOrderDetailFsm.context.orderId ?? ''] ?? null;
-    pageOrderDetailFsm.transition('INVALID_ORDER', {order});
+  if (state.to === 'loading') {
+    if (pageOrderDetailFsm.context.orderStorage != null && pageOrderDetailFsm.context.productStorage != null) {
+      pageOrderDetailFsm.transition('CONTEXT_LOADED');
+    }
   }
 });
 
 productStorageContextConsumer.subscribe((productStorage) => {
   pageOrderDetailFsm.context.productStorage = productStorage;
-  // pageOrderDetailFsm.transition('PRODUCT_LOADED', {productStorage});
+  if (pageOrderDetailFsm.context.orderStorage != null) {
+    pageOrderDetailFsm.transition('CONTEXT_LOADED');
+  }
 });
 
 orderStorageContextConsumer.subscribe((orderStorage) => {
   pageOrderDetailFsm.context.orderStorage = orderStorage;
-  // pageOrderDetailFsm.transition('ORDER_LOADED', {orderStorage});
+  if (pageOrderDetailFsm.context.productStorage != null) {
+    pageOrderDetailFsm.transition('CONTEXT_LOADED');
+  }
 });
 
 eventListener.subscribe<ClickSignalType>('page_order_detail_reload_click_event', () => {

diff --git a/uniquely/com-pwa/src/manager/controller/order-list.ts b/uniquely/com-pwa/src/manager/controller/order-list.ts
@@ -17,7 +17,7 @@ export const pageOrderListFsm = new FiniteStateMachine({
     $all: {
       on: {
         CONNECTED: '$self',
-        CONTEXT_LOADED: 'list',
+        CONTEXT_LOADED: '$self',
       },
     },
     unresolved: {
@@ -31,15 +31,19 @@ export const pageOrderListFsm = new FiniteStateMachine({
       },
     },
     loading: {
-      on: {},
+      on: {
+        CONTEXT_LOADED: 'list',
+      },
     },
     list: {
       on: {
         REQUEST_UPDATE: 'reloading',
       },
     },
     reloading: {
-      on: {},
+      on: {
+        CONTEXT_LOADED: 'list',
+      },
     },
   },
 } as const);
@@ -68,6 +72,12 @@ pageOrderListFsm.signal.subscribe(async (state) => {
       pageOrderListFsm.transition('CONTEXT_LOADED');
       break;
   }
+
+  if (state.to === 'loading') {
+    if (pageOrderListFsm.context.orderStorage != null) {
+      pageOrderListFsm.transition('CONTEXT_LOADED');
+    }
+  }
 });
 
 orderStorageContextConsumer.subscribe((orderStorage) => {

diff --git a/uniquely/com-pwa/src/page-order/page-order-detail.ts b/uniquely/com-pwa/src/page-order/page-order-detail.ts
@@ -1,5 +1,4 @@
 import {
-  customElement,
   css,
   html,
   LocalizeMixin,
@@ -28,16 +27,16 @@ import type {AlwatrDocumentStorage} from '@alwatr/type';
 import type {Order, OrderDraft, OrderItem, Product} from '@alwatr/type/customer-order-management.js';
 import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'alwatr-page-order-detail': AlwatrPageOrderDetail;
-  }
-}
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     'alwatr-page-order-detail': AlwatrPageOrderDetail;
+//   }
+// }
 
 /**
  * Alwatr Customer Order Management Order Form Page
  */
-@customElement('alwatr-page-order-detail')
+// @customElement('alwatr-page-order-detail')
 export class AlwatrPageOrderDetail extends LocalizeMixin(SignalMixin(UnresolvedMixin(AlwatrBaseElement))) {
   static formId = 'order';
 

diff --git a/uniquely/com-pwa/src/ui/page/404.ts b/uniquely/com-pwa/src/ui/page/404.ts
@@ -64,7 +64,13 @@ export class AlwatrPage404 extends UnresolvedMixin(LocalizeMixin(SignalMixin(Alw
     submitOrderCommandTrigger.request({
       itemList: [
         {
-          productId: '3232233323',
+          productId: '2',
+          price: 1000000,
+          finalPrice: 950000,
+          qty: 20,
+        },
+        {
+          productId: '4',
           price: 1000000,
           finalPrice: 950000,
           qty: 20,

diff --git a/uniquely/com-pwa/src/ui/page/order-detail.ts b/uniquely/com-pwa/src/ui/page/order-detail.ts
@@ -97,11 +97,11 @@ export class AlwatrPageOrderDetail extends StateMachineMixin(
 
   protected render_detail(): unknown {
     this._logger.logMethod('render_detail');
-    const order = this.stateMachine.context.order;
-    const orderId = this.stateMachine.context.orderId;
 
-    if (orderId == null || order == null) {
-      this._logger.error;
+    // validate order id
+    const order = this.stateMachine.context.orderStorage?.data[this.stateMachine.context.orderId ?? ''] ?? null;
+    if (order === null) {
+      this.stateMachine.transition('INVALID_ORDER');
       return;
     }
 
@@ -112,10 +112,10 @@ export class AlwatrPageOrderDetail extends StateMachineMixin(
       flipRtl: true,
       headline: message('order_item_headline').replace(
           '${orderId}',
-          replaceNumber(`${orderId}`.padStart(2, '0')),
+          replaceNumber(`${order.id}`.padStart(2, '0')),
       ),
       description: message('order_item_status') + ': ' + message('order_status_' + order.status),
-      href: `/order/${orderId}/tracking`,
+      href: `/order/${order.id}/tracking`,
     };
     return html`
       <alwatr-icon-box .content=${iconBoxContent}></alwatr-icon-box>

diff --git a/uniquely/com-pwa/src/ui/page/order-list.ts b/uniquely/com-pwa/src/ui/page/order-list.ts
@@ -72,7 +72,7 @@ export class AlwatrPageOrderList extends StateMachineMixin(
           flipRtl: true,
           headline: message('order_item_headline').replace('${orderId}', replaceNumber(order.id.padStart(2, '0'))),
           description: message('order_item_status') + ': ' + message('order_status_' + order.status),
-          href: `/order/${order.id}/tracking`,
+          href: `/order-detail/${order.id}`,
         };
         return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
       }),