From a8931d858d3ce0a1a2c430049fb0fd37ce74016b Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 2 Sep 2020 17:36:13 +0300
Subject: [PATCH] make usestore hook more universal

---
 .../Containers/Calculation/Sections/index.js  |  9 ++++++++
 src/client/Elements/Checkbox.jsx              | 21 +++++++++++++++++++
 src/client/Elements/Input.jsx                 | 11 ++++++----
 src/client/hooks/useStoreValue.js             |  6 +-----
 .../CalculationStore/Effects/reaction.ts      |  4 ++++
 src/client/stores/CalculationStore/index.ts   |  2 --
 src/core/config/initialValues.ts              |  3 ++-
 src/core/types/values.ts                      |  2 +-
 8 files changed, 45 insertions(+), 13 deletions(-)
 create mode 100644 src/client/Elements/Checkbox.jsx

diff --git a/src/client/Containers/Calculation/Sections/index.js b/src/client/Containers/Calculation/Sections/index.js
index bada7e9..85128db 100644
--- a/src/client/Containers/Calculation/Sections/index.js
+++ b/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'
         }
       }
diff --git a/src/client/Elements/Checkbox.jsx b/src/client/Elements/Checkbox.jsx
new file mode 100644
index 0000000..dc4714d
--- /dev/null
+++ b/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);
diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx
index 09c4665..4291f83 100644
--- a/src/client/Elements/Input.jsx
+++ b/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)}
     />
   );
 };
diff --git a/src/client/hooks/useStoreValue.js b/src/client/hooks/useStoreValue.js
index 192530d..7a53c78 100644
--- a/src/client/hooks/useStoreValue.js
+++ b/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 };
 };
diff --git a/src/client/stores/CalculationStore/Effects/reaction.ts b/src/client/stores/CalculationStore/Effects/reaction.ts
index cc8c21d..e8aa50f 100644
--- a/src/client/stores/CalculationStore/Effects/reaction.ts
+++ b/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)
   })
 ];
 
diff --git a/src/client/stores/CalculationStore/index.ts b/src/client/stores/CalculationStore/index.ts
index b5be97a..296a47e 100644
--- a/src/client/stores/CalculationStore/index.ts
+++ b/src/client/stores/CalculationStore/index.ts
@@ -30,6 +30,4 @@ const CalculationStore = observable(
   )
 );
 
-console.log(CalculationStore);
-
 export default CalculationStore;
diff --git a/src/core/config/initialValues.ts b/src/core/config/initialValues.ts
index 189be6f..12a034b 100644
--- a/src/core/config/initialValues.ts
+++ b/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,
 };
 
diff --git a/src/core/types/values.ts b/src/core/types/values.ts
index c7f7a71..e2f2976 100644
--- a/src/core/types/values.ts
+++ b/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;