From 9434541bdee191d7c6a260c276fc249927ab2fd8 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 12 Oct 2022 11:15:14 +0200
Subject: [PATCH] use observer mixin

---
 ...ditor-view-document-type-design.element.ts | 29 ++++++-------------
 .../editor-entity/editor-entity.element.ts    | 21 ++++++++------
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/views/editor-view-document-type-design.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/views/editor-view-document-type-design.element.ts
index 5850cb750a..ec6f7bedcb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/views/editor-view-document-type-design.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/views/editor-view-document-type-design.element.ts
@@ -1,47 +1,36 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { Subscription, distinctUntilChanged } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs';
 import { UmbContextConsumerMixin } from '../../../../core/context';
 import type { DocumentTypeEntity } from '../../../../mocks/data/document-type.data';
 import { UmbDocumentTypeContext } from '../document-type.context';
+import { UmbObserverMixin } from '../../../../core/observer';
 
 @customElement('umb-editor-view-document-type-design')
-export class UmbEditorViewDocumentTypeDesignElement extends UmbContextConsumerMixin(LitElement) {
+export class UmbEditorViewDocumentTypeDesignElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
 	static styles = [UUITextStyles, css``];
 
-	@property({ type: Object })
-	documentType?: DocumentTypeEntity;
-
 	@state()
 	_documentType?: DocumentTypeEntity;
 
 	private _documentTypeContext?: UmbDocumentTypeContext;
 
-	private _documentTypeSubscription?: Subscription;
-
 	constructor() {
 		super();
 
 		this.consumeContext('umbDocumentTypeContext', (documentTypeContext) => {
 			this._documentTypeContext = documentTypeContext;
-			this._useDocumentType();
+			this._observeDocumentType();
 		});
 	}
 
-	private _useDocumentType() {
-		this._documentTypeSubscription?.unsubscribe();
+	private _observeDocumentType() {
+		if (!this._documentTypeContext) return;
 
-		this._documentTypeSubscription = this._documentTypeContext?.data
-			.pipe(distinctUntilChanged())
-			.subscribe((documentType) => {
-				this._documentType = documentType;
-			});
-	}
-
-	disconnectedCallback(): void {
-		super.disconnectedCallback();
-		this._documentTypeSubscription?.unsubscribe();
+		this.observe<DocumentTypeEntity>(this._documentTypeContext.data.pipe(distinctUntilChanged()), (documentType) => {
+			this._documentType = documentType;
+		});
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
index db921e0a95..49153cce17 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
@@ -6,9 +6,10 @@ import type { ManifestEditor } from '../../../../core/models';
 
 import { UmbContextConsumerMixin } from '../../../../core/context';
 import { createExtensionElement, UmbExtensionRegistry } from '../../../../core/extension';
+import { UmbObserverMixin } from '../../../../core/observer';
 
 @customElement('umb-editor-entity')
-export class UmbEditorEntityElement extends UmbContextConsumerMixin(LitElement) {
+export class UmbEditorEntityElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -30,7 +31,7 @@ export class UmbEditorEntityElement extends UmbContextConsumerMixin(LitElement)
 	}
 	public set entityType(value: string) {
 		this._entityType = value;
-		this._useEditors();
+		this._observeEditors();
 	}
 
 	@state()
@@ -43,19 +44,21 @@ export class UmbEditorEntityElement extends UmbContextConsumerMixin(LitElement)
 
 		this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => {
 			this._extensionRegistry = extensionRegistry;
-			this._useEditors();
+			this._observeEditors();
 		});
 	}
 
-	private _useEditors() {
+	private _observeEditors() {
 		if (!this._extensionRegistry) return;
 
-		this._extensionRegistry
-			.extensionsOfType('editor')
-			.pipe(map((editors) => editors.find((editor) => editor.meta.entityType === this.entityType)))
-			.subscribe((editor) => {
+		this.observe<ManifestEditor>(
+			this._extensionRegistry
+				.extensionsOfType('editor')
+				.pipe(map((editors) => editors.find((editor) => editor.meta.entityType === this.entityType))),
+			(editor) => {
 				this._createElement(editor);
-			});
+			}
+		);
 	}
 
 	private async _createElement(editor?: ManifestEditor) {