From 64815ec621cd43e06d8ec2825ce8407f90283bbe Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 12 Oct 2022 13:38:54 +0200 Subject: [PATCH] use observer mixin --- .../info/editor-view-node-info.element.ts | 15 ++--- .../property-action-menu.element.ts | 57 ++++++++++--------- ...operty-editor-ui-content-picker.element.ts | 14 ++--- .../property-editor-config.element.ts | 40 ++++++------- .../shared/section-dashboards.element.ts | 52 +++++++---------- .../shared/section-sidebar.element.ts | 19 +++---- .../sections/shared/section-trees.element.ts | 33 ++++------- .../sections/shared/section.element.ts | 42 ++++++-------- .../trees/shared/tree-item-action.element.ts | 35 +++++------- 9 files changed, 129 insertions(+), 178 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/info/editor-view-node-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/info/editor-view-node-info.element.ts index 10110341f6..7f5becea74 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/info/editor-view-node-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/info/editor-view-node-info.element.ts @@ -1,16 +1,17 @@ import { css, html, LitElement } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; -import { Subscription, distinctUntilChanged } from 'rxjs'; +import { distinctUntilChanged } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../../../../core/context'; import { UmbNodeContext } from '../../node.context'; +import { UmbObserverMixin } from '../../../../../../core/observer'; +import type { NodeEntity } from '../../../../../../mocks/data/node.data'; @customElement('umb-editor-view-node-info') -export class UmbEditorViewNodeInfoElement extends UmbContextConsumerMixin(LitElement) { +export class UmbEditorViewNodeInfoElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [UUITextStyles, css``]; private _nodeContext?: UmbNodeContext; - private _nodeContextSubscription?: Subscription; @state() private _nodeName = ''; @@ -20,14 +21,14 @@ export class UmbEditorViewNodeInfoElement extends UmbContextConsumerMixin(LitEle this.consumeContext('umbNodeContext', (nodeContext) => { this._nodeContext = nodeContext; - this._useNode(); + this._observeNode(); }); } - private _useNode() { - this._nodeContextSubscription?.unsubscribe(); + private _observeNode() { + if (!this._nodeContext) return; - this._nodeContextSubscription = this._nodeContext?.data.pipe(distinctUntilChanged()).subscribe((node) => { + this.observe(this._nodeContext.data.pipe(distinctUntilChanged()), (node) => { this._nodeName = node.name; }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/shared/property-action-menu/property-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/shared/property-action-menu/property-action-menu.element.ts index a6992f87fa..d0d2a641aa 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/shared/property-action-menu/property-action-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/shared/property-action-menu/property-action-menu.element.ts @@ -3,14 +3,17 @@ import '../property-action/property-action.element'; import { UUITextStyles } from '@umbraco-ui/uui'; import { css, CSSResultGroup, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { Subscription, map } from 'rxjs'; +import { map } from 'rxjs'; import { UmbContextProviderMixin, UmbContextConsumerMixin } from '../../../../core/context'; import { UmbExtensionRegistry } from '../../../../core/extension'; import type { ManifestPropertyAction } from '../../../../core/models'; +import { UmbObserverMixin } from '../../../../core/observer'; import { UmbPropertyActionMenuContext } from './property-action-menu.context'; @customElement('umb-property-action-menu') -export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) { +export class UmbPropertyActionMenuElement extends UmbContextProviderMixin( + UmbContextConsumerMixin(UmbObserverMixin(LitElement)) +) { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -54,40 +57,44 @@ export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbCon private _open = false; private _extensionRegistry?: UmbExtensionRegistry; - private _propertyActionsSubscription?: Subscription; private _propertyActionMenuContext = new UmbPropertyActionMenuContext(); - private _propertyActionMenuOpenSubscription?: Subscription; constructor() { super(); - this._propertyActionMenuOpenSubscription = this._propertyActionMenuContext.isOpen.subscribe((value: boolean) => { - this._open = value; - }); - this.consumeContext('umbExtensionRegistry', (extensionRegistry: UmbExtensionRegistry) => { this._extensionRegistry = extensionRegistry; - this._usePropertyActions(); + this._observePropertyActions(); }); this.provideContext('umbPropertyActionMenu', this._propertyActionMenuContext); } - private _usePropertyActions() { - this._propertyActionsSubscription?.unsubscribe(); + connectedCallback(): void { + super.connectedCallback(); - this._extensionRegistry - ?.extensionsOfType('propertyAction') - .pipe( - map((propertyActions) => - propertyActions.filter((propertyAction) => - propertyAction.meta.propertyEditors.includes(this.propertyEditorUIAlias) + this.observe(this._propertyActionMenuContext.isOpen, (value) => { + this._open = value; + }); + } + + private _observePropertyActions() { + if (!this._extensionRegistry) return; + + this.observe( + this._extensionRegistry + .extensionsOfType('propertyAction') + .pipe( + map((propertyActions) => + propertyActions.filter((propertyAction) => + propertyAction.meta.propertyEditors.includes(this.propertyEditorUIAlias) + ) ) - ) - ) - .subscribe((extensions) => { - this._actions = extensions; - }); + ), + (propertyActionManifests) => { + this._actions = propertyActionManifests; + } + ); } private _toggleMenu() { @@ -100,12 +107,6 @@ export class UmbPropertyActionMenuElement extends UmbContextProviderMixin(UmbCon event.stopPropagation(); } - disconnectedCallback() { - super.disconnectedCallback(); - this._propertyActionMenuOpenSubscription?.unsubscribe(); - this._propertyActionsSubscription?.unsubscribe(); - } - render() { return html` ${this._actions?.length > 0 diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts index e32e2f2d38..8432a18751 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts @@ -1,15 +1,15 @@ import { css, html, LitElement, nothing } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; -import type { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import type { UmbModalService } from '../../../core/services/modal'; import type { UmbEntityStore } from '../../../core/stores/entity.store'; import type { Entity } from '../../../mocks/data/entities'; +import { UmbObserverMixin } from '../../../core/observer'; @customElement('umb-property-editor-ui-content-picker') -export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerMixin(LitElement) { +export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -45,7 +45,6 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerM private _modalService?: UmbModalService; private _entityStore?: UmbEntityStore; - private _pickedEntitiesSubscription?: Subscription; constructor() { super(); @@ -60,8 +59,8 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerM } private _observePickedEntities() { - this._pickedEntitiesSubscription?.unsubscribe(); - this._pickedEntitiesSubscription = this._entityStore?.getByKeys(this.value).subscribe((entities) => { + if (!this._entityStore) return; + this.observe(this._entityStore.getByKeys(this.value), (entities) => { this._items = entities; }); } @@ -95,11 +94,6 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerM this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true })); } - disconnectedCallback() { - super.disconnectedCallback(); - this._pickedEntitiesSubscription?.unsubscribe(); - } - private _renderItem(item: Entity) { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts index cd88693cc2..6bdbeab48f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts @@ -2,12 +2,18 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../../core/context'; import { UmbExtensionRegistry } from '../../../../core/extension'; -import { UmbPropertyEditorConfigStore } from '../../../../core/stores/property-editor-config/property-editor-config.store'; - -import type { PropertyEditorConfigDefaultData, PropertyEditorConfigProperty } from '../../../../core/models'; +import { + PropertyEditorConfigRef, + UmbPropertyEditorConfigStore, +} from '../../../../core/stores/property-editor-config/property-editor-config.store'; +import { UmbObserverMixin } from '../../../../core/observer'; +import type { + ManifestTypes, + PropertyEditorConfigDefaultData, + PropertyEditorConfigProperty, +} from '../../../../core/models'; import '../../../components/entity-property/entity-property.element'; @@ -16,7 +22,7 @@ import '../../../components/entity-property/entity-property.element'; * @description - Element for displaying the configuration for a Property Editor and Property Editor UI. */ @customElement('umb-property-editor-config') -export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitElement) { +export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [UUITextStyles]; /** @@ -77,10 +83,7 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE private _propertyEditorUIConfigProperties: Array = []; private _propertyEditorConfigStore?: UmbPropertyEditorConfigStore; - private _propertyEditorConfigSubscription?: Subscription; - private _extensionRegistry?: UmbExtensionRegistry; - private _propertyEditorUIConfigSubscription?: Subscription; constructor() { super(); @@ -99,25 +102,22 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE private _observePropertyEditorConfig() { if (!this._propertyEditorConfigStore || !this._propertyEditorAlias) return; - this._propertyEditorConfigSubscription?.unsubscribe(); - - this._propertyEditorConfigSubscription = this._propertyEditorConfigStore - ?.getByAlias(this.propertyEditorAlias) - .subscribe((propertyEditorConfig) => { + this.observe( + this._propertyEditorConfigStore.getByAlias(this.propertyEditorAlias), + (propertyEditorConfig) => { if (!propertyEditorConfig) return; this._propertyEditorConfigProperties = propertyEditorConfig?.config?.properties || []; this._mergeProperties(); this._propertyEditorConfigDefaultData = propertyEditorConfig?.config?.defaultData || []; this._mergeDefaultData(); - }); + } + ); } private _observePropertyEditorUIConfig() { if (!this._extensionRegistry || !this._propertyEditorUIAlias) return; - this._propertyEditorUIConfigSubscription?.unsubscribe(); - - this._extensionRegistry?.getByAlias(this.propertyEditorUIAlias).subscribe((manifest) => { + this.observe(this._extensionRegistry.getByAlias(this.propertyEditorUIAlias), (manifest) => { if (manifest?.type === 'propertyEditorUI') { this._propertyEditorUIConfigProperties = manifest?.meta.config?.properties || []; this._mergeProperties(); @@ -141,12 +141,6 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE return value || defaultValue || null; } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._propertyEditorConfigSubscription?.unsubscribe(); - this._propertyEditorUIConfigSubscription?.unsubscribe(); - } - render() { return html` ${this._properties.length > 0 diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts index 69f06da640..ea1581acb9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts @@ -8,10 +8,11 @@ import { UmbContextConsumerMixin } from '../../../core/context'; import { createExtensionElement, UmbExtensionRegistry } from '../../../core/extension'; import { UmbSectionContext } from '../section.context'; -import type { ManifestDashboard } from '../../../core/models'; +import type { ManifestDashboard, ManifestSection } from '../../../core/models'; +import { UmbObserverMixin } from '../../../core/observer'; @customElement('umb-section-dashboards') -export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) { +export class UmbSectionDashboards extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -54,10 +55,7 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) { private _currentSectionAlias = ''; private _extensionRegistry?: UmbExtensionRegistry; - private _dashboardsSubscription?: Subscription; - private _sectionContext?: UmbSectionContext; - private _sectionContextSubscription?: Subscription; constructor() { super(); @@ -69,39 +67,39 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) { this.consumeContext('umbSectionContext', (context: UmbSectionContext) => { this._sectionContext = context; - this._useSectionContext(); + this._observeSectionContext(); }); } - private _useSectionContext() { - this._sectionContextSubscription?.unsubscribe(); + private _observeSectionContext() { + if (!this._sectionContext) return; - this._sectionContextSubscription = this._sectionContext?.data.pipe(first()).subscribe((section) => { + this.observe(this._sectionContext.data.pipe(first()), (section) => { this._currentSectionAlias = section.alias; this._currentSectionPathname = section.meta.pathname; - this._useDashboards(); + this._observeDashboards(); }); } - private _useDashboards() { + private _observeDashboards() { if (!this._extensionRegistry || !this._currentSectionAlias) return; - this._dashboardsSubscription?.unsubscribe(); - - this._dashboardsSubscription = this._extensionRegistry - ?.extensionsOfType('dashboard') - .pipe( - map((extensions) => - extensions - .filter((extension) => extension.meta.sections.includes(this._currentSectionAlias)) - .sort((a, b) => b.meta.weight - a.meta.weight) - ) - ) - .subscribe((dashboards) => { + this.observe( + this._extensionRegistry + ?.extensionsOfType('dashboard') + .pipe( + map((extensions) => + extensions + .filter((extension) => extension.meta.sections.includes(this._currentSectionAlias)) + .sort((a, b) => b.meta.weight - a.meta.weight) + ) + ), + (dashboards) => { if (dashboards?.length === 0) return; this._dashboards = dashboards; this._createRoutes(); - }); + } + ); } private _createRoutes() { @@ -142,12 +140,6 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) { `; } - disconnectedCallback() { - super.disconnectedCallback(); - this._dashboardsSubscription?.unsubscribe(); - this._sectionContextSubscription?.unsubscribe(); - } - render() { return html` ${this._renderNavigation()} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-sidebar.element.ts index 984a99eeda..d2e4c8ea1d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-sidebar.element.ts @@ -1,13 +1,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import { UmbSectionContext } from '../section.context'; import '../../trees/shared/context-menu/tree-context-menu.service'; +import { UmbObserverMixin } from '../../../core/observer'; +import type { ManifestSection } from '../../../core/models'; @customElement('umb-section-sidebar') -export class UmbSectionSidebar extends UmbContextConsumerMixin(LitElement) { +export class UmbSectionSidebar extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -34,31 +35,25 @@ export class UmbSectionSidebar extends UmbContextConsumerMixin(LitElement) { private _sectionPathname = ''; private _sectionContext?: UmbSectionContext; - private _sectionContextSubscription?: Subscription; constructor() { super(); this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { this._sectionContext = sectionContext; - this._useSectionContext(); + this._observeSectionContext(); }); } - private _useSectionContext() { - this._sectionContextSubscription?.unsubscribe(); + private _observeSectionContext() { + if (!this._sectionContext) return; - this._sectionContextSubscription = this._sectionContext?.data.subscribe((section) => { + this.observe(this._sectionContext.data, (section) => { this._sectionLabel = section.meta.label || section.name; this._sectionPathname = section.meta.pathname; }); } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._sectionContextSubscription?.unsubscribe(); - } - render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts index ed9af511ad..0cc68554ba 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-trees.element.ts @@ -1,26 +1,24 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { map, Subscription, switchMap, EMPTY, of } from 'rxjs'; +import { map, switchMap, EMPTY, of } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import { UmbExtensionRegistry } from '../../../core/extension'; import { UmbSectionContext } from '../section.context'; import '../../trees/shared/tree-extension.element'; +import { UmbObserverMixin } from '../../../core/observer'; @customElement('umb-section-trees') -export class UmbSectionTrees extends UmbContextConsumerMixin(LitElement) { +export class UmbSectionTrees extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [UUITextStyles]; @state() private _treeAliases: Array = []; private _extensionStore?: UmbExtensionRegistry; - private _treesSubscription?: Subscription; - private _sectionContext?: UmbSectionContext; - private _sectionContextSubscription?: Subscription; constructor() { super(); @@ -28,22 +26,20 @@ export class UmbSectionTrees extends UmbContextConsumerMixin(LitElement) { // TODO: wait for more contexts this.consumeContext('umbExtensionRegistry', (extensionStore: UmbExtensionRegistry) => { this._extensionStore = extensionStore; - this._useTrees(); + this._observeTrees(); }); this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { this._sectionContext = sectionContext; - this._useTrees(); + this._observeTrees(); }); } - private _useTrees() { + private _observeTrees() { if (!this._extensionStore || !this._sectionContext) return; - this._treesSubscription?.unsubscribe(); - - this._treesSubscription = this._sectionContext?.data - .pipe( + this.observe( + this._sectionContext?.data.pipe( switchMap((section) => { if (!section) return EMPTY; @@ -58,16 +54,11 @@ export class UmbSectionTrees extends UmbContextConsumerMixin(LitElement) { ) ?? of([]) ); }) - ) - .subscribe((treeAliases) => { + ), + (treeAliases) => { this._treeAliases = treeAliases; - }); - } - - disconnectedCallback() { - super.disconnectedCallback(); - this._treesSubscription?.unsubscribe(); - this._sectionContextSubscription?.unsubscribe(); + } + ); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts index 97295c277e..4ec086dd07 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts @@ -1,18 +1,20 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { Subscription, map, switchMap, EMPTY, of } from 'rxjs'; +import { map, switchMap, EMPTY, of } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import { UmbExtensionRegistry } from '../../../core/extension'; import { UmbSectionContext } from '../section.context'; -import type { ManifestTree, ManifestEditor } from '../../../core/models'; +import type { ManifestTree } from '../../../core/models'; -import '../shared/section-trees.element.ts'; import { UmbEditorEntityElement } from '../../editors/shared/editor-entity/editor-entity.element'; import { UmbEntityStore } from '../../../core/stores/entity.store'; +import { UmbObserverMixin } from '../../../core/observer'; + +import '../shared/section-trees.element.ts'; @customElement('umb-section') -export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) { +export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { static styles = [ UUITextStyles, css` @@ -30,14 +32,9 @@ export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) { @state() private _trees?: Array; - private _editors?: Array; - private _editorsSubscription?: Subscription; - private _entityStore?: UmbEntityStore; - private _sectionContext?: UmbSectionContext; private _extensionRegistry?: UmbExtensionRegistry; - private _treesSubscription?: Subscription; constructor() { super(); @@ -45,27 +42,25 @@ export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) { // TODO: wait for more contexts this.consumeContext('umbExtensionRegistry', (extensionsRegistry: UmbExtensionRegistry) => { this._extensionRegistry = extensionsRegistry; - this._useTrees(); + this._observeTrees(); }); this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => { this._sectionContext = sectionContext; - this._useTrees(); + this._observeTrees(); }); this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => { this._entityStore = entityStore; - this._useTrees(); + this._observeTrees(); }); } - private _useTrees() { + private _observeTrees() { if (!this._sectionContext || !this._extensionRegistry || !this._entityStore) return; - this._treesSubscription?.unsubscribe(); - - this._treesSubscription = this._sectionContext?.data - .pipe( + this.observe( + this._sectionContext?.data.pipe( switchMap((section) => { if (!section) return EMPTY; @@ -81,11 +76,12 @@ export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) { ) ?? of([]) ); }) - ) - .subscribe((trees) => { + ), + (trees) => { this._trees = trees; this._createRoutes(); - }); + } + ); } private _createRoutes() { @@ -114,12 +110,6 @@ export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) { ]; } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._treesSubscription?.unsubscribe(); - this._editorsSubscription?.unsubscribe(); - } - render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item-action.element.ts index 1925021242..e0d0685cad 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item-action.element.ts @@ -1,8 +1,8 @@ import { LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../../core/context'; import type { ManifestTreeItemAction, ManifestTree } from '../../../core/models'; +import { UmbObserverMixin } from '../../../core/observer'; import { Entity } from '../../../mocks/data/entities'; import { UmbSectionContext } from '../../sections/section.context'; import { UmbTreeContextMenuPageService } from './context-menu/tree-context-menu-page.service'; @@ -14,7 +14,7 @@ export type ActionPageEntity = { }; @customElement('umb-tree-item-action') -export default class UmbTreeItemActionElement extends UmbContextConsumerMixin(LitElement) { +export default class UmbTreeItemActionElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { @property({ attribute: false }) public treeAction?: ManifestTreeItemAction; @@ -28,10 +28,6 @@ export default class UmbTreeItemActionElement extends UmbContextConsumerMixin(Li protected _treeContextMenuService?: UmbTreeContextMenuService; protected _actionPageService?: UmbTreeContextMenuPageService; - protected _actionPageSubscription?: Subscription; - protected _activeTreeSubscription?: Subscription; - protected _activeTreeItemSubscription?: Subscription; - connectedCallback() { super.connectedCallback(); @@ -47,36 +43,33 @@ export default class UmbTreeItemActionElement extends UmbContextConsumerMixin(Li this.consumeContext('umbTreeContextMenuPageService', (actionPageService: UmbTreeContextMenuPageService) => { this._actionPageService = actionPageService; + this._observeEntity(); + }); + } - this._actionPageSubscription?.unsubscribe(); - this._actionPageService?.entity.subscribe((entity: ActionPageEntity) => { - this._entity = entity; - }); + private _observeEntity() { + if (!this._actionPageService) return; + + this.observe(this._actionPageService.entity, (entity) => { + this._entity = entity; }); } private _observeActiveTree() { - this._activeTreeSubscription?.unsubscribe(); + if (!this._sectionContext) return; - this._activeTreeSubscription = this._sectionContext?.activeTree.subscribe((tree) => { + this.observe(this._sectionContext.activeTree, (tree) => { this._activeTree = tree; }); } private _observeActiveTreeItem() { - this._activeTreeItemSubscription?.unsubscribe(); + if (!this._sectionContext) return; - this._activeTreeItemSubscription = this._sectionContext?.activeTreeItem.subscribe((treeItem) => { + this.observe(this._sectionContext.activeTreeItem, (treeItem) => { this._activeTreeItem = treeItem; }); } - - disconnectCallback() { - super.disconnectedCallback(); - this._actionPageSubscription?.unsubscribe(); - this._activeTreeSubscription?.unsubscribe(); - this._activeTreeItemSubscription?.unsubscribe(); - } } declare global {