make usestore hook more universal

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

@@ -1,5 +1,6 @@
 import Input from 'client/Elements/Input';
 import withTitle from 'client/hocs/withTitle';
+import Checkbox from 'client/Elements/Checkbox';
 
 export default [
   {
@@ -39,6 +40,13 @@ export default [
           addonBefore: 'addon',
           computedValue: 'total'
         }
+      },
+      {
+        name: 'cbx',
+        Component: withTitle('Checkbox')(Checkbox),
+        props: {
+          valueName: 'cbx'
+        }
       }
     ]
   },
@@ -49,6 +57,7 @@ export default [
         name: 'priceonAnotherTab',
         Component: withTitle('Price on another tab')(Input),
         props: {
+          type: 'number',
           valueName: 'price'
         }
       }

src/client/Elements/Checkbox.jsx

@@ -0,0 +1,21 @@
+import { Checkbox as AntCheckbox } from 'antd';
+import { useStoreValue } from 'client/hooks/useStoreValue';
+import React from 'react';
+import { observer } from 'mobx-react';
+
+const Checkbox = ({ readonly, valueName, computedValue }) => {
+  const { value, setCurrentValue } = useStoreValue({
+    computedValue,
+    valueName
+  });
+
+  return (
+    <AntCheckbox
+      readonly={readonly}
+      checked={value}
+      onChange={e => setCurrentValue(e.target.checked)}
+    />
+  );
+};
+
+export default observer(Checkbox);

src/client/Elements/Input.jsx

@@ -17,7 +17,10 @@ const Input = ({
   valueName,
   computedValue
 }) => {
-  const { value, handleOnChange } = useStoreValue({ computedValue, valueName });
+  const { value, setCurrentValue } = useStoreValue({
+    computedValue,
+    valueName
+  });
 
   if (type === 'number') {
     return (
@@ -31,7 +34,7 @@ const Input = ({
         step={step}
         formatter={formatter}
         parser={parser}
-        onChange={handleOnChange}
+        onChange={value => setCurrentValue(value)}
         value={value}
       />
     );
@@ -43,7 +46,7 @@ const Input = ({
         readOnly={readonly}
         placeholder={placeholder}
         value={value}
-        onChange={handleOnChange}
+        onChange={e => setCurrentValue(e.target.value)}
       />
     );
   }
@@ -56,7 +59,7 @@ const Input = ({
       type={type}
       placeholder={placeholder}
       value={value}
-      onChange={handleOnChange}
+      onChange={e => setCurrentValue(e.target.value)}
     />
   );
 };

src/client/hooks/useStoreValue.js

@@ -28,9 +28,5 @@ export const useStoreValue = ({ computedValue, valueName }) => {
     ? calculationStore[computedValue]()
     : currentValue;
 
-  function handleOnChange(value) {
-    setCurrentValue(value);
-  }
-
-  return { value, handleOnChange };
+  return { value, setCurrentValue };
 };

src/client/stores/CalculationStore/Effects/reaction.ts

@@ -8,6 +8,10 @@ const reactionEffects: IReactionEffect[] = [
   calculationStore => ({
     expression: () => calculationStore.values.price,
     effect: price => console.log('price: ', price)
+  }),
+  calculationStore => ({
+    expression: () => calculationStore.values.cbx,
+    effect: cbx => console.log('cbx: ', cbx)
   })
 ];
 

src/client/stores/CalculationStore/index.ts

@@ -30,6 +30,4 @@ const CalculationStore = observable(
   )
 );
 
-console.log(CalculationStore);
-
 export default CalculationStore;

src/core/config/initialValues.ts

@@ -1,7 +1,8 @@
-import { ValuesMap } from "core/types/values";
+import { ValuesMap } from 'core/types/values';
 
 const initialValues: ValuesMap = {
   price: 10000,
+  cbx: false
   // one: 0,
 };
 

src/core/types/values.ts

@@ -1,4 +1,4 @@
-export type ValuesNames = "one" | "two" | "three" | "price";
+export type ValuesNames = 'one' | 'two' | 'three' | 'price' | 'cbx';
 
 export type ValuesMap = {
   [valueName in ValuesNames]?: any;