From 2267ce36ad750b806de4789d919910192e8eff9c Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Tue, 17 May 2022 18:30:47 +0300
Subject: [PATCH] stores: fix hooks and elements

---
 Elements/Input.tsx                     |  2 +-
 Elements/InputNumber.tsx               |  2 +-
 Elements/Radio.tsx                     |  2 +-
 Elements/Select.tsx                    |  2 +-
 stores/calculation/validation/hooks.js |  6 ++--
 stores/calculation/values/hooks.js     | 45 +++++++++++++++++++-------
 6 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/Elements/Input.tsx b/Elements/Input.tsx
index 3757659..256efec 100644
--- a/Elements/Input.tsx
+++ b/Elements/Input.tsx
@@ -15,7 +15,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Input
-        defaultValue={value}
+        value={value}
         onChange={(e) => setValue(e.target.value)}
         disabled={status === 'Disabled'}
         {...props}
diff --git a/Elements/InputNumber.tsx b/Elements/InputNumber.tsx
index ed5db40..39b7ce5 100644
--- a/Elements/InputNumber.tsx
+++ b/Elements/InputNumber.tsx
@@ -21,7 +21,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <InputNumber
-        defaultValue={value}
+        value={value}
         onChange={(val) => setValue(val)}
         disabled={status === 'Disabled'}
         parser={parser}
diff --git a/Elements/Radio.tsx b/Elements/Radio.tsx
index c494615..1d8d3b6 100644
--- a/Elements/Radio.tsx
+++ b/Elements/Radio.tsx
@@ -20,7 +20,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Radio.Group
-        defaultValue={value}
+        value={value}
         options={options}
         onChange={(e) => setValue(e.target.value)}
         disabled={status === 'Disabled'}
diff --git a/Elements/Select.tsx b/Elements/Select.tsx
index 9018450..121face 100644
--- a/Elements/Select.tsx
+++ b/Elements/Select.tsx
@@ -20,7 +20,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Select
-        defaultValue={value}
+        value={value}
         onChange={(val) => setValue(val)}
         disabled={status === 'Disabled'}
         loading={status === 'Loading'}
diff --git a/stores/calculation/validation/hooks.js b/stores/calculation/validation/hooks.js
index 49dfe04..9e20313 100644
--- a/stores/calculation/validation/hooks.js
+++ b/stores/calculation/validation/hooks.js
@@ -9,10 +9,10 @@ export function useValidation(elementName) {
   const validationResult = useMemo(
     () => computed(() => $calculation.$validation.getValidation(elementName)),
     [$calculation.$validation, elementName]
-  );
+  ).get();
 
   return {
-    ...validationResult.get(),
-    help: 'Некорректные данные',
+    ...validationResult,
+    help: validationResult.isValid === false ? 'Некорректные данные' : null,
   };
 }
diff --git a/stores/calculation/values/hooks.js b/stores/calculation/values/hooks.js
index 999591a..2e5db48 100644
--- a/stores/calculation/values/hooks.js
+++ b/stores/calculation/values/hooks.js
@@ -1,30 +1,53 @@
-/* eslint-disable import/prefer-default-export */
 import { computed } from 'mobx';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStore } from 'stores/hooks';
 import { useDebouncedCallback } from 'use-debounce';
 
-const DEBOUNCE_DELAY = 350;
+const WAIT = 350;
+const MAX_WAIT = 1500;
 
 export function useValue(valueName) {
+  const [value, setValue] = useState();
+
   const { $calculation } = useStore();
 
+  const setStoreValue = useCallback(
+    (val) => $calculation.$values.setValue(valueName, val),
+    [$calculation.$values, valueName]
+  );
+  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, WAIT, {
+    maxWait: MAX_WAIT,
+  });
+
+  /** Set local value to global store */
+  useEffect(() => {
+    debouncedSetStoreValue(value);
+  }, [debouncedSetStoreValue, value]);
+
   const storeValue = useMemo(
     () => computed(() => $calculation.$values.getValue(valueName)),
     [$calculation.$values, valueName]
+  ).get();
+
+  /** Set initial value from global store to local state (only once) */
+  useEffect(
+    () => {
+      setValue(storeValue);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
-  const setStoreValue = useDebouncedCallback(
-    (value) => $calculation.$values.setValue(valueName, value),
-    DEBOUNCE_DELAY,
-    {
-      maxWait: 2000,
+  /** Get global store value and set it to local state */
+  useEffect(() => {
+    if (!debouncedSetStoreValue.isPending()) {
+      setValue(storeValue);
     }
-  );
+  }, [debouncedSetStoreValue, storeValue]);
 
   return {
-    value: storeValue.get(),
-    setValue: setStoreValue,
+    value,
+    setValue,
   };
 }