Skip to content

Commit

Permalink
feat(com-pwa): upgrade to new fsm api
Browse files Browse the repository at this point in the history
  • Loading branch information
@njfamirm @AliMD
njfamirm authored and AliMD committed Mar 17, 2023
1 parent d84f2ad commit cc6cb4c
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 78 deletions.
5 changes: 1 addition & 4 deletions uniquely/com-pwa/src/manager/context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@ import {
import {PageHomeContent} from '../type.js';

import type {AlwatrDocumentStorage} from '@alwatr/type';
import type {Product, Order, ProductPrice} from '@alwatr/type/customer-order-management.js';
import type {Order, ProductPrice} from '@alwatr/type/customer-order-management.js';

export * from '@alwatr/pwa-helper/context.js';

export const productStorageContextConsumer =
contextConsumer.bind<AlwatrDocumentStorage<Product>>('product-storage-tile-context');

export const priceStorageContextConsumer =
contextConsumer.bind<AlwatrDocumentStorage<ProductPrice>>('price-storage-tile-context');

Expand Down
188 changes: 117 additions & 71 deletions uniquely/com-pwa/src/ui/page/order-detail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ import {
import {message} from '@alwatr/i18n';
import {topAppBarContextProvider} from '@alwatr/pwa-helper/context.js';
import {redirect} from '@alwatr/router';
import {eventListener} from '@alwatr/signal';
import {requestableContextConsumer} from '@alwatr/signal';
import {snackbarSignalTrigger} from '@alwatr/ui-kit/src/snackbar/show-snackbar.js';

import {fetchOrderStorage} from '../../manager/context-provider/order-storage.js';
import {fetchProductStorage} from '../../manager/context-provider/product-storage.js';
import {orderStorageContextConsumer, productStorageContextConsumer} from '../../manager/context.js';
import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';

import type {AlwatrDocumentStorage, ClickSignalType} from '@alwatr/type';
import type {AlwatrDocumentStorage} from '@alwatr/type';
import type {Order, Product} from '@alwatr/type/customer-order-management.js';
import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';

Expand All @@ -26,6 +24,12 @@ declare global {
}
}

const orderStorageContextConsumer =
requestableContextConsumer.bind<AlwatrDocumentStorage<Order>>('order-storage-context');

const productStorageContextConsumer =
requestableContextConsumer.bind<AlwatrDocumentStorage<Product>>('product-storage-tile-context');

const buttons = {
backToOrderList: {
icon: 'arrow-back-outline',
Expand All @@ -45,7 +49,7 @@ const buttons = {
@customElement('alwatr-page-order-detail')
export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase) {
private _stateMachine = new FiniteStateMachineController(this, {
id: 'fsm-order-detail-' + this.ali,
id: 'order_detail_' + this.ali,
initial: 'pending',
context: {
orderId: <number | null> null,
Expand All @@ -54,58 +58,104 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
},
stateRecord: {
'$all': {
entry: () => {
entry: (): void => {
this.gotState = this._stateMachine.state.target;
},
on: {},
},
'pending': {
entry: () => {
if (productStorageContextConsumer.getValue() == null) fetchProductStorage();
if (orderStorageContextConsumer.getValue() == null) fetchOrderStorage();
entry: (): void => {
const orderContext = orderStorageContextConsumer.getValue();
const productContext = productStorageContextConsumer.getValue();
if (orderContext.state === 'initial') {
orderStorageContextConsumer.request(null);
}
if (productContext.state === 'initial') {
productStorageContextConsumer.request(null);
}
},
on: {
LOADED_SUCCESS: {
context_request_initial: {},
context_request_pending: {},
context_request_error: {
target: 'contextError',
},
context_request_complete: {
target: 'detail',
condition: () => {
if (this._stateMachine.context.orderStorage == null ||
this._stateMachine.context.productStorage == null
) return false;
return true;
condition: (): boolean => {
if (this.orderId == null) {
this._stateMachine.transition('not_found');
return false;
}
if (orderStorageContextConsumer.getValue().state === 'complete' &&
productStorageContextConsumer.getValue().state === 'complete'
) return true;
return false;
},
actions: () => {
if (this._stateMachine.context.orderId == null ||
this._stateMachine.context.orderStorage?.data[this._stateMachine.context.orderId] == null
) this._stateMachine.transition('NOT_FOUND');
},
context_request_reloading: {
target: 'reloading',
},
},
},
'contextError': {
on: {
request_context: {
target: 'pending',
actions: (): void => {
orderStorageContextConsumer.request(null);
productStorageContextConsumer.request(null);
},
},
},
},
'detail': {
on: {
REQUEST_UPDATE: {
request_context: {
target: 'reloading',
actions: this._requestUpdateAction,
actions: (): void => {
orderStorageContextConsumer.request(null);
productStorageContextConsumer.request(null);
},
},
NOT_FOUND: {
not_found: {
target: 'notFound',
},
},
},
'notFound': {
on: {},
},
'reloading': {
on: {
LOADED_SUCCESS: {
context_request_error: {
target: 'detail',
actions: (): void =>
snackbarSignalTrigger.request({messageKey: 'fetch_failed_description'}),
},
context_request_complete: {
target: 'detail',
condition: (): boolean => {
if (orderStorageContextConsumer.getValue().state === 'complete' &&
productStorageContextConsumer.getValue().state === 'complete'
) return true;
return false;
},
},
// LOAD_FAILED: {
// target: 'detail',
// },
},
},
'notFound': {
on: {},
},
signalList: [
{
signalId: buttons.backToOrderList.clickSignalId,
actions: (): void => {redirect({sectionList: ['order-list']});},
},
}} as const);
{
signalId: buttons.reload.clickSignalId,
transition:
'request_context',
},
]});

@state()
gotState = this._stateMachine.state.target;
Expand All @@ -115,40 +165,22 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
return this.orderId;
}
set orderId(orderId: number) {
this._stateMachine.transition('LOADED_SUCCESS', {orderId});
this._stateMachine.transition('context_request_complete', {orderId});
}

override connectedCallback(): void {
super.connectedCallback();

topAppBarContextProvider.setValue({
headlineKey: 'page_order_list_headline',
startIcon: buttons.backToOrderList,
endIconList: [buttons.reload],
});

this._signalListenerList.push(
productStorageContextConsumer.subscribe((productStorage) => {
this._stateMachine.transition('LOADED_SUCCESS', {productStorage});
}),
);

this._signalListenerList.push(
orderStorageContextConsumer.subscribe((orderStorage) => {
this._stateMachine.transition('LOADED_SUCCESS', {orderStorage});
}),
);

this._signalListenerList.push(
eventListener.subscribe<ClickSignalType>(buttons.backToOrderList.clickSignalId, () => {
redirect({sectionList: ['order-list']});
}),
orderStorageContextConsumer.subscribe((context) => {
this._stateMachine.transition(`context_request_${context.state}`, {orderStorage: context.content});
}, {receivePrevious: 'NextCycle'}),
);

this._signalListenerList.push(
eventListener.subscribe<ClickSignalType>(buttons.reload.clickSignalId, () => {
this._stateMachine.transition('REQUEST_UPDATE');
}),
productStorageContextConsumer.subscribe((context) => {
this._stateMachine.transition(`context_request_${context.state}`, {productStorage: context.content});
}, {receivePrevious: 'NextCycle'}),
);
}

Expand All @@ -157,6 +189,11 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase

return this._stateMachine.render({
'pending': () => {
topAppBarContextProvider.setValue({
headlineKey: 'page_order_detail_headline',
startIcon: buttons.backToOrderList,
endIconList: [buttons.reload],
});
const content: IconBoxContent = {
headline: message('loading'),
icon: 'cloud-download-outline',
Expand All @@ -165,9 +202,34 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
},

'contextError': () => {
topAppBarContextProvider.setValue({
headlineKey: 'page_order_detail_headline',
startIcon: buttons.backToOrderList,
endIconList: [buttons.reload],
});
const content: IconBoxContent = {
icon: 'cloud-offline-outline',
tinted: 1,
headline: message('fetch_failed_headline'),
description: message('fetch_failed_description'),
};
return html`
<alwatr-icon-box .content=${content}></alwatr-icon-box>
<alwatr-button .icon=${buttons.reload.icon} .clickSignalId=${buttons.reload.clickSignalId}>
${message('retry')}
</alwatr-button>
`;
},

'reloading': 'detail',

'detail': () => {
topAppBarContextProvider.setValue({
headlineKey: 'page_order_detail_headline',
startIcon: buttons.backToOrderList,
endIconList: [{...buttons.reload, disabled: this.gotState === 'reloading'}],
});
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const order = this._stateMachine.context.orderStorage!.data[this._stateMachine.context.orderId!];
return [
Expand All @@ -188,20 +250,4 @@ export class AlwatrPageOrderDetail extends UnresolvedMixin(AlwatrOrderDetailBase
},
});
}

private async _requestUpdateAction(): Promise<void> {
topAppBarContextProvider.setValue({
headlineKey: 'loading',
startIcon: buttons.backToOrderList,
endIconList: [buttons.reload],
});
await fetchOrderStorage();
await fetchProductStorage();
topAppBarContextProvider.setValue({
headlineKey: 'page_order_list_headline',
startIcon: buttons.backToOrderList,
endIconList: [buttons.reload],
});
this._stateMachine.transition('LOADED_SUCCESS');
}
}
4 changes: 1 addition & 3 deletions uniquely/com-pwa/src/ui/page/order-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,7 @@ export class AlwatrPageOrderList extends ScheduleUpdateToFrameMixin(
{
signalId: buttons.orderDetail.clickSignalId,
actions: (event: ClickSignalType<Order>): void => {
redirect({
sectionList: ['order-detail', event.detail.id],
});
redirect({sectionList: ['order-detail', event.detail.id]});
},
},
],
Expand Down

0 comments on commit cc6cb4c

Please sign in to comment.