fix: change how we pass init sort

Author: iobuhov

packages/pluggableWidgets/dropdown-sort-web/src/components/__test__/DropdownSort.spec.tsx

@@ -15,8 +15,7 @@ const commonProps: DropdownSortContainerProps = {
 
 const createAPI = (observer: SortStoreHost): SortAPI => ({
     version: 1,
-    host: observer,
-    initSortOrder: []
+    host: observer
 });
 
 const mockAttributes = (): AttributesType[] => [
@@ -45,9 +44,10 @@ describe("Dropdown Sort", () => {
             let attributes: DropdownSortContainerProps["attributes"];
             let api: SortAPI;
             beforeEach(() => {
-                const host = new SortStoreHost();
+                const host = new SortStoreHost({
+                    initSort: [[attrId("1"), "asc"]]
+                });
                 api = createAPI(host);
-                api.initSortOrder = [[attrId("1"), "asc"]];
                 attributes = mockAttributes();
             });
             it("loads correct values from attributes", () => {
@@ -78,9 +78,10 @@ describe("Dropdown Sort", () => {
             let attributes: DropdownSortContainerProps["attributes"];
             let api: SortAPI;
             beforeEach(() => {
-                const host = new SortStoreHost();
+                const host = new SortStoreHost({
+                    initSort: [[attrId("1"), "asc"]]
+                });
                 api = createAPI(host);
-                api.initSortOrder = [[attrId("1"), "asc"]];
                 attributes = mockAttributes();
             });
             it("loads correct default option", () => {
@@ -111,9 +112,10 @@ describe("Dropdown Sort", () => {
         let api: SortAPI;
         beforeEach(() => {
             delete (global as any)["com.mendix.widgets.web.UUID"];
-            const host = new SortStoreHost();
+            const host = new SortStoreHost({
+                initSort: [[attrId("1"), "asc"]]
+            });
             api = createAPI(host);
-            api.initSortOrder = [[attrId("1"), "asc"]];
             attributes = mockAttributes();
         });
 

packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts

@@ -78,8 +78,7 @@ export class GalleryStore extends BaseControllerHost {
 
         this.sortAPI = {
             version: 1,
-            host: this._sortHost,
-            initSortOrder: spec.gate.props.datasource.sortOrder
+            host: this._sortHost
         };
 
         new RefreshController(this, {

packages/shared/widget-plugin-sorting/src/react/context.ts

@@ -2,13 +2,11 @@ import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Context, createContext, useContext, useEffect } from "react";
 import { SortStoreHost } from "../stores/SortStoreHost";
-import { SortInstruction } from "../types/store";
 import { Result, error, value } from "./result-meta";
 
 export interface SortAPI {
     version: 1;
     host: SortStoreHost;
-    initSortOrder?: SortInstruction[];
 }
 
 const SORT_PATH = "com.mendix.widgets.web.sortable.sortContext";

packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx

@@ -20,7 +20,7 @@ export function withLinkedSortStore<P extends RequiredProps>(
             () =>
                 new SortStoreProvider({
                     host: props.sortAPI.host,
-                    initSortOrder: props.sortAPI.initSortOrder,
+                    initSortOrder: props.sortAPI.host.sortOrder,
                     attributes: props.attributes
                 })
         );

packages/shared/widget-plugin-sorting/src/stores/SortStoreHost.ts

@@ -1,68 +1,77 @@
-import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings";
-import { action, computed, makeObservable, observable } from "mobx";
+import { action, autorun, computed, makeObservable, observable, runInAction } from "mobx";
 import { ObservableSortStore, SortInstruction } from "../types/store";
 
-export class SortStoreHost implements Serializable {
-    private _store: ObservableSortStore | null = null;
+export class SortStoreHost {
     private _usedBy: string[] = [];
+    private _state: SortInstruction[];
+    private _cleanup: (() => void) | null = null;
 
-    get sortOrder(): SortInstruction[] {
-        return this._store?.sortOrder ?? [];
-    }
+    constructor(spec: { initSort?: SortInstruction[] } = {}) {
+        this._state = spec.initSort ?? [];
 
-    constructor() {
-        makeObservable<this, "_usedBy" | "_add" | "_remove">(this, {
+        makeObservable<this, "_usedBy" | "_state" | "_setState">(this, {
+            _state: observable.ref,
             sortOrder: computed,
             lock: action,
-            _add: action,
-            _remove: action,
             _usedBy: observable,
             usedBy: computed,
             observe: action,
-            unobserve: action
+            unobserve: action,
+            _setState: action
         });
     }
 
+    private _setState(state: SortInstruction[]): void {
+        this._state = state;
+    }
+
+    get sortOrder(): SortInstruction[] {
+        return this._state;
+    }
+
     observe(store: ObservableSortStore): void {
-        this._store = store;
+        if (this._cleanup) {
+            this._cleanup();
+        }
+        this._cleanup = autorun(() => {
+            this._setState(store.sortOrder);
+        });
     }
 
     unobserve(): void {
-        this._store = null;
+        this._cleanup?.();
+        this._cleanup = null;
     }
 
     lock(id: string): () => void {
-        this._add(id);
-        return () => this._remove(id);
-    }
-
-    private _add(id: string): void {
         if (this._usedBy.indexOf(id) === -1) {
             this._usedBy.push(id);
         }
-    }
-
-    private _remove(id: string): void {
-        const index = this._usedBy.indexOf(id);
-        if (index !== -1) {
-            this._usedBy.splice(index, 1);
-        }
+        const remove = (): void => {
+            runInAction(() => {
+                const index = this._usedBy.indexOf(id);
+                if (index !== -1) {
+                    this._usedBy.splice(index, 1);
+                }
+            });
+        };
+        return remove;
     }
 
     get usedBy(): string | null {
         return this._usedBy.at(0) ?? null;
     }
 
-    toJSON(): PlainJs {
-        return this._store ? this._store.toJSON() : null;
-    }
+    // toJSON(): PlainJs {
+    //     return this._store ? this._store.toJSON() : null;
+    // }
 
-    fromJSON(data: PlainJs): void {
-        if (data == null || !Array.isArray(data)) {
-            return;
-        }
-        if (this._store) {
-            this._store.fromJSON(data);
-        }
-    }
+    // fromJSON(data: PlainJs): void {
+    //     if (data == null || !Array.isArray(data)) {
+    //         return;
+    //     }
+    //     if (this._store) {
+    //         this._store.fromJSON(data);
+    //     }
+    // }
 }