diff --git a/package.json b/package.json index 8779df4..dc400b8 100644 --- a/package.json +++ b/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", diff --git a/stores/calculation/options/hooks.js b/stores/calculation/options/hooks.js index a87cef4..beb95e9 100644 --- a/stores/calculation/options/hooks.js +++ b/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(), }; } diff --git a/stores/calculation/options/index.ts b/stores/calculation/options/index.ts index e2c87a8..d1c6119 100644 --- a/stores/calculation/options/index.ts +++ b/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; }; diff --git a/stores/calculation/statuses/hooks.js b/stores/calculation/statuses/hooks.js index bb67fff..6df7674 100644 --- a/stores/calculation/statuses/hooks.js +++ b/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(), }; } diff --git a/stores/calculation/statuses/index.ts b/stores/calculation/statuses/index.ts index cfb4e7f..2fc8764 100644 --- a/stores/calculation/statuses/index.ts +++ b/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; }; diff --git a/stores/calculation/validation/hooks.js b/stores/calculation/validation/hooks.js index 2d77fb0..1ff08af 100644 --- a/stores/calculation/validation/hooks.js +++ b/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(); } diff --git a/stores/calculation/validation/index.ts b/stores/calculation/validation/index.ts index 004f607..afd6872 100644 --- a/stores/calculation/validation/index.ts +++ b/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([]); diff --git a/stores/calculation/values/hooks.js b/stores/calculation/values/hooks.js index 54bf7c5..eed4937 100644 --- a/stores/calculation/values/hooks.js +++ b/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, }; } diff --git a/stores/calculation/values/index.ts b/stores/calculation/values/index.ts index 9da8b43..464f816 100644 --- a/stores/calculation/values/index.ts +++ b/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(elementName: E) { const valueName = getValueName(elementName); return this.getValue(valueName) as ElementsTypes[E] | undefined; diff --git a/yarn.lock b/yarn.lock index 9c25ea0..d48b09f 100644 --- a/yarn.lock +++ b/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"