diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts index 30dad3fb31..48c711821b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts @@ -2,14 +2,16 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../core/context'; import type { ManifestSection } from '../../core/models'; +import { UmbObserverMixin } from '../../core/observer'; import { UmbSectionStore } from '../../core/stores/section.store'; @customElement('umb-backoffice-header-sections') -export class UmbBackofficeHeaderSections extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) { +export class UmbBackofficeHeaderSections extends UmbContextProviderMixin( + UmbContextConsumerMixin(UmbObserverMixin(LitElement)) +) { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -53,16 +55,13 @@ export class UmbBackofficeHeaderSections extends UmbContextProviderMixin(UmbCont private _sectionStore?: UmbSectionStore; - private _sectionSubscription?: Subscription; - private _currentSectionSubscription?: Subscription; - constructor() { super(); this.consumeContext('umbSectionStore', (sectionStore: UmbSectionStore) => { this._sectionStore = sectionStore; - this._useSections(); - this._useCurrentSection(); + this._observeSections(); + this._observeCurrentSection(); }); } @@ -89,28 +88,23 @@ export class UmbBackofficeHeaderSections extends UmbContextProviderMixin(UmbCont this._open = false; } - private _useSections() { - this._sectionSubscription?.unsubscribe(); + private _observeSections() { + if (!this._sectionStore) return; - this._sectionSubscription = this._sectionStore?.getAllowed().subscribe((allowedSections) => { + this.observe(this._sectionStore?.getAllowed(), (allowedSections) => { this._sections = allowedSections; this._visibleSections = this._sections; }); } - private _useCurrentSection() { - this._currentSectionSubscription?.unsubscribe(); + private _observeCurrentSection() { + if (!this._sectionStore) return; - this._currentSectionSubscription = this._sectionStore?.currentAlias.subscribe((currentSectionAlias) => { + this.observe(this._sectionStore.currentAlias, (currentSectionAlias) => { this._currentSectionAlias = currentSectionAlias; }); } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._sectionSubscription?.unsubscribe(); - } - private _renderSections() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts index f3b26b56db..24aeb693a0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts @@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../core/context'; +import { UmbObserverMixin } from '../../core/observer'; import { UmbModalHandler, UmbModalService } from '../../core/services/modal'; @customElement('umb-backoffice-modal-container') -export class UmbBackofficeModalContainer extends UmbContextConsumerMixin(LitElement) { +export class UmbBackofficeModalContainer extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -21,23 +21,22 @@ export class UmbBackofficeModalContainer extends UmbContextConsumerMixin(LitElem private _modals: UmbModalHandler[] = []; private _modalService?: UmbModalService; - private _modalSubscription?: Subscription; constructor() { super(); this.consumeContext('umbModalService', (modalService: UmbModalService) => { this._modalService = modalService; - this._modalSubscription?.unsubscribe(); - this._modalService?.modals.subscribe((modals: Array) => { - this._modals = modals; - }); + this._observeModals(); }); } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._modalSubscription?.unsubscribe(); + private _observeModals() { + if (!this._modalService) return; + + this.observe(this._modalService.modals, (modals) => { + this._modals = modals; + }); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts index 868cc40079..73dc1985cd 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts @@ -2,12 +2,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../core/context'; +import { UmbObserverMixin } from '../../core/observer'; import type { UmbNotificationService, UmbNotificationHandler } from '../../core/services/notification'; @customElement('umb-backoffice-notification-container') -export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(LitElement) { +export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -27,30 +27,24 @@ export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin( private _notifications: UmbNotificationHandler[] = []; private _notificationService?: UmbNotificationService; - private _notificationSubscription?: Subscription; constructor() { super(); this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => { this._notificationService = notificationService; - this._useNotifications(); + this._observeNotifications(); }); } - private _useNotifications() { - this._notificationSubscription?.unsubscribe(); + private _observeNotifications() { + if (!this._notificationService) return; - this._notificationService?.notifications.subscribe((notifications: Array) => { + this.observe(this._notificationService.notifications, (notifications) => { this._notifications = notifications; }); } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._notificationSubscription?.unsubscribe(); - } - render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts index 8e8e361eec..8e23a01827 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts @@ -1,11 +1,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement, PropertyValueMap } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import { createExtensionElement, UmbExtensionRegistry } from '../../../core/extension'; import type { ManifestPropertyEditorUI } from '../../../core/models'; +import { UmbObserverMixin } from '../../../core/observer'; import '../../property-actions/shared/property-action-menu/property-action-menu.element'; import '../../editors/shared/editor-property-layout/editor-property-layout.element'; @@ -16,7 +16,7 @@ import '../../editors/shared/editor-property-layout/editor-property-layout.eleme * The element will also render all Property Actions related to the Property Editor. */ @customElement('umb-entity-property') -export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement) { +export class UmbEntityPropertyElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -115,7 +115,6 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement private _element?: { value?: any; config?: any } & HTMLElement; // TODO: invent interface for propertyEditorUI. private _extensionRegistry?: UmbExtensionRegistry; - private _propertyEditorUISubscription?: Subscription; constructor() { super(); @@ -134,15 +133,11 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement private _observePropertyEditorUI() { if (!this._extensionRegistry) return; - this._propertyEditorUISubscription?.unsubscribe(); - - this._propertyEditorUISubscription = this._extensionRegistry - .getByAlias(this.propertyEditorUIAlias) - .subscribe((manifest) => { - if (manifest?.type === 'propertyEditorUI') { - this._gotData(manifest); - } - }); + this.observe(this._extensionRegistry.getByAlias(this.propertyEditorUIAlias), (manifest) => { + if (manifest?.type === 'propertyEditorUI') { + this._gotData(manifest); + } + }); } private _gotData(propertyEditorUIManifest?: ManifestPropertyEditorUI) { @@ -189,11 +184,6 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement } } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._propertyEditorUISubscription?.unsubscribe(); - } - render() { return html`