From d07327b25ecbb15ec8cd3ba110df8b075ba00f9f Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Sun, 19 Mar 2023 13:42:11 +0330 Subject: [PATCH] refactor(com/order-list): with new api --- .../src/manager/context-provider/user.ts | 7 +- .../src/manager/controller/order-list.ts | 178 +++++++++--------- .../manager/submit-order-command-handler.ts | 7 +- uniquely/com-pwa/src/ui/page/home.ts | 2 +- uniquely/com-pwa/src/ui/page/order-list.ts | 96 +++------- 5 files changed, 124 insertions(+), 166 deletions(-) diff --git a/uniquely/com-pwa/src/manager/context-provider/user.ts b/uniquely/com-pwa/src/manager/context-provider/user.ts index c929157d3..083ddaf23 100644 --- a/uniquely/com-pwa/src/manager/context-provider/user.ts +++ b/uniquely/com-pwa/src/manager/context-provider/user.ts @@ -1,11 +1,8 @@ -import {contextProvider} from '@alwatr/signal'; +import {contextProvider} from '@alwatr/context'; import {User} from '@alwatr/type'; import {getLocalStorageItem} from '@alwatr/util'; -const userContextProvider = contextProvider.bind('user-context'); - -// demo -userContextProvider.setValue(getLocalStorageItem(userContextProvider.id, { +contextProvider.setValue('user_context', getLocalStorageItem('user_context', { id: 'demo-123', fullName: 'Demo User', })); diff --git a/uniquely/com-pwa/src/manager/controller/order-list.ts b/uniquely/com-pwa/src/manager/controller/order-list.ts index b09efbd66..2dc986fd9 100644 --- a/uniquely/com-pwa/src/manager/controller/order-list.ts +++ b/uniquely/com-pwa/src/manager/controller/order-list.ts @@ -1,96 +1,96 @@ -import {finiteStateMachineProvider, type FsmTypeHelper} from '@alwatr/fsm'; -import {requestableContextConsumer} from '@alwatr/signal'; -import {snackbarSignalTrigger} from '@alwatr/ui-kit/src/snackbar/show-snackbar.js'; +// import {finiteStateMachineProvider, type FsmTypeHelper} from '@alwatr/fsm'; +// import {requestableContextConsumer} from '@alwatr/signal'; +// import {snackbarSignalTrigger} from '@alwatr/ui-kit/src/snackbar/show-snackbar.js'; -import type {RequestableContext} from '@alwatr/signal/type.js'; -import type {AlwatrDocumentObject, AlwatrDocumentStorage} from '@alwatr/type'; -import type {Order} from '@alwatr/type/src/customer-order-management.js'; +// import type {RequestableContext} from '@alwatr/signal/type.js'; +// import type {AlwatrDocumentObject, AlwatrDocumentStorage} from '@alwatr/type'; +// import type {Order} from '@alwatr/type/src/customer-order-management.js'; -const orderStorageContextConsumer = - requestableContextConsumer.bind>('order-storage-context'); +// const orderStorageContextConsumer = +// requestableContextConsumer.bind>('order-storage-context'); -export type OrderStorageContext = { - orderStorage?: AlwatrDocumentStorage; -}; +// export type OrderStorageContext = { +// orderStorage?: AlwatrDocumentStorage; +// }; -export const orderListFsmConstructor = finiteStateMachineProvider.defineConstructor('order_list_fsm', { - context: {}, - initial: 'pending', - stateRecord: { - $all: { - on: {}, - }, - pending: { - entry: 'initial_request_order_storage', - on: { - context_request_initial: {}, - context_request_pending: {}, - context_request_error: { - target: 'contextError', - }, - context_request_complete: { - target: 'list', - }, - context_request_reloading: { - target: 'reloading', - }, - }, - }, - contextError: { - on: { - request_context: { - target: 'pending', - actions: 'request_order_storage', - }, - }, - }, - list: { - on: { - request_context: { - target: 'reloading', - actions: 'request_order_storage', - }, - }, - }, - reloading: { - on: { - context_request_error: { - target: 'list', - actions: 'notify_error', - }, - context_request_complete: { - target: 'list', - }, - }, - }, - }, -}); +// export const orderListFsmConstructor = finiteStateMachineProvider.defineConstructor('order_list_fsm', { +// context: {}, +// initial: 'pending', +// stateRecord: { +// $all: { +// on: {}, +// }, +// pending: { +// entry: 'initial_request_order_storage', +// on: { +// context_request_initial: {}, +// context_request_pending: {}, +// context_request_error: { +// target: 'contextError', +// }, +// context_request_complete: { +// target: 'list', +// }, +// context_request_reloading: { +// target: 'reloading', +// }, +// }, +// }, +// contextError: { +// on: { +// request_context: { +// target: 'pending', +// actions: 'request_order_storage', +// }, +// }, +// }, +// list: { +// on: { +// request_context: { +// target: 'reloading', +// actions: 'request_order_storage', +// }, +// }, +// }, +// reloading: { +// on: { +// context_request_error: { +// target: 'list', +// actions: 'notify_error', +// }, +// context_request_complete: { +// target: 'list', +// }, +// }, +// }, +// }, +// }); -export type OrderListFsm = FsmTypeHelper; +// export type OrderListFsm = FsmTypeHelper; -// entries actions -finiteStateMachineProvider.defineActions('order_list_fsm', { - initial_request_order_storage: (): void => { - const orderContext = orderStorageContextConsumer.getValue(); - if (orderContext.state === 'initial') { - orderStorageContextConsumer.request(null); - } - }, - request_order_storage: (): void => { - orderStorageContextConsumer.request(null); - }, - notify_error: (): void => - snackbarSignalTrigger.request({ - messageKey: 'fetch_failed_description', - }), -}); +// // entries actions +// finiteStateMachineProvider.defineActions('order_list_fsm', { +// initial_request_order_storage: (): void => { +// const orderContext = orderStorageContextConsumer.getValue(); +// if (orderContext.state === 'initial') { +// orderStorageContextConsumer.request(null); +// } +// }, +// request_order_storage: (): void => { +// orderStorageContextConsumer.request(null); +// }, +// notify_error: (): void => +// snackbarSignalTrigger.request({ +// messageKey: 'fetch_failed_description', +// }), +// }); -finiteStateMachineProvider.defineSignals('order_list_fsm', [ - { - signalId: orderStorageContextConsumer.id, - callback: (context: RequestableContext>, fsmInstance): void => { - fsmInstance.transition(`context_request_${context.state}`, {orderStorage: context.content}); - }, - receivePrevious: 'NextCycle', - }, -]); +// finiteStateMachineProvider.defineSignals('order_list_fsm', [ +// { +// signalId: orderStorageContextConsumer.id, +// callback: (context: RequestableContext>, fsmInstance): void => { +// fsmInstance.transition(`context_request_${context.state}`, {orderStorage: context.content}); +// }, +// receivePrevious: 'NextCycle', +// }, +// ]); diff --git a/uniquely/com-pwa/src/manager/submit-order-command-handler.ts b/uniquely/com-pwa/src/manager/submit-order-command-handler.ts index de0cb8351..f598fc50f 100644 --- a/uniquely/com-pwa/src/manager/submit-order-command-handler.ts +++ b/uniquely/com-pwa/src/manager/submit-order-command-handler.ts @@ -6,20 +6,19 @@ import {submitOrderCommandTrigger} from './context.js'; import {logger} from './logger.js'; import {config} from '../config.js'; -import type {AlwatrDocumentStorage, User} from '@alwatr/type'; +import type {AlwatrDocumentStorage, AlwatrServiceResponseSuccessWithMeta, User} from '@alwatr/type'; import type {Order} from '@alwatr/type/customer-order-management.js'; - const orderStorageContextConsumer = requestableContextConsumer.bind>('order-storage-context'); -const userContextConsumer = contextConsumer.bind('user-context'); +const userContextConsumer = contextConsumer.bind('user_context'); commandHandler.define(submitOrderCommandTrigger.id, async (order) => { const userContext = userContextConsumer.getValue() ?? await userContextConsumer.untilChange(); try { - const response = await serviceRequest({ + const response = await serviceRequest>({ ...config.fetchContextOptions, method: 'PUT', url: config.api + '/order/', diff --git a/uniquely/com-pwa/src/ui/page/home.ts b/uniquely/com-pwa/src/ui/page/home.ts index b3e9fd4cd..8367a6210 100644 --- a/uniquely/com-pwa/src/ui/page/home.ts +++ b/uniquely/com-pwa/src/ui/page/home.ts @@ -55,7 +55,7 @@ export class AlwatrPageHome extends UnresolvedMixin(SignalMixin(AlwatrBaseElemen override connectedCallback(): void { super.connectedCallback(); - this._addSignalListener( + this._addSignalListeners( homePageContentContextConsumer.subscribe((content) => { this.content = content; topAppBarContextProvider.setValue(content.topAppBar); diff --git a/uniquely/com-pwa/src/ui/page/order-list.ts b/uniquely/com-pwa/src/ui/page/order-list.ts index 5b60ef9a3..1275b382f 100644 --- a/uniquely/com-pwa/src/ui/page/order-list.ts +++ b/uniquely/com-pwa/src/ui/page/order-list.ts @@ -12,45 +12,21 @@ import { guard, type PropertyValues, } from '@alwatr/element'; -import {finiteStateMachineConsumer} from '@alwatr/fsm'; import {message} from '@alwatr/i18n'; -import {redirect} from '@alwatr/router'; -import {Order} from '@alwatr/type/customer-order-management.js'; import '@alwatr/ui-kit/button/button.js'; import {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js'; +import {buttons} from '../../manager/buttons.js'; +import {orderStorageContextConsumer} from '../../manager/context-provider/order-storage.js'; import {topAppBarContextProvider} from '../../manager/context.js'; -import {OrderListFsm} from '../../manager/controller/order-list.js'; import '../stuff/order-status-box.js'; -import type {ClickSignalType} from '@alwatr/type'; - declare global { interface HTMLElementTagNameMap { 'alwatr-page-order-list': AlwatrPageOrderList; } } -const buttons = { - backToHome: { - icon: 'arrow-back-outline', - flipRtl: true, - clickSignalId: 'back_to_home_click_event', - }, - reload: { - icon: 'reload-outline', - // flipRtl: true, - clickSignalId: 'order_list_reload_click_event', - }, - newOrder: { - icon: 'add-outline', - clickSignalId: 'order_list_new_order_click_event', - }, - orderDetail: { - clickSignalId: 'order_list_order_detail_click_event', - }, -} as const; - /** * List of all orders. */ @@ -74,42 +50,22 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin( alwatr-order-status-box { margin-bottom: var(--sys-spacing-track); } - `; - protected fsm = finiteStateMachineConsumer('order_list_fsm_' + this.ali, 'order_list_fsm'); + :host(:not([state='reloadingFailed'])) .reloadingFailed { + display: none; + } + `; @state() - gotState = this.fsm.getState().target; + gotState = orderStorageContextConsumer.getState().target; override connectedCallback(): void { super.connectedCallback(); - this._addSignalListener(this.fsm.defineSignals([ - { - callback: (): void => { - this.gotState = this.fsm.getState().target; - }, - receivePrevious: 'NextCycle', - }, - { - signalId: buttons.reload.clickSignalId, - transition: 'request_context', - }, - { - signalId: buttons.newOrder.clickSignalId, - callback: (): void => { - redirect({ - sectionList: ['new-order'], - }); - }, - }, - { - signalId: buttons.orderDetail.clickSignalId, - callback: (event: ClickSignalType): void => { - redirect({sectionList: ['order-detail', event.detail.id]}); - }, - }, - ])); + // prettier-ignore + this._addSignalListeners(orderStorageContextConsumer.subscribe(() => { + this.gotState = orderStorageContextConsumer.getState().target; + }, {receivePrevious: 'NextCycle'})); } protected override update(changedProperties: PropertyValues): void { @@ -121,8 +77,10 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin( override render(): unknown { this._logger.logMethod('render'); - return this.fsm.render({ - pending: () => { + return orderStorageContextConsumer.fsm.render({ + initial: 'onlineLoading', + offlineLoading: 'onlineLoading', + onlineLoading: () => { topAppBarContextProvider.setValue({ headlineKey: 'loading', startIcon: buttons.backToHome, @@ -135,11 +93,11 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin( return html``; }, - contextError: () => { + loadingFailed: () => { topAppBarContextProvider.setValue({ headlineKey: 'page_order_list_headline', startIcon: buttons.backToHome, - endIconList: [buttons.reload], + endIconList: [buttons.reloadOrderStorage], }); const content: IconBoxContent = { icon: 'cloud-offline-outline', @@ -149,30 +107,34 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin( }; return html` - + ${message('retry')} `; }, - reloading: 'list', - - list: () => { + reloading: 'complete', + reloadingFailed: 'complete', + complete: () => { topAppBarContextProvider.setValue({ headlineKey: 'page_order_list_headline', startIcon: buttons.backToHome, - endIconList: [buttons.newOrder, {...buttons.reload, disabled: this.gotState === 'reloading'}], + endIconList: [buttons.newOrder, {...buttons.reloadOrderStorage, disabled: this.gotState === 'reloading'}], }); - const orderStorage = this.fsm.getContext().orderStorage; + const orderStorage = orderStorageContextConsumer.getResponse(); if (orderStorage == null) return; - return guard(orderStorage.meta.lastUpdated, () => + const orderListTemplate = guard(orderStorage.meta.lastUpdated, () => mapObject(this, orderStorage.data, (order) => { return html``; }), ); + return [html`
reloading failed
`, orderListTemplate]; }, }); }