From 7af318617f2f8ff6825d527a1d8a7976311808a2 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Sat, 14 May 2022 15:14:13 +0300
Subject: [PATCH] stores(validation): fix useValidation hook

---
 stores/calculation/validation/hooks.js |  2 +-
 stores/calculation/validation/index.ts | 35 ++++++++++++++------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/stores/calculation/validation/hooks.js b/stores/calculation/validation/hooks.js
index e239ef5..2d77fb0 100644
--- a/stores/calculation/validation/hooks.js
+++ b/stores/calculation/validation/hooks.js
@@ -3,6 +3,6 @@ import { useStore } from 'stores/hooks';
 
 export function useValidation(elementName) {
   const { $calculation } = useStore();
-  const validationResult = $calculation.$validation.getValidation(elementName);
+  const validationResult = $calculation.$validation.observeValidation(elementName);
   return validationResult;
 }
diff --git a/stores/calculation/validation/index.ts b/stores/calculation/validation/index.ts
index 14c0381..004f607 100644
--- a/stores/calculation/validation/index.ts
+++ b/stores/calculation/validation/index.ts
@@ -3,12 +3,13 @@
 /* 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';
 
 export default class ValidationStore {
   root: RootStore;
-  #messages: Partial<Messages> = {};
+  messages: Partial<Messages> = {};
 
   constructor(rootStore: RootStore) {
     makeAutoObservable(this);
@@ -17,34 +18,36 @@ export default class ValidationStore {
 
   getValidation(elementName: Elements) {
     return {
-      isValid: !this.#messages[elementName]?.length,
-      messages: this.#messages[elementName]?.map((x) => x.text),
+      isValid: !this.messages[elementName]?.length,
+      messages: this.messages[elementName]?.map((x) => x.text),
     };
   }
 
-  addError(elementName: Elements, error: Error) {
-    if (!this.#messages[elementName]) this.#messages[elementName] = observable([]);
+  observeValidation = computedFn((elementName: Elements) => this.getValidation(elementName));
 
-    const errorIndex = this.#messages[elementName]?.findIndex((x) => x.name === error.name);
+  addError = (elementName: Elements, error: Error) => {
+    if (!this.messages[elementName]) this.messages[elementName] = observable([]);
+
+    const errorIndex = this.messages[elementName]?.findIndex((x) => x.name === error.name);
     const hasError = errorIndex !== undefined && errorIndex !== -1;
 
     if (!hasError) {
-      this.#messages[elementName]?.push(error);
+      this.messages[elementName]?.push(error);
     } else {
-      this.#messages[elementName]?.splice(errorIndex, 1, error);
+      this.messages[elementName]?.splice(errorIndex, 1, error);
     }
 
     // TODO: call notification
 
     return () => this.#removeError(elementName, error.name);
-  }
+  };
 
-  #removeError(elementName: Elements, errorName: string) {
-    const messageIndex = this.#messages[elementName]?.findIndex((x) => x.name === errorName);
-    if (messageIndex) this.#messages[elementName]?.splice(messageIndex, 1);
-  }
+  #removeError = (elementName: Elements, errorName: string) => {
+    const messageIndex = this.messages[elementName]?.findIndex((x) => x.name === errorName);
+    if (messageIndex) this.messages[elementName]?.splice(messageIndex, 1);
+  };
 
-  clearErrors(elementName: Elements) {
-    this.#messages[elementName]?.clear();
-  }
+  clearErrors = (elementName: Elements) => {
+    this.messages[elementName]?.clear();
+  };
 }