progress

src/client/App.tsx

@@ -1,3 +1,4 @@
+import "mobx-react/batchingForReactDom";
 import { StoreProvider } from "client/contexts/storeContext";
 import theme from "client/UIKit/theme";
 import React from "react";

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

@@ -29,7 +29,7 @@ export default [
         name: "tbxSecond",
         Component: withTitle("Sum")(Input),
         props: {
-          readOnly: true,
+          readonly: true,
           getValue: (calculationStore: CalculationStore) => {
             const price = calculationStore.getValue("price");
             const one = calculationStore.getValue("one");

src/client/Containers/Calculation/index.jsx

@@ -1,18 +1,22 @@
 import Background from "client/Elements/Background";
-import React from "react";
+import React, { useState } from "react";
 import Sections from "./Sections";
 
+import { Tabs } from "antd";
+const { TabPane } = Tabs;
+
 const Calculation = () => {
   return (
     <Background>
-      {Sections.map(({ title, elements }, i) => (
-        <div key={i}>
-          <p>{title}</p>
-          {elements.map(({ Component, props }, ie) => {
-            return <Component {...props} key={ie} />;
-          })}
-        </div>
-      ))}
+      <Tabs type="line">
+        {Sections.map(({ title, elements }, i) => (
+          <TabPane tab={title} key={i}>
+            {elements.map(({ Component, props }, ie) => {
+              return <Component {...props} key={ie} />;
+            })}
+          </TabPane>
+        ))}
+      </Tabs>
     </Background>
   );
 };

src/client/Effects/index.ts

@@ -4,19 +4,17 @@ import { TEffect } from "core/types/effect";
 export const testEffectForPrice: TEffect = async (
   calculationStore: CalculationStore
 ) => {
-  console.log("price");
   const price = calculationStore.getValue("price");
-  if (price > 5000) {
-    calculationStore.setValue("one", 500);
+  if (parseInt(price) > 5000) {
+    calculationStore.setValue("one", 200);
   }
 };
 
 export const testEffectForOne: TEffect = async (
   calculationStore: CalculationStore
 ) => {
-  console.log("one");
   const one = calculationStore.getValue("one");
-  if (one > 1000) {
+  if (parseInt(one) > 1000) {
     calculationStore.setValue("price", 100500);
   }
 };

src/client/Elements/Input.jsx

@@ -1,39 +1,58 @@
 import React, { useState, useEffect } from "react";
 import { Input as AntInput } from "antd";
 import { useDebounce } from "use-debounce";
-import { useObserver } from "mobx-react";
+import { useObserver, observer } from "mobx-react";
 import { useStores } from "client/hooks/useStores";
 import runEffects from "client/tools/runEffects";
 
-const Input = ({ placeholder, sourceValueName, getValue, Effects }) => {
+const Input = ({
+  readonly,
+  placeholder,
+  sourceValueName,
+  getValue,
+  Effects,
+}) => {
   const { calculationStore } = useStores();
   const [currentValue, setCurrentValue] = useState(undefined);
-  const [debouncedValue] = useDebounce(currentValue, 800);
+  const [debouncedValue] = useDebounce(currentValue, 850);
+  const sourceValue = calculationStore.getValue(sourceValueName);
 
+  // get Values
   useEffect(() => {
     if (sourceValueName) {
-      setCurrentValue(calculationStore.getValue(sourceValueName));
-    }
-  }, [sourceValueName]);
-
-  useEffect(() => {
-    if (sourceValueName) {
-      if (debouncedValue) {
-        calculationStore.setValue(sourceValueName, debouncedValue);
-        runEffects(Effects, calculationStore);
+      if (sourceValue) {
+        setCurrentValue(sourceValue);
       }
     }
+    if (getValue) {
+      const value = getValue(calculationStore);
+      setCurrentValue(value);
+    }
+  }, [sourceValue]);
+
+  // run Effects
+  useEffect(() => {
+    if (Effects && Effects.length > 0) {
+      runEffects(Effects, calculationStore);
+    }
+
+    if (sourceValueName && debouncedValue) {
+      calculationStore.setValue(sourceValueName, debouncedValue);
+    }
+    console.log(calculationStore.values);
   }, [debouncedValue]);
 
-  return useObserver(() => (
+  return (
     <AntInput
       placeholder={placeholder}
-      value={sourceValueName ? currentValue : getValue(calculationStore)}
+      value={getValue ? getValue(calculationStore) : currentValue}
       onChange={(e) => {
-        setCurrentValue(e.target.value);
+        if (!readonly) {
+          setCurrentValue(e.target.value);
+        }
       }}
     />
-  ));
+  );
 };
 
-export default Input;
+export default observer(Input);

src/client/tools/runEffects.js

@@ -1,5 +1,4 @@
 async function runEffects(effects, calculationStore) {
-  console.log(effects);
   if (effects && effects.length > 0) {
     for (let effect of effects) {
       try {

src/core/config/initialValues.ts

@@ -2,7 +2,7 @@ import { ValuesMap } from "core/types/values";
 
 const initialValues: ValuesMap = {
   price: 10000,
-  one: 0,
+  // one: 0,
 };
 
 export default initialValues;