diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts index 234f88c835..f09d6545f8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts @@ -8,11 +8,12 @@ import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../core/context'; import { createExtensionElement } from '../../core/extension'; import type { ManifestSection } from '../../core/models'; +import { UmbObserverMixin } from '../../core/observer'; import { UmbSectionStore } from '../../core/stores/section.store'; import { UmbSectionContext } from '../sections/section.context'; @defineElement('umb-backoffice-main') -export class UmbBackofficeMain extends UmbContextProviderMixin(UmbContextConsumerMixin(LitElement)) { +export class UmbBackofficeMain extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbObserverMixin(LitElement))) { static styles = [ UUITextStyles, css` @@ -35,23 +36,22 @@ export class UmbBackofficeMain extends UmbContextProviderMixin(UmbContextConsume private _routePrefix = 'section/'; private _sectionContext?: UmbSectionContext; private _sectionStore?: UmbSectionStore; - private _sectionSubscription?: Subscription; constructor() { super(); this.consumeContext('umbSectionStore', (_instance: UmbSectionStore) => { this._sectionStore = _instance; - this._useSections(); + this._observeSections(); }); } - private async _useSections() { - this._sectionSubscription?.unsubscribe(); + private async _observeSections() { + if (!this._sectionStore) return; - this._sectionSubscription = this._sectionStore?.getAllowed().subscribe((sections) => { - if (!sections) return; + this.observe(this._sectionStore?.getAllowed(), (sections) => { this._sections = sections; + if (!sections) return; this._createRoutes(); }); } @@ -89,11 +89,6 @@ export class UmbBackofficeMain extends UmbContextProviderMixin(UmbContextConsume } } - disconnectedCallback(): void { - super.disconnectedCallback(); - this._sectionSubscription?.unsubscribe(); - } - render() { return html``; }