diff --git a/src/client/Containers/Calculation/Sections/index.ts b/src/client/Containers/Calculation/Sections/index.ts index 029cb7a..572b8e4 100644 --- a/src/client/Containers/Calculation/Sections/index.ts +++ b/src/client/Containers/Calculation/Sections/index.ts @@ -39,4 +39,16 @@ export default [ }, ], }, + { + title: "SecondSection", + elements: [ + { + name: "priceonAnotherTab", + Component: withTitle("Price on another tab")(Input), + props: { + sourceValueName: "price", + }, + }, + ], + }, ]; diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index 79ea739..d12b1cd 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/src/client/Containers/Calculation/index.jsx @@ -3,6 +3,7 @@ import React, { useState } from "react"; import Sections from "./Sections"; import { Tabs } from "antd"; +import { Box } from "client/UIKit/grid"; const { TabPane } = Tabs; const Calculation = () => { @@ -12,7 +13,11 @@ const Calculation = () => { {Sections.map(({ title, elements }, i) => ( {elements.map(({ Component, props }, ie) => { - return ; + return ( + + + + ); })} ))} diff --git a/src/client/Effects/index.ts b/src/client/Effects/index.ts index 1ef37ae..fa9e4ff 100644 --- a/src/client/Effects/index.ts +++ b/src/client/Effects/index.ts @@ -4,6 +4,7 @@ import { TEffect } from "core/types/effect"; export const testEffectForPrice: TEffect = async ( calculationStore: CalculationStore ) => { + console.log("priceEffect"); const price = calculationStore.getValue("price"); if (parseInt(price) > 5000) { calculationStore.setValue("one", 200); diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx index 1e8dbe4..d0a3a8b 100644 --- a/src/client/Elements/Input.jsx +++ b/src/client/Elements/Input.jsx @@ -1,9 +1,9 @@ -import React, { useState, useEffect } from "react"; import { Input as AntInput } from "antd"; -import { useDebounce } from "use-debounce"; -import { useObserver, observer } from "mobx-react"; import { useStores } from "client/hooks/useStores"; import runEffects from "client/tools/runEffects"; +import { observer } from "mobx-react"; +import React, { useEffect, useState } from "react"; +import { useDebounce } from "use-debounce"; const Input = ({ readonly, @@ -26,16 +26,16 @@ const Input = ({ } }, [sourceValue, sourceValueName]); - // run Effects + // set Value to global store and run Effects useEffect(() => { - if (Effects && Effects.length > 0) { - runEffects(Effects, calculationStore); - } - if (sourceValueName && debouncedValue) { - calculationStore.setValue(sourceValueName, debouncedValue); + calculationStore.setValue(sourceValueName, debouncedValue).then(() => { + if (Effects && Effects.length > 0) { + runEffects(Effects, calculationStore); + } + }); } - }, [debouncedValue, sourceValueName]); + }, [debouncedValue]); return ( this.values[sourceValueName]; - setValue = action((sourceValueName: SourceValueNames, newValue: any) => { - this.values[sourceValueName] = newValue; - // TODO: Run effect here - }); + setValue = action( + async (sourceValueName: SourceValueNames, newValue: any) => { + this.values[sourceValueName] = newValue; + // TODO: Run effect here + } + ); getStatus = (elementName: string) => this.statuses[elementName]; setStatus = action((elementName: string, status: Status) => {