create useStoreValue hook

src/client/Containers/Calculation/Sections/index.js

@@ -16,7 +16,7 @@ export default [
           formatter: value => `% ${value}`,
           parser: value => value.replace('%', '').trim(),
           placeholder: 'Enter price',
-          bindedValueName: 'price'
+          valueName: 'price'
         }
       },
       {
@@ -25,7 +25,7 @@ export default [
         props: {
           type: 'number',
           placeholder: 'Enter one',
-          bindedValueName: 'one',
+          valueName: 'one',
           step: 10
         }
       },
@@ -49,7 +49,7 @@ export default [
         name: 'priceonAnotherTab',
         Component: withTitle('Price on another tab')(Input),
         props: {
-          bindedValueName: 'price'
+          valueName: 'price'
         }
       }
     ]

src/client/Elements/Input.jsx

@@ -1,9 +1,7 @@
 import { Input as AntInput, InputNumber as AntInputNumber } from 'antd';
-import { useStores } from 'client/hooks/useStores';
+import { useStoreValue } from 'client/hooks/useStoreValue';
 import { observer } from 'mobx-react';
-import React, { useEffect, useState } from 'react';
-import { useDebounce } from 'use-debounce';
-import { DEBOUNCE_DELAY } from '../../constants/debounce';
+import React from 'react';
 
 const Input = ({
   readonly,
@@ -16,32 +14,10 @@ const Input = ({
   placeholder,
   addonBefore,
   addonAfter,
-  bindedValueName,
+  valueName,
   computedValue
 }) => {
-  const { calculationStore } = useStores();
-  const [currentValue, setCurrentValue] = useState(undefined);
-  const [debouncedValue] = useDebounce(currentValue, DEBOUNCE_DELAY);
-
-  const sourceValue = calculationStore.values[bindedValueName];
-
-  // get value from store
-  useEffect(() => {
-    if (!computedValue) {
-      setCurrentValue(sourceValue);
-    }
-  }, [computedValue, sourceValue]);
-
-  // set value to store
-  useEffect(() => {
-    if (!computedValue) {
-      calculationStore.setValue(bindedValueName, debouncedValue);
-    }
-  }, [calculationStore, computedValue, debouncedValue, bindedValueName]);
-
-  function handleOnChange(value) {
-    setCurrentValue(value);
-  }
+  const { value, handleOnChange } = useStoreValue({ computedValue, valueName });
 
   if (type === 'number') {
     return (
@@ -56,7 +32,7 @@ const Input = ({
         formatter={formatter}
         parser={parser}
         onChange={handleOnChange}
-        value={computedValue ? calculationStore[computedValue]() : currentValue}
+        value={value}
       />
     );
   }
@@ -66,7 +42,7 @@ const Input = ({
       <AntInput.TextArea
         readOnly={readonly}
         placeholder={placeholder}
-        value={computedValue ? calculationStore[computedValue]() : currentValue}
+        value={value}
         onChange={handleOnChange}
       />
     );
@@ -79,7 +55,7 @@ const Input = ({
       readOnly={readonly}
       type={type}
       placeholder={placeholder}
-      value={computedValue ? calculationStore[computedValue]() : currentValue}
+      value={value}
       onChange={handleOnChange}
     />
   );

src/client/hooks/useStoreValue.js

@@ -0,0 +1,36 @@
+import { useStores } from './useStores';
+import { useState, useEffect } from 'react';
+import { useDebounce } from 'use-debounce/lib';
+import { DEBOUNCE_DELAY } from 'constants/debounce';
+
+export const useStoreValue = ({ computedValue, valueName }) => {
+  const { calculationStore } = useStores();
+  const [currentValue, setCurrentValue] = useState(undefined);
+  const [debouncedValue] = useDebounce(currentValue, DEBOUNCE_DELAY);
+
+  const sourceValue = calculationStore.values[valueName];
+
+  // get value from store
+  useEffect(() => {
+    if (!computedValue) {
+      setCurrentValue(sourceValue);
+    }
+  }, [computedValue, sourceValue]);
+
+  // set value to store
+  useEffect(() => {
+    if (!computedValue) {
+      calculationStore.setValue(valueName, debouncedValue);
+    }
+  }, [calculationStore, computedValue, debouncedValue, valueName]);
+
+  const value = computedValue
+    ? calculationStore[computedValue]()
+    : currentValue;
+
+  function handleOnChange(value) {
+    setCurrentValue(value);
+  }
+
+  return { value, handleOnChange };
+};