remove mobx-utils (replace with mobx computed)

package.json

@@ -25,7 +25,6 @@
     "lodash": "^4.17.21",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.4.0",
-    "mobx-utils": "^6.0.5",
     "next": "^12.1.6",
     "next-compose-plugins": "^2.2.1",
     "next-plugin-graphql": "^0.0.2",

stores/calculation/options/hooks.js

@@ -1,12 +1,17 @@
 /* eslint-disable import/prefer-default-export */
+import { computed } from 'mobx';
+import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useOptions(elementName) {
   const { $calculation } = useStore();
 
-  const options = $calculation.$options.observeOptions(elementName);
+  const options = useMemo(
+    () => computed(() => $calculation.$options.getOptions(elementName)),
+    [$calculation.$options, elementName]
+  );
 
   return {
-    options,
+    options: options.get(),
   };
 }

stores/calculation/options/index.ts

@@ -6,7 +6,6 @@
 import type { Elements } from 'Components/Calculation/config/map';
 import { mergeWith } from 'lodash';
 import { makeAutoObservable } from 'mobx';
-import { computedFn } from 'mobx-utils';
 import RootStore from 'stores/root';
 import { CalculationOptions, Filter, Options, OptionsFilters } from './types';
 
@@ -60,8 +59,6 @@ export default class OptionsStore {
     return filter ? options && filter(options) : options;
   }
 
-  observeOptions = computedFn((elementName: Elements) => this.getOptions(elementName));
-
   setOptions = (elementName: Elements, options: Options) => {
     this.options[elementName] = options;
   };

stores/calculation/statuses/hooks.js

@@ -1,10 +1,17 @@
 /* eslint-disable import/prefer-default-export */
+import { computed } from 'mobx';
+import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useStatus(elementName) {
   const { $calculation } = useStore();
-  const status = $calculation.$status.observeStatus(elementName);
+
+  const status = useMemo(
+    () => computed(() => $calculation.$status.getStatus(elementName)),
+    [$calculation.$status, elementName]
+  );
+
   return {
-    status,
+    status: status.get(),
   };
 }

stores/calculation/statuses/index.ts

@@ -2,7 +2,6 @@
 /* eslint-disable import/no-cycle */
 import type { Elements } from 'Components/Calculation/config/map';
 import { makeAutoObservable } from 'mobx';
-import { computedFn } from 'mobx-utils';
 import RootStore from 'stores/root';
 import type { CalculationStatuses, Status } from './types';
 
@@ -23,8 +22,6 @@ export default class StatusStore {
     return this.statuses[elementName];
   }
 
-  observeStatus = computedFn((elementName: Elements) => this.getStatus(elementName));
-
   setStatus = (elementName: Elements, status: Status) => {
     this.statuses[elementName] = status;
   };

stores/calculation/validation/hooks.js

@@ -1,8 +1,15 @@
 /* eslint-disable import/prefer-default-export */
+import { computed } from 'mobx';
+import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 
 export function useValidation(elementName) {
   const { $calculation } = useStore();
-  const validationResult = $calculation.$validation.observeValidation(elementName);
-  return validationResult;
+
+  const validationResult = useMemo(
+    () => computed(() => $calculation.$validation.getValidation(elementName)),
+    [$calculation.$validation, elementName]
+  );
+
+  return validationResult.get();
 }

stores/calculation/validation/index.ts

@@ -3,7 +3,6 @@
 /* eslint-disable object-curly-newline */
 import type { Elements } from 'Components/Calculation/config/map';
 import { makeAutoObservable, observable } from 'mobx';
-import { computedFn } from 'mobx-utils';
 import RootStore from 'stores/root';
 import type { Error, Messages } from './types';
 
@@ -23,8 +22,6 @@ export default class ValidationStore {
     };
   }
 
-  observeValidation = computedFn((elementName: Elements) => this.getValidation(elementName));
-
   addError = (elementName: Elements, error: Error) => {
     if (!this.messages[elementName]) this.messages[elementName] = observable([]);
 

stores/calculation/values/hooks.js

@@ -1,4 +1,6 @@
 /* eslint-disable import/prefer-default-export */
+import { computed } from 'mobx';
+import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -7,14 +9,23 @@ const DEBOUNCE_DELAY = 350;
 export function useValue(valueName) {
   const { $calculation } = useStore();
 
-  const storeValue = $calculation.$values.observeValue(valueName);
+  const storeValue = useMemo(
+    () => computed(() => $calculation.$values.getValue(valueName)),
+    [$calculation.$values, valueName]
+  );
 
-  const setStoreValue = useDebouncedCallback((value) => {
-    $calculation.$values.setValue(valueName, value);
-  }, DEBOUNCE_DELAY);
+  const setStoreValue = useDebouncedCallback(
+    (value) => {
+      $calculation.$values.setValue(valueName, value);
+    },
+    DEBOUNCE_DELAY,
+    {
+      maxWait: 2000,
+    }
+  );
 
   return {
-    value: storeValue,
+    value: storeValue.get(),
     setValue: setStoreValue,
   };
 }

stores/calculation/values/index.ts

@@ -4,7 +4,6 @@
 import type { Elements, ElementsTypes } from 'Components/Calculation/config/map';
 import { getValueName } from 'Components/Calculation/config/map';
 import { makeAutoObservable } from 'mobx';
-import { computedFn } from 'mobx-utils';
 import RootStore from '../../root';
 import type { CalculationValues, Values, ValuesTypes } from './types';
 
@@ -25,8 +24,6 @@ export default class ValuesStore {
     return this.values[valueName];
   }
 
-  observeValue = computedFn((valueName: Values) => this.getValue(valueName));
-
   getValueByElement<E extends Elements>(elementName: E) {
     const valueName = getValueName(elementName);
     return this.getValue(valueName) as ElementsTypes[E] | undefined;

yarn.lock

@@ -4029,11 +4029,6 @@ mobx-react-lite@^3.4.0:
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz#d59156a96889cdadad751e5e4dab95f28926dfff"
   integrity sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==
 
-mobx-utils@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.0.5.tgz#0cce9afb07fbba1fb559f959f8cea1f44baa7252"
-  integrity sha512-QOduwicYedD4mwYZRl8+c3BalljFDcubg+PUGqBkn8tOuBoj2q7GhjXBP6JXM9J+Zh+2mePK8IoToeLfqr3Z/w==
-
 mobx@^6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.5.0.tgz#dc2d028b1882737f6e813fc92454381e438b7ad3"