diff --git a/stores/calculation/statuses/hooks.js b/stores/calculation/statuses/hooks.js index b6fe359..bb67fff 100644 --- a/stores/calculation/statuses/hooks.js +++ b/stores/calculation/statuses/hooks.js @@ -3,7 +3,7 @@ import { useStore } from 'stores/hooks'; export function useStatus(elementName) { const { $calculation } = useStore(); - const status = $calculation.$status.getStatus(elementName); + const status = $calculation.$status.observeStatus(elementName); return { status, }; diff --git a/stores/calculation/statuses/index.ts b/stores/calculation/statuses/index.ts index 641553d..cfb4e7f 100644 --- a/stores/calculation/statuses/index.ts +++ b/stores/calculation/statuses/index.ts @@ -2,12 +2,13 @@ /* 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'; export default class StatusStore { root: RootStore; - #statuses: CalculationStatuses = {}; + statuses: CalculationStatuses = {}; constructor(rootStore: RootStore) { makeAutoObservable(this); @@ -15,18 +16,20 @@ export default class StatusStore { } hydrate = (initialStatuses: CalculationStatuses) => { - this.#statuses = initialStatuses; + this.statuses = initialStatuses; }; getStatus(elementName: Elements) { - return this.#statuses[elementName]; + return this.statuses[elementName]; } - setStatus(elementName: Elements, status: Status) { - this.#statuses[elementName] = status; - } + observeStatus = computedFn((elementName: Elements) => this.getStatus(elementName)); - setStatuses(statuses: CalculationStatuses) { - this.#statuses = Object.assign(this.#statuses, statuses); - } + setStatus = (elementName: Elements, status: Status) => { + this.statuses[elementName] = status; + }; + + setStatuses = (statuses: CalculationStatuses) => { + this.statuses = Object.assign(this.statuses, statuses); + }; }