From 34a31f26a81b76ccbf53895994bd2c2441491710 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 25 Aug 2022 10:15:34 +0200
Subject: [PATCH] provide tree service from tree extensions

---
 .../tree/members/tree-members.element.ts      | 13 +++++++++-
 .../tree/shared/tree-navigator.element.ts     | 25 +++++++++++--------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.element.ts
index 2e4ef571fa..48f78e275e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.element.ts
@@ -3,10 +3,21 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement } from 'lit/decorators.js';
 
 import '../shared/tree-navigator.element';
+
+import { UmbTreeService } from '../tree.service';
+import { UmbContextProviderMixin } from '../../../core/context';
 @customElement('umb-tree-members')
-export class UmbTreeMembers extends LitElement {
+export class UmbTreeMembers extends UmbContextProviderMixin(LitElement) {
 	static styles = [UUITextStyles, css``];
 
+	private _treeService?: UmbTreeService;
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._treeService = new UmbTreeService();
+		this.provideContext('umbTreeService', this._treeService);
+	}
+
 	render() {
 		return html`<umb-tree-navigator></umb-tree-navigator>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts
index 4d5c112436..fead9f0648 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts
@@ -1,16 +1,16 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbContextProviderMixin } from '../../../core/context';
+import { UmbContextConsumerMixin } from '../../../core/context';
 import { UmbTreeService } from '../tree.service';
 
 import './tree-item.element';
 
 @customElement('umb-tree-navigator')
-export class UmbTreeNavigator extends UmbContextProviderMixin(LitElement) {
+export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) {
 	static styles = [UUITextStyles, css``];
 
-	private _treeService: UmbTreeService;
+	private _treeService?: UmbTreeService;
 
 	@state()
 	id = '2';
@@ -24,14 +24,17 @@ export class UmbTreeNavigator extends UmbContextProviderMixin(LitElement) {
 	@state()
 	loading = true;
 
-	constructor() {
-		super();
-		this._treeService = new UmbTreeService();
-		this.provideContext('umbTreeService', this._treeService);
-		this._treeService.getTreeItem(this.id).then((item) => {
-			this.label = item.name;
-			this.hasChildren = item.hasChildren;
-			this.loading = false;
+	connectedCallback(): void {
+		super.connectedCallback();
+
+		this.consumeContext('umbTreeService', (treeService) => {
+			this._treeService = treeService;
+
+			this._treeService?.getTreeItem(this.id).then((item) => {
+				this.label = item.name;
+				this.hasChildren = item.hasChildren;
+				this.loading = false;
+			});
 		});
 	}