installer: apply tryExecute

src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts

@@ -232,25 +232,27 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		}
 
 		this._installerContext?.nextStep();
-		this._installerContext
-			.requestInstall()
-			.then(() => this._handleFulfilled())
-			.catch((error: unknown) => this._handleRejected(error));
+
+		const { data, error } = await tryExecuteAndNotify(
+			this,
+			InstallResource.postInstallSetup({ requestBody: this._installerContext?.getData() })
+		);
+		if (data) {
+			this._handleFulfilled();
+		} else if (error) {
+			this._handleRejected(error);
+		}
 	};
 
 	private _handleFulfilled() {
+		// TODO: The post install will probably return a user in the future, so we have to set that context somewhere to let the client know that it is authenticated
 		console.warn('TODO: Set up real authentication');
 		sessionStorage.setItem('is-authenticated', 'true');
 		history.replaceState(null, '', '/content');
 	}
 
-	private _handleRejected(e: unknown) {
-		if (e instanceof ApiError) {
-			const error = e.body as ProblemDetails;
-			if (e.status === 400) {
-				this._installerContext?.setInstallStatus(error);
-			}
-		}
+	private _handleRejected(e: ProblemDetails) {
+		this._installerContext?.setInstallStatus(e);
 		this._installerContext?.nextStep();
 	}
 

src/Umbraco.Web.UI.Client/src/installer/installer.context.ts

@@ -1,5 +1,6 @@
 import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
 import { Install, InstallResource, InstallSettings, ProblemDetails, TelemetryLevel } from '@umbraco-cms/backend-api';
+import { tryExecute } from '@umbraco-cms/resources';
 
 /**
  * Context API for the installer
@@ -95,17 +96,6 @@ export class UmbInstallerContext {
 		return this._data.getValue();
 	}
 
-	/**
-	 * Post the installation data to the API
-	 * @public
-	 * @return {*}
-	 * @memberof UmbInstallerContext
-	 */
-	public requestInstall() {
-		// TODO: The post install will probably return a user in the future, so we have to set that context somewhere to let the client know that it is authenticated
-		return InstallResource.postInstallSetup({ requestBody: this.getData() });
-	}
-
 	/**
 	 * Set the install status
 	 * @public
@@ -121,9 +111,12 @@ export class UmbInstallerContext {
 	 * @private
 	 * @memberof UmbInstallerContext
 	 */
-	private _loadInstallerSettings() {
-		InstallResource.getInstallSettings().then((installSettings) => {
-			this._settings.next(installSettings);
-		});
+	private async _loadInstallerSettings() {
+		const { data, error } = await tryExecute(InstallResource.getInstallSettings());
+		if (data) {
+			this._settings.next(data);
+		} else if (error) {
+			console.error(error.detail, error);
+		}
 	}
 }

src/Umbraco.Web.UI.Client/src/installer/installer.element.ts

@@ -1,8 +1,7 @@
-import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { css, CSSResultGroup, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInstallerContext } from './installer.context';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
-import { UmbContextProviderMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 import './consent/installer-consent.element';
 import './database/installer-database.element';
@@ -12,7 +11,7 @@ import './shared/layout/installer-layout.element';
 import './user/installer-user.element';
 
 @customElement('umb-installer')
-export class UmbInstallerElement extends UmbContextProviderMixin(UmbObserverMixin(LitElement)) {
+export class UmbInstallerElement extends UmbLitElement {
 	static styles: CSSResultGroup = [css``];
 
 	@state()
@@ -31,8 +30,10 @@ export class UmbInstallerElement extends UmbContextProviderMixin(UmbObserverMixi
 	}
 
 	private _observeCurrentStep() {
-		this.observe<number>(this._umbInstallerContext.currentStepChanges(), (step) => {
-			this.step = step;
+		this.observe(this._umbInstallerContext.currentStepChanges(), (step) => {
+			if (step) {
+				this.step = step;
+			}
 		});
 	}