feat(com-pwa): dynamic product storage

Alwatr · Feb 15, 2023 · b8458b8 · b8458b8
1 parent 0b8901c
commit b8458b8
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 21 deletions.
diff --git a/uniquely/com-pwa/package.json b/uniquely/com-pwa/package.json
@@ -39,6 +39,7 @@
     "@alwatr/type": "^0.29.0",
     "@alwatr/i18n": "^0.29.0",
     "@alwatr/math": "^0.29.0",
+    "@alwatr/router": "^0.29.0",
     "@alwatr/pwa-helper": "^0.29.0",
     "@alwatr/signal": "^0.29.0",
     "@alwatr/ui-kit": "^0.29.0",

diff --git a/uniquely/com-pwa/res/config.js b/uniquely/com-pwa/res/config.js
@@ -2,4 +2,5 @@ window.appConfig = {
   api: 'https://order.soffit.co/api/v0',
   cdn: 'image/',
   token: '3584fd6c82b5b76568a7f770846be94af9b7a879eb2274f2c0121ccc58d112ee',
+  productStorageList: ['tile'],
 };
diff --git a/uniquely/com-pwa/src/alwatr-pwa.ts b/uniquely/com-pwa/src/alwatr-pwa.ts
@@ -21,7 +21,7 @@ declare global {
 @customElement('alwatr-pwa')
 class AlwatrPwa extends AlwatrPwaElement {
   protected override _routesConfig: RoutesConfig = {
-    routeId: this._routesConfig.routeId,
+    routeId: (routeContext) => routeContext.sectionList[0]?.toString(),
     templates: {
       'home': () => {
         import('./page-home.js');
@@ -31,13 +31,15 @@ class AlwatrPwa extends AlwatrPwaElement {
         import('./page-404.js');
         return html`<alwatr-page-404>...</alwatr-page-404>`;
       },
-      'order-list': () => {
+      'orders': () => {
         import('./page-order-list.js');
         return html`<alwatr-page-order-list></alwatr-page-order-list>`;
       },
-      'product-list': () => {
+      'products': (routeContext) => {
         import('./page-product-list.js');
-        return html`<alwatr-page-product-list></alwatr-page-product-list>`;
+        return html`<alwatr-page-product-list
+          .storageName=${routeContext.sectionList[1]?.toString()}
+        ></alwatr-page-product-list>`;
       },
     },
   };

diff --git a/uniquely/com-pwa/src/config.ts b/uniquely/com-pwa/src/config.ts
@@ -4,4 +4,5 @@ export const config = {
   api: getConfKey<string>('api'),
   cdn: getConfKey<string>('cdn'),
   token: getConfKey<string>('token'),
+  productStorageList: getConfKey<Array<string>>('productStorageList'),
 };
diff --git a/uniquely/com-pwa/src/content/home-page-fa.ts b/uniquely/com-pwa/src/content/home-page-fa.ts
@@ -34,7 +34,7 @@ export const homePageContent: PageHomeContent = {
       icon: 'cart-outline',
       flipRtl: true,
       headline: 'سفارش جدید',
-      href: '/product-list',
+      href: '/products/tile',
       description: 'فرآیند ثبت سفارش جدید.',
     },
     {
@@ -43,7 +43,7 @@ export const homePageContent: PageHomeContent = {
       icon: 'list-outline',
       flipRtl: true,
       headline: 'سفارشات جاری',
-      href: '/order-list',
+      href: '/orders',
       description: 'مشاهده وضعیت و پیگیری سفارشات جاری.',
     },
 

diff --git a/uniquely/com-pwa/src/director/product-storage-context-provider.ts b/uniquely/com-pwa/src/director/product-storage-context-provider.ts
@@ -7,16 +7,26 @@ import {config} from '../config.js';
 
 const provideProductStorageContext = async (): Promise<void> => {
   logger.logMethod('provideProductStorageContext');
-
   try {
-    await fetchContext('product-storage-context', {
-      method: 'GET',
-      url: config.api + '/product/',
-      token: config.token,
-      removeDuplicate: 'auto',
-      retry: 10,
-      retryDelay: 3_000,
-    });
+    const fetchPromiseList = [];
+
+    for (const productStorageName of config.productStorageList) {
+      fetchPromiseList.push(
+          fetchContext(`product-storage-${productStorageName}-context`, {
+            method: 'GET',
+            url: config.api + '/product/',
+            queryParameters: {
+              storage: productStorageName,
+            },
+            token: config.token,
+            removeDuplicate: 'auto',
+            retry: 10,
+            retryDelay: 3_000,
+          }),
+      );
+    }
+
+    await Promise.all(fetchPromiseList);
   }
   catch (err) {
     logger.error('provideProductStorageContext', 'fetch_failed', err);

diff --git a/uniquely/com-pwa/src/l18r/fa.json b/uniquely/com-pwa/src/l18r/fa.json
@@ -26,6 +26,8 @@
     "order_status_delayed": "همراه با تاخیر",
     "order_status_on_hold": "متوقف شده",
     "order_status_canceled": "لغو شده",
-    "order_status_refunded": "بازپرداخت"
+    "order_status_refunded": "بازپرداخت",
+
+    "product_not_found": "هیچ محصولی یافت نشد!"
   }
 }
diff --git a/uniquely/com-pwa/src/page-product-list.ts b/uniquely/com-pwa/src/page-product-list.ts
@@ -9,11 +9,12 @@ import {
   mapObject,
 } from '@alwatr/element';
 import {message} from '@alwatr/i18n';
+import {contextConsumer, type ListenerSpec} from '@alwatr/signal';
 import '@alwatr/ui-kit/card/product-card.js';
 import '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
 
 import './app-footer';
-// import {config} from './config.js';
+import {config} from './config.js';
 import {productStorageContextConsumer} from './context.js';
 
 import type {AlwatrDocumentStorage} from '@alwatr/type';
@@ -54,38 +55,76 @@ export class AlwatrPageProductList extends LocalizeMixin(SignalMixin(AlwatrDummy
     }
   `;
 
+  private __productListener?: ListenerSpec;
+
+  private __storageName?: string;
+
+  get storageName(): string | undefined {
+    return this.__storageName;
+  }
+
+  set storageName(value: string | undefined) {
+    if (this.__storageName === value) return;
+
+    if (this.__productListener) {
+      contextConsumer.unsubscribe(this.__productListener);
+    }
+
+    if (typeof this.__storageName !== 'string' || config.productStorageList.indexOf(this.__storageName) === -1) {
+      this.__storageName = undefined;
+      this._productStorage = null;
+      return;
+    }
+    // else
+    this.__storageName = value;
+    this.__productListener = contextConsumer.subscribe<AlwatrDocumentStorage<Product>>(
+        `product-storage-${this.__storageName}-context`,
+        (productStorage) => {
+          this._productStorage = productStorage;
+        },
+    );
+  }
+
   @state()
-    productStorage?: AlwatrDocumentStorage<Product>;
+  protected _productStorage?: AlwatrDocumentStorage<Product> | null;
 
   override connectedCallback(): void {
     super.connectedCallback();
     this._signalListenerList.push(
         productStorageContextConsumer.subscribe((productStorage) => {
-          this.productStorage = productStorage;
+          this._productStorage = productStorage;
         }),
     );
   }
 
   override render(): unknown {
     this._logger.logMethod('render');
+
     const topAppBar: TopAppBarContent = {
       type: 'medium',
       headline: message('page_product_list_headline'),
       startIcon: {icon: 'arrow-back-outline', flipRtl: true, clickSignalId: 'back-click-event'},
       tinted: 2,
     };
 
+    const mainContent = mapObject(
+        this,
+        this._productStorage?.data,
+        this._productItemTemplate,
+        message(this._productStorage === null ? 'product_not_found' : 'loading'),
+    );
+
     return html`
       <alwatr-top-app-bar .content=${topAppBar}></alwatr-top-app-bar>
-      <main>${mapObject(this, this.productStorage?.data, this._productItemTemplate, message('loading'))}</main>
+      <main>${mainContent}</main>
       <alwatr-app-footer></alwatr-app-footer>
     `;
   }
 
   protected _productItemTemplate(product: Product): unknown {
     const content: ProductCartContent = {
       title: product.title.fa,
-      imagePath: /* config.cdn + */ product.image.id,
+      imagePath: config.cdn + product.image.id,
       price: 147000,
       finalPrice: 125000,
     };