feat(com-pwa/order-list): reloading

uniquely/com-pwa/src/director/submit-order-command-handler.ts

@@ -5,7 +5,7 @@ import {commandHandler} from '@alwatr/signal';
 import {snackbarSignalTrigger} from '@alwatr/ui-kit/snackbar/show-snackbar.js';
 
 import {config} from '../config.js';
-import {userContextConsumer, orderStorageContextProvider, submitOrderCommandTrigger} from '../manager/context.js';
+import {userContextConsumer, submitOrderCommandTrigger} from '../manager/context.js';
 import {logger} from '../manager/logger.js';
 
 import type {Order} from '@alwatr/type/customer-order-management.js';
@@ -27,11 +27,11 @@ commandHandler.define<Partial<Order>, Order | null>(submitOrderCommandTrigger.id
 
     const newOrder = response.data;
 
-    const orderStorage = orderStorageContextProvider.getValue();
-    if (orderStorage != null) {
-      orderStorage.data[newOrder.id] = newOrder;
-      orderStorageContextProvider.setValue(orderStorage);
-    }
+    // const orderStorage = orderStorageContextProvider.getValue();
+    // if (orderStorage != null) {
+    //   orderStorage.data[newOrder.id] = newOrder;
+    //   orderStorageContextProvider.setValue(orderStorage);
+    // }
 
     snackbarSignalTrigger.request({
       message: message('submit_order_success'),

uniquely/com-pwa/src/l18r/fa.json

@@ -15,6 +15,7 @@
     "order_detail_headline": "سفارش ${orderId}",
     "order_detail_headline_new": "سفارش جدید",
     "new_order_button": "سفارش جدید",
+    "reload": "به‌روزرسانی",
 
     "fetch_failed": "خطا در دریافت اطلاعات از اینترنت!",
     "retry": "تلاش مجدد",

uniquely/com-pwa/src/manager/context-provider/order-storage.ts

@@ -4,19 +4,18 @@ import {snackbarSignalTrigger} from '@alwatr/ui-kit/snackbar/show-snackbar.js';
 
 import {config} from '../../config.js';
 import {
-  orderStorageContextProvider,
   orderStorageContextConsumer,
   userContextConsumer,
 } from '../context.js';
 import {logger} from '../logger.js';
 
-orderStorageContextProvider.setProvider(async (args): Promise<void> => {
-  logger.logMethod('orderStorageContextProvider');
+export const fetchOrderStorage = async (): Promise<void> => {
+  logger.logMethod('fetchOrderStorage');
 
   const userContext = userContextConsumer.getValue() ?? (await userContextConsumer.untilChange());
 
   try {
-    await fetchContext(orderStorageContextProvider.id, {
+    await fetchContext(orderStorageContextConsumer.id, {
       ...config.fetchContextOptions,
       url: config.api + '/order-list/',
       queryParameters: {
@@ -25,16 +24,15 @@ orderStorageContextProvider.setProvider(async (args): Promise<void> => {
     });
   }
   catch (err) {
-    logger.error('orderStorageContextProvider', 'fetch_failed', err);
-
+    logger.error('fetchOrderStorage', 'fetch_failed', err);
     await l18eReadyPromise;
     const response = await snackbarSignalTrigger.requestWithResponse({
       message: message('fetch_failed'),
       actionLabel: message('retry'),
-      duration: -1,
+      duration: orderStorageContextConsumer.getValue() == null ? -1 : 5_000,
     });
     if (response.actionButton) {
-      orderStorageContextConsumer.request(args);
+      await fetchOrderStorage();
     }
   }
-});
+};

uniquely/com-pwa/src/manager/context.ts

@@ -1,8 +1,6 @@
 import {
   contextConsumer,
   contextProvider,
-  requestableContextConsumer,
-  requestableContextProvider,
   commandTrigger,
 } from '@alwatr/signal';
 
@@ -16,10 +14,8 @@ export * from '@alwatr/pwa-helper/context.js';
 export const productStorageContextConsumer =
   contextConsumer.bind<AlwatrDocumentStorage<Product>>('product-storage-context');
 
-export const orderStorageContextProvider =
-    requestableContextProvider.bind<AlwatrDocumentStorage<Order>, null>('order-storage-context');
 export const orderStorageContextConsumer =
-  requestableContextConsumer.bind<AlwatrDocumentStorage<Order>, null>(orderStorageContextProvider.id);
+  contextConsumer.bind<AlwatrDocumentStorage<Order>>('order-storage-context');
 
 export const userContextProvider = contextProvider.bind<User>('user-context');
 export const userContextConsumer = contextConsumer.bind<User>(userContextProvider.id);

uniquely/com-pwa/src/manager/controller/order-list.ts

@@ -1,21 +1,23 @@
 import {FiniteStateMachine} from '@alwatr/fsm';
+import {eventListener} from '@alwatr/signal';
 
+import {fetchOrderStorage} from '../context-provider/order-storage.js';
 import {orderStorageContextConsumer, topAppBarContextProvider} from '../context.js';
-import {logger} from '../logger.js';
 
-import type {AlwatrDocumentStorage} from '@alwatr/type';
+import type {AlwatrDocumentStorage, ClickSignalType} from '@alwatr/type';
 import type {Order} from '@alwatr/type/src/customer-order-management.js';
 
 export const pageOrderListFsm = new FiniteStateMachine({
   id: 'page-order-list',
   initial: 'unresolved',
   context: {
-    orderStorage: <AlwatrDocumentStorage<Order> | null> null,
+    orderStorage: <AlwatrDocumentStorage<Order> | null>null,
   },
   states: {
     $all: {
       on: {
         CONNECTED: '$self',
+        CONTEXT_LOADED: 'list',
       },
     },
     unresolved: {
@@ -26,33 +28,32 @@ export const pageOrderListFsm = new FiniteStateMachine({
     resolving: {
       on: {
         CONNECTED: 'loading',
-        LOADED: 'list',
       },
     },
     loading: {
-      on: {
-        LOADED: 'list',
-      },
+      on: {},
     },
     list: {
       on: {
-        REQUEST_UPDATE: 'loading',
+        REQUEST_UPDATE: 'reloading',
       },
     },
+    reloading: {
+      on: {},
+    },
   },
 } as const);
 
 pageOrderListFsm.signal.subscribe(async (state) => {
-  logger.logMethodArgs('pageOrderListFsm.changed', state);
+  // logger.logMethodArgs('pageOrderListFsm.changed', state);
   switch (state.by) {
     case 'IMPORT':
       // just in unresolved
       topAppBarContextProvider.setValue({
         headlineKey: 'loading',
       });
       if (orderStorageContextConsumer.getValue() == null) {
-        orderStorageContextConsumer.request(null, {debounce: 'Timeout'});
-        pageOrderListFsm.transition('LOADED', {orderStorage: await orderStorageContextConsumer.untilChange()});
+        fetchOrderStorage();
       }
       break;
 
@@ -63,8 +64,20 @@ pageOrderListFsm.signal.subscribe(async (state) => {
       break;
 
     case 'REQUEST_UPDATE':
-      orderStorageContextConsumer.request(null, {debounce: 'Timeout'});
-      pageOrderListFsm.transition('LOADED', {orderStorage: await orderStorageContextConsumer.untilChange()});
+      await fetchOrderStorage();
+      pageOrderListFsm.transition('CONTEXT_LOADED');
       break;
   }
 });
+
+orderStorageContextConsumer.subscribe((orderStorage) => {
+  pageOrderListFsm.transition('CONTEXT_LOADED', {orderStorage});
+});
+
+eventListener.subscribe<ClickSignalType>('reload_order_click_event', () => {
+  pageOrderListFsm.transition('REQUEST_UPDATE');
+});
+
+eventListener.subscribe<ClickSignalType>('new_order_click_event', () => {
+  // TODO: redirect
+});

uniquely/com-pwa/src/ui/page/order-list.ts

@@ -50,10 +50,18 @@ export class AlwatrPageOrderList extends StateMachineMixin(
   }
 
   render_loading(): unknown {
+    this._logger.logMethod('render_loading');
     return message('loading');
   }
 
+  render_reloading(): unknown {
+    this._logger.logMethod('render_reloading');
+    return this.render_list();
+  }
+
   render_list(): unknown {
+    this._logger.logMethod('render_list');
+    const gotState = this.stateMachine.gotState;
     // prettier-ignore
     return [
       mapObject(this, this.stateMachine.context.orderStorage?.data, (order) => {
@@ -68,11 +76,21 @@ export class AlwatrPageOrderList extends StateMachineMixin(
         };
         return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
       }),
-      html`<alwatr-button
-        icon="add-outline"
-        signal-id="new-order-click-event"
-        elevated
-      >${message('new_order_button')}</alwatr-button>`,
+      html`
+        <div>
+          <alwatr-button
+            icon="reload-outline"
+            signal-id="reload_order_click_event"
+            elevated
+            ?disabled=${gotState === 'reloading'}
+          >${message(gotState === 'reloading' ? 'loading' : 'reload')}</alwatr-button>
+          <alwatr-button
+            icon="add-outline"
+            signal-id="new_order_click_event"
+            elevated
+          >${message('new_order_button')}</alwatr-button>
+        </div>
+      `,
     ];
   }
 }