use new state and stores

src/Umbraco.Web.UI.Client/libs/models/index.ts

@@ -4,6 +4,7 @@ import {
 	DocumentTypeTreeItem,
 	EntityTreeItem,
 	FolderTreeItem,
+	Language,
 } from '@umbraco-cms/backend-api';
 
 // Extension Manifests
@@ -149,3 +150,7 @@ export interface DocumentBlueprintDetails {
 	icon: string;
 	documentTypeKey: string;
 }
+
+export interface LanguageDetails extends Language {
+	key: string;
+}

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

@@ -2,7 +2,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 
-
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../core/modal';
 import { UmbUserStore } from './users/users/user.store';
 import { UmbUserGroupStore } from './users/user-groups/user-group.store';
@@ -12,9 +11,12 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from './users/current-user/current-user-history.store';
 
-import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './shared/components/backoffice-frame/backoffice.context';
-import {UmbDocumentTypeDetailStore} from './documents/document-types/document-type.detail.store';
-import {UmbDocumentTypeTreeStore} from './documents/document-types/document-type.tree.store';
+import {
+	UmbBackofficeContext,
+	UMB_BACKOFFICE_CONTEXT_TOKEN,
+} from './shared/components/backoffice-frame/backoffice.context';
+import { UmbDocumentTypeDetailStore } from './documents/document-types/document-type.detail.store';
+import { UmbDocumentTypeTreeStore } from './documents/document-types/document-type.tree.store';
 import { UmbMediaTypeDetailStore } from './media/media-types/media-type.detail.store';
 import { UmbMediaTypeTreeStore } from './media/media-types/media-type.tree.store';
 import { UmbDocumentDetailStore } from './documents/documents/document.detail.store';
@@ -33,7 +35,6 @@ import { UmbDataTypeDetailStore } from './settings/data-types/data-type.detail.s
 import { UmbDataTypeTreeStore } from './settings/data-types/data-type.tree.store';
 import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
 
-
 // Domains
 import './settings';
 import './documents';
@@ -45,6 +46,7 @@ import './packages';
 import './search';
 import './shared';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbLanguageStore, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from './settings/languages/language.store';
 
 @defineElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
@@ -91,6 +93,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		new UmbDictionaryTreeStore(this);
 		new UmbDocumentBlueprintDetailStore(this);
 		new UmbDocumentBlueprintTreeStore(this);
+		new UmbLanguageStore(this);
 
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		this.provideContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, new UmbCurrentUserHistoryStore());

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts

@@ -1,68 +1,66 @@
-import { map, Observable } from 'rxjs';
-import { UmbDataStoreBase } from '../../../core/stores/store';
-import type { LanguageDetails } from '@umbraco-cms/models';
+import { Observable } from 'rxjs';
 import { LanguageResource } from '@umbraco-cms/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 import { UmbContextToken } from '@umbraco-cms/context-api';
+import type { LanguageDetails } from '@umbraco-cms/models';
+import { UmbStoreBase } from '@umbraco-cms/store';
+import { ArrayState, createObservablePart } from '@umbraco-cms/observable-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 export type UmbLanguageStoreItemType = LanguageDetails;
-
-// TODO: research how we write names of global consts.
-export const STORE_ALIAS = 'umbLanguageStore';
+export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageStore>('umbLanguageStore');
 
 /**
  * @export
  * @class UmbLanguageStore
- * @extends {UmbDataStoreBase<UmbLanguageStoreItemType>}
+ * @extends {UmbStoreBase}
  * @description - Data Store for languages
  */
-export class UmbLanguageStore extends UmbDataStoreBase<UmbLanguageStoreItemType> {
-	public readonly storeAlias = STORE_ALIAS;
+export class UmbLanguageStore extends UmbStoreBase {
+	#data = new ArrayState<LanguageDetails>([], (x) => x.key);
 
-	/**
-	 * @description - Request a Data Type by key. The Data Type is added to the store and is returned as an Observable.
-	 * @param {string} key
-	 * @return {*}  {(Observable<DataTypeDetails | null>)}
-	 * @memberof UmbDataTypesStore
-	 */
-	getByKey(key: string): Observable<LanguageDetails | null> {
+	constructor(host: UmbControllerHostInterface) {
+		super(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN.toString());
+	}
+
+	getByKey(key: string) {
 		// TODO: use backend cli when available.
 		fetch(`/umbraco/management/api/v1/language/${key}`)
 			.then((res) => res.json())
 			.then((data) => {
-				this.updateItems([data]);
+				this.#data.appendOne(data);
 			});
 
-		return this.items.pipe(map((languages) => languages.find((language) => language.key === key) || null));
+		return createObservablePart(this.#data, (items) => items.find((item) => item.key === key));
 	}
 
 	getAll(): Observable<Array<LanguageDetails>> {
-		tryExecuteAndNotify(this.host, LanguageResource.getLanguage({ skip: 0, take: 100 })).then(({ data }) => {
+		tryExecuteAndNotify(this._host, LanguageResource.getLanguage({ skip: 0, take: 1000 })).then(({ data }) => {
 			if (data) {
-				this.updateItems(data.items as Array<LanguageDetails>);
+				//TODO: Fix when we have the updated languageResource
+				this.#data.append(data.items as Array<LanguageDetails>);
 			}
 		});
 
-		return this.items;
+		return this.#data;
 	}
 
 	async save(language: LanguageDetails): Promise<void> {
 		if (language.id && language.key) {
-			tryExecuteAndNotify(this.host, LanguageResource.putLanguageById({ id: language.id, requestBody: language })).then(
-				(response) => {
-					if (response.data) {
-						this.updateItems([response.data]);
-					}
-				}
-			);
-		} else {
-			tryExecuteAndNotify(this.host, LanguageResource.postLanguage({ requestBody: language })).then((response) => {
+			tryExecuteAndNotify(
+				this._host,
+				LanguageResource.putLanguageById({ id: language.id, requestBody: language })
+			).then((response) => {
 				if (response.data) {
-					this.updateItems([response.data]);
+					this.#data.appendOne(response.data);
+				}
+			});
+		} else {
+			tryExecuteAndNotify(this._host, LanguageResource.postLanguage({ requestBody: language })).then((response) => {
+				if (response.data) {
+					this.#data.appendOne(response.data);
 				}
 			});
 		}
 	}
 }
-
-export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageStore>(STORE_ALIAS);

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts

@@ -1,7 +1,7 @@
 import { UmbLanguageStore, UmbLanguageStoreItemType, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from '../../language.store';
 import type { LanguageDetails } from '@umbraco-cms/models';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbObserverController, UniqueBehaviorSubject } from '@umbraco-cms/observable-api';
+import { ObjectState, UmbObserverController } from '@umbraco-cms/observable-api';
 import { UmbContextConsumerController } from '@umbraco-cms/context-api';
 
 const DefaultLanguageData: UmbLanguageStoreItemType = {
@@ -28,12 +28,11 @@ export class UmbWorkspaceLanguageContext {
 		this.host = host;
 		this._entityKey = entityKey;
 
-		this._data = new UniqueBehaviorSubject<LanguageDetails>(DefaultLanguageData);
+		this._data = new ObjectState<LanguageDetails>(DefaultLanguageData);
 		this.data = this._data.asObservable();
 
 		new UmbContextConsumerController(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN, (_instance: UmbLanguageStore) => {
 			this._store = _instance;
-
 			this._observeStore();
 		});
 	}