From c193ad5f820dc9d5180e8e08e7f0570c615e7bc5 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 1 Jun 2022 14:03:33 +0300
Subject: [PATCH] builders: fix update component value from store fix debounce
 for options components

---
 .../Calculation/builders/build-options.tsx    |  5 ++--
 .../Calculation/builders/build-value.tsx      | 12 ++++----
 Components/Calculation/builders/hooks.js      | 28 +++++++++++++++++++
 Elements/InputNumber.tsx                      |  7 +----
 stores/calculation/values/hooks.js            | 20 ++++---------
 5 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 Components/Calculation/builders/hooks.js

diff --git a/Components/Calculation/builders/build-options.tsx b/Components/Calculation/builders/build-options.tsx
index ae89432..88aeff4 100644
--- a/Components/Calculation/builders/build-options.tsx
+++ b/Components/Calculation/builders/build-options.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react';
 import { useOptions } from 'stores/calculation/options/hooks';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useSetValue, useValue } from 'stores/calculation/values/hooks';
 import type { Values } from 'stores/calculation/values/types';
 import type { Elements } from '../config/map/values';
 import type { ElementsProps } from '../types/elements-props';
+import { useStoreValue } from './hooks';
 
 type BuilderProps = {
   elementName: Elements;
@@ -15,8 +15,7 @@ type BuilderProps = {
 
 export default function buildOptions(Component: FC<any>, { elementName, valueName }: BuilderProps) {
   return observer<ElementsProps[typeof elementName]>((props) => {
-    const value = useValue(valueName);
-    const setValue = useSetValue(valueName);
+    const [value, setValue] = useStoreValue(valueName);
     const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
     const options = useOptions(elementName);
diff --git a/Components/Calculation/builders/build-value.tsx b/Components/Calculation/builders/build-value.tsx
index fb2f0bc..a33065f 100644
--- a/Components/Calculation/builders/build-value.tsx
+++ b/Components/Calculation/builders/build-value.tsx
@@ -1,28 +1,30 @@
 import { observer } from 'mobx-react-lite';
 import type { FC } from 'react';
+import { useOptions } from 'stores/calculation/options/hooks';
 import { useStatus } from 'stores/calculation/statuses/hooks';
 import { useValidation } from 'stores/calculation/validation/hooks';
-import { useSetValue, useValue } from 'stores/calculation/values/hooks';
 import type { Values } from 'stores/calculation/values/types';
 import type { Elements } from '../config/map/values';
 import type { ElementsProps } from '../types/elements-props';
+import { useStoreValue } from './hooks';
 
-type BuilderProps = {
+export type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
 export default function buildValue(Component: FC<any>, { elementName, valueName }: BuilderProps) {
   return observer<ElementsProps[typeof elementName]>((props) => {
-    const value = useValue(valueName);
-    const setValue = useSetValue(valueName);
+    const [value, setValue] = useStoreValue(valueName);
     const status = useStatus(elementName);
     const { isValid, help } = useValidation(elementName);
+    const options = useOptions(elementName);
 
     return (
       <Component
-        defaultValue={value}
+        value={value}
         setValue={setValue}
+        options={options}
         status={status}
         isValid={isValid}
         help={help}
diff --git a/Components/Calculation/builders/hooks.js b/Components/Calculation/builders/hooks.js
new file mode 100644
index 0000000..9d3390c
--- /dev/null
+++ b/Components/Calculation/builders/hooks.js
@@ -0,0 +1,28 @@
+/* eslint-disable import/prefer-default-export */
+import { useEffect, useState } from 'react';
+import { useValue } from 'stores/calculation/values/hooks';
+import { useDebouncedCallback } from 'use-debounce';
+
+export function useStoreValue(valueName) {
+  const [storeValue, setStoreValue] = useValue(valueName);
+  const [value, setValue] = useState(storeValue);
+
+  // eslint-disable-next-line object-curly-newline
+  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 });
+
+  useEffect(
+    () => {
+      if (storeValue !== value) {
+        debouncedSetStoreValue(value);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  useEffect(() => {
+    setValue(storeValue);
+  }, [storeValue]);
+
+  return [value, setValue];
+}
diff --git a/Elements/InputNumber.tsx b/Elements/InputNumber.tsx
index cc1f2ce..b9d1c4c 100644
--- a/Elements/InputNumber.tsx
+++ b/Elements/InputNumber.tsx
@@ -13,12 +13,7 @@ export default function InputNumber({
 }: BaseElementProps<number>) {
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
-      <AntInputNumber
-        type="number"
-        onChange={setValue}
-        disabled={status === 'Disabled'}
-        {...props}
-      />
+      <AntInputNumber onChange={setValue} disabled={status === 'Disabled'} {...props} />
     </FormItem>
   );
 }
diff --git a/stores/calculation/values/hooks.js b/stores/calculation/values/hooks.js
index c3d2e58..cc5de75 100644
--- a/stores/calculation/values/hooks.js
+++ b/stores/calculation/values/hooks.js
@@ -1,25 +1,15 @@
 import { useStore } from 'stores/hooks';
-import { useDebouncedCallback } from 'use-debounce';
 
 export function useValue(valueName) {
   const { $calculation } = useStore();
-  const value = $calculation.$values.getValue(valueName);
 
-  return value;
-}
+  const storeValue = $calculation.$values.getValue(valueName);
 
-export function useSetValue(valueName) {
-  const { $calculation } = useStore();
+  function setStoreValue(value) {
+    $calculation.$values.setValue(valueName, value);
+  }
 
-  const debouncedSetStoreValue = useDebouncedCallback(
-    (value) => $calculation.$values.setValue(valueName, value),
-    350,
-    {
-      maxWait: 1500,
-    }
-  );
-
-  return debouncedSetStoreValue;
+  return [storeValue, setStoreValue];
 }
 
 export function useComputedValue(valueName) {