added custom common/utils/toJS for recursive convertation from mobx-observable & plain objects

Signed-off-by: Roman <ixrock@gmail.com>

src/common/utils/__tests__/toJS.test.ts

@@ -0,0 +1,25 @@
+import { isObservable, observable } from "mobx";
+import { toJS } from "../toJS";
+
+describe("utils/toJS(data: any)", () => {
+  const y = { y: 2 };
+
+  const data = observable({ x: 1, y }, {}, {
+    deep: false, // this will keep ref to "y"
+  });
+  const data2 = {
+    x: 1,  // partially observable
+    y: observable(y),
+  };
+
+  test("converts mobx-observable to corresponding js struct with links preserving", () => {
+    expect(toJS(data).y).toBe(y);
+    expect(isObservable(toJS(data).y)).toBeFalsy();
+  });
+
+  test("converts partially observable js struct", () => {
+    expect(toJS(data2).y).not.toBe(y);
+    expect(toJS(data2).y).toEqual(y);
+    expect(isObservable(toJS(data2).y)).toBeFalsy();
+  });
+});

src/common/utils/toJS.ts

@@ -0,0 +1,25 @@
+// Converts mobx-observable or partially observable object to corresponding plain JS-structure.
+// Since mobx >= 6.x toJS() recursively converts only top-level observables.
+import * as mobx from "mobx";
+
+export function toJS<T>(data: T): T {
+  if (mobx.isObservable(data)) {
+    return mobx.toJS(data); // data recursively converted, nothing to worry about.
+  }
+
+  // convert top-level plain array or object
+  if (typeof data === "object" && data !== null) {
+    let convertedData: any[] | T;
+
+    if (Array.isArray(data)) {
+      convertedData = data.map(toJS);
+    } else {
+      convertedData = Object.fromEntries(
+        Object.entries(data).map(([key, value]) => [key, toJS(value)])
+      ) as T;
+    }
+    Object.assign(data, convertedData);
+  }
+
+  return data;
+}