Use ObserverMixin

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`
 			<uui-tab-group id="tabs">

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<UmbModalHandler>) => {
-				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() {

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<UmbNotificationHandler>) => {
+		this.observe(this._notificationService.notifications, (notifications) => {
 			this._notifications = notifications;
 		});
 	}
 
-	disconnectedCallback(): void {
-		super.disconnectedCallback();
-		this._notificationSubscription?.unsubscribe();
-	}
-
 	render() {
 		return html`
 			<uui-toast-notification-container bottom-up id="notifications">

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`
 			<umb-editor-property-layout id="layout" label="${this.label}" description="${this.description}">