From d1565d25092ea80460a6fa3e5f622f6200c0a315 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Sun, 29 Jan 2023 22:55:39 +0330 Subject: [PATCH] refactor: work with new signal API --- demo/signal/index.ts | 19 ++++++------ .../src/component/job-add-form.ts | 6 ++-- .../src/component/job-item.ts | 24 +++++---------- .../src/component/page-flight-finder.ts | 17 +++++------ .../flight-finder-pwa/src/director/job-add.ts | 13 +++----- .../src/director/job-delete.ts | 15 ++++------ .../src/director/job-document-storage.ts | 30 +++++++++---------- .../flight-finder-pwa/src/director/toast.ts | 8 ++--- uniquely/flight-finder-pwa/src/type.ts | 14 +-------- 9 files changed, 55 insertions(+), 91 deletions(-) diff --git a/demo/signal/index.ts b/demo/signal/index.ts index 3e6c9c7b8..f9f3dc42a 100644 --- a/demo/signal/index.ts +++ b/demo/signal/index.ts @@ -1,24 +1,23 @@ -import {SignalInterface} from '@alwatr/signal'; +import {eventListener, eventTrigger} from '@alwatr/signal'; -const signal = new SignalInterface('easter-egg'); +const buttonEventTrigger = eventTrigger.bind<{id: number}>('easter-egg'); -signal.setProvider((param) => { - const newValue = param * 10; - console.info('2. signal provider called', {param, newValue}); - return `You have ${newValue} egg`; +eventListener.subscribe<{id: number}>('easter-egg', (detail) => { + const newValue = detail.id * 10; + console.info('2. signal provider called', {detail, newValue}); }); document.getElementById('requestButton')?.addEventListener('click', async () => { console.info('1. request with 1'); - const value = await signal.request(1); + const value = await buttonEventTrigger.dispatch({id: 1}); console.info('3. new signal value', {value}); }); document.getElementById('requestButton2')?.addEventListener('click', async () => { console.info('1. request with 1'); - const value1 = await signal.request(1); + const value1 = buttonEventTrigger.dispatch({id: 2}); console.info('3. 2x request with 2,3'); - const value2p = signal.request(2); - const value3p = signal.request(3); + const value2p = buttonEventTrigger.dispatch({id: 2}); + const value3p = buttonEventTrigger.dispatch({id: 3}); console.info('4. new signal value', {value1, value2: await value2p, value3: await value3p}); }); diff --git a/uniquely/flight-finder-pwa/src/component/job-add-form.ts b/uniquely/flight-finder-pwa/src/component/job-add-form.ts index 1f38376f2..cd95bd70c 100644 --- a/uniquely/flight-finder-pwa/src/component/job-add-form.ts +++ b/uniquely/flight-finder-pwa/src/component/job-add-form.ts @@ -1,6 +1,6 @@ import {AlwatrSmartElement, customElement, css, html} from '@alwatr/element'; -import {l10n} from '@alwatr/i18n'; -import {SignalInterface} from '@alwatr/signal'; +import {message, localeConsumer, number} from '@alwatr/i18n'; +import {eventTrigger} from '@alwatr/signal'; import {cityList} from '../city-list.js'; import ionNormalize from '../style/ionic.normalize.js'; @@ -48,7 +48,7 @@ export class JobAddForm extends AlwatrSmartElement { `, ]; - static jobAddSignal = new SignalInterface('job-add'); + static jobAddSignal = eventTrigger.bind('job-add'); static cityListTemplate = Object.keys(cityList).map( (city) => html`${city} - ${cityList[city]}`, ); diff --git a/uniquely/flight-finder-pwa/src/component/job-item.ts b/uniquely/flight-finder-pwa/src/component/job-item.ts index 6a457ec08..fb7426e36 100644 --- a/uniquely/flight-finder-pwa/src/component/job-item.ts +++ b/uniquely/flight-finder-pwa/src/component/job-item.ts @@ -9,8 +9,8 @@ import { html, nothing, } from '@alwatr/element'; -import {l10n} from '@alwatr/i18n'; -import {SignalInterface} from '@alwatr/signal'; +import {message, number} from '@alwatr/i18n'; +import {eventTrigger} from '@alwatr/signal'; import {cityList} from '../city-list.js'; import ionNormalize from '../style/ionic.normalize.js'; @@ -96,15 +96,7 @@ export class JobItem extends AlwatrSmartElement { @property({attribute: false, type: Object}) job?: Job; @query('ion-item-sliding') private __ionItemSliding?: HTMLElement; - static jobDeleteSignal = new SignalInterface('job-delete'); - - override connectedCallback(): void { - super.connectedCallback(); - - l10n.resourceChangeSignal.addListener(() => { - this.requestUpdate(); - }); - } + static jobDeleteSignal = eventTrigger.bind('job-delete'); override render(): unknown { if (this.job == null || this.job.detail == null) return nothing; @@ -164,16 +156,16 @@ export class JobItem extends AlwatrSmartElement { const lowestPrice = Math.min(...resultList.map((result) => result.price)); return html`
- ${l10n.formatNumber(resultList.length)} - ${l10n.localize('flight')} + ${number(resultList.length)} + ${message('flight')}
- ${l10n.formatNumber(lowestPrice)} - ${l10n.localize('config_currency')} + ${number(lowestPrice)} + ${message('config_currency')}
`; } - return html` ${l10n.localize('not_found')} `; + return html` ${message('not_found')} `; } private __renderDescription(description: string): TemplateResult | typeof nothing { if (description.trim() == '') return nothing; diff --git a/uniquely/flight-finder-pwa/src/component/page-flight-finder.ts b/uniquely/flight-finder-pwa/src/component/page-flight-finder.ts index 1cdfcc9f7..38ce7db26 100644 --- a/uniquely/flight-finder-pwa/src/component/page-flight-finder.ts +++ b/uniquely/flight-finder-pwa/src/component/page-flight-finder.ts @@ -1,11 +1,12 @@ import {type TemplateResult, AlwatrSmartElement, map, customElement, query, css, html} from '@alwatr/element'; import {message, number} from '@alwatr/i18n'; -import {SignalInterface} from '@alwatr/signal'; +import {requestableContextConsumer} from '@alwatr/signal'; import {modalController} from '@ionic/core'; import ionNormalize from '../style/ionic.normalize.js'; import ionTheming from '../style/ionic.theming.js'; +import type {AlwatrDocumentStorage} from '@alwatr/type'; import type {Job} from '@alwatr/type/flight-finder.js'; import './job-item.js'; @@ -51,8 +52,9 @@ export class PageFlightFinder extends AlwatrSmartElement { `, ]; - static jobDocumentStorageSignal = new SignalInterface('job-document-storage'); - static jobAddSignal = new SignalInterface('job-add'); + static jobDocumentStorageContextConsumer = + requestableContextConsumer.bind, null>('job-document-storage'); + // static jobAddEventTrigger = eventTrigger.bind('job-add'); private __jobList?: Array; private __lastUpdate = 0; @@ -74,12 +76,7 @@ export class PageFlightFinder extends AlwatrSmartElement { override connectedCallback(): void { super.connectedCallback(); - - l10n.resourceChangeSignal.addListener(() => { - this.requestUpdate(); - }); - - PageFlightFinder.jobDocumentStorageSignal.addListener((jobList) => { + PageFlightFinder.jobDocumentStorageContextConsumer.subscribe((jobList) => { this.__jobList = Object.values(jobList.data); this.__lastUpdate = jobList.meta.lastUpdated; this.requestUpdate(); @@ -91,7 +88,7 @@ export class PageFlightFinder extends AlwatrSmartElement { return html` - ${l10n.localize('flight_finder')} + ${message('flight_finder')} diff --git a/uniquely/flight-finder-pwa/src/director/job-add.ts b/uniquely/flight-finder-pwa/src/director/job-add.ts index dfc4913ce..90dfbf079 100644 --- a/uniquely/flight-finder-pwa/src/director/job-add.ts +++ b/uniquely/flight-finder-pwa/src/director/job-add.ts @@ -1,14 +1,9 @@ import {type AlwatrServiceResponse, fetch} from '@alwatr/fetch'; -import {SignalInterface} from '@alwatr/signal'; - -import {jobDocumentStorageSignal} from './job-document-storage.js'; -import {showToastSignal} from './toast.js'; +import {commandTrigger, eventListener, requestableContextConsumer} from '@alwatr/signal'; import type {Job} from '@alwatr/type/flight-finder.js'; -export const jobAddSignal = new SignalInterface('job-add'); - -jobAddSignal.addListener(async (job) => { +eventListener.subscribe('job-add', async (job) => { try { const response = await fetch({ url: window.appConfig?.api ? window.appConfig.api + '/job' : '/job', @@ -28,10 +23,10 @@ jobAddSignal.addListener(async (job) => { } } catch (error) { - showToastSignal.dispatch({ + commandTrigger.request('toast', { message: 'عملیات با خطا رو به رو شد', }); } - jobDocumentStorageSignal.request(null); + requestableContextConsumer.request('job-document-storage', null); }); diff --git a/uniquely/flight-finder-pwa/src/director/job-delete.ts b/uniquely/flight-finder-pwa/src/director/job-delete.ts index e05982e4c..4c67e918d 100644 --- a/uniquely/flight-finder-pwa/src/director/job-delete.ts +++ b/uniquely/flight-finder-pwa/src/director/job-delete.ts @@ -1,18 +1,13 @@ import {type AlwatrServiceResponse, fetch} from '@alwatr/fetch'; -import {SignalInterface} from '@alwatr/signal'; +import {commandTrigger, eventListener, requestableContextConsumer} from '@alwatr/signal'; -import {jobDocumentStorageSignal} from './job-document-storage.js'; -import {showToastSignal} from './toast.js'; - -export const jobDeleteSignal = new SignalInterface('job-delete'); - -jobDeleteSignal.addListener(async (id) => { +eventListener.subscribe<{id: string}>('job-delete', async (detail) => { try { const response = await fetch({ url: window.appConfig?.api ? window.appConfig.api + '/job' : '/job', token: window.appConfig?.token, method: 'DELETE', - queryParameters: {id}, + queryParameters: {id: detail.id}, }); if (response.ok !== true) { @@ -26,10 +21,10 @@ jobDeleteSignal.addListener(async (id) => { } } catch (error) { - showToastSignal.dispatch({ + commandTrigger.request('toast', { message: 'عملیات با خطا رو به رو شد', }); } - jobDocumentStorageSignal.request(null); + requestableContextConsumer.request('job-delete', null); }); diff --git a/uniquely/flight-finder-pwa/src/director/job-document-storage.ts b/uniquely/flight-finder-pwa/src/director/job-document-storage.ts index 44a2569a9..98827b043 100644 --- a/uniquely/flight-finder-pwa/src/director/job-document-storage.ts +++ b/uniquely/flight-finder-pwa/src/director/job-document-storage.ts @@ -1,40 +1,38 @@ import {type CacheStrategy, serviceRequest} from '@alwatr/fetch'; import {createLogger} from '@alwatr/logger'; -import {SignalInterface} from '@alwatr/signal'; - -import {showToastSignal} from './toast.js'; +import {commandTrigger, requestableContextConsumer, requestableContextProvider} from '@alwatr/signal'; import type {AlwatrDocumentStorage} from '@alwatr/type'; import type {Job} from '@alwatr/type/flight-finder.js'; export const logger = createLogger('[director/job-document-storage]'); -export const jobDocumentStorageSignal = new SignalInterface('job-document-storage'); -async function requestJobStorage(cacheStrategy: CacheStrategy): Promise { +async function requestJobStorage(cacheStrategy: CacheStrategy): Promise | void> { logger.logMethod('jobListProvider'); try { - jobDocumentStorageSignal.dispatch( - > await serviceRequest({ - url: window.appConfig?.api ? window.appConfig.api + '/job' : '/job', - token: window.appConfig?.token, - cache: 'no-cache', - cacheStrategy, - }), - ); + return (> await serviceRequest({ + url: window.appConfig?.api ? window.appConfig.api + '/job' : '/job', + token: window.appConfig?.token, + cache: 'no-cache', + cacheStrategy, + })); } catch (error) { if ((error as Error).message !== 'fetch_cache_not_found') { logger.error('jobListProvider', 'fetch_failed', error); - showToastSignal.dispatch({ + commandTrigger.request('toast', { message: 'عملیات با خطا رو به رو شد', }); + return; } } } -jobDocumentStorageSignal.setProvider(() => requestJobStorage('network_first')); +requestableContextProvider.setProvider, null>('job-document-storage', () => { + return requestJobStorage('network_first'); +}); requestJobStorage('cache_only').then(() => requestJobStorage('network_first')); -setInterval(() => jobDocumentStorageSignal.request(null), 60_000); +setInterval(() => requestableContextConsumer.request('job-document-storage', null), 60_000); diff --git a/uniquely/flight-finder-pwa/src/director/toast.ts b/uniquely/flight-finder-pwa/src/director/toast.ts index 5724f953b..1edc6be50 100644 --- a/uniquely/flight-finder-pwa/src/director/toast.ts +++ b/uniquely/flight-finder-pwa/src/director/toast.ts @@ -1,9 +1,7 @@ -import {SignalInterface} from '@alwatr/signal'; +import {commandHandler} from '@alwatr/signal'; import {toastController} from '@ionic/core'; -export const showToastSignal = new SignalInterface('toast'); - -showToastSignal.addListener(async (ToastOptions) => { +commandHandler.define<{message: string}, Record>('toast', async (ToastOptions) => { const toast = await toastController.create({ animated: true, position: 'bottom', @@ -12,4 +10,6 @@ showToastSignal.addListener(async (ToastOptions) => { }); await toast.present(); + + return {}; }); diff --git a/uniquely/flight-finder-pwa/src/type.ts b/uniquely/flight-finder-pwa/src/type.ts index c0bb5660c..2e9cd6358 100644 --- a/uniquely/flight-finder-pwa/src/type.ts +++ b/uniquely/flight-finder-pwa/src/type.ts @@ -1,20 +1,8 @@ -import type {AlwatrDocumentStorage} from '@alwatr/type'; -import type {Job, JobDetail} from '@alwatr/type/flight-finder.js'; -import type {ToastOptions} from '@ionic/core'; +import type {JobDetail} from '@alwatr/type/flight-finder.js'; declare global { // eslint-disable-next-line no-var var appConfig: Record | undefined; - - interface AlwatrSignals { - readonly 'job-add': Pick; - readonly 'job-delete': string; - readonly 'job-document-storage': AlwatrDocumentStorage; - readonly toast: Partial & {message: string}; - } - interface AlwatrRequestSignals { - readonly 'job-document-storage': null; - } } export type NewJobDetail = {