remove builder, debounce, style

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd": "^4.6.2",
     "axios": "^0.20.0",
     "body-parser": "^1.19.0",
     "class-validator": "^0.12.2",
@@ -40,6 +41,7 @@
     "ts-loader": "^8.0.2",
     "typeorm": "^0.2.25",
     "typescript": "~3.7.2",
+    "use-debounce": "^3.4.3",
     "webpack-cli": "^3.3.12"
   },
   "devDependencies": {

src/client/App.css

@@ -0,0 +1 @@
+@import "~antd/dist/antd.css";

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

@@ -1,5 +1,7 @@
-import { TitledInput } from "client/Elements/Input";
+import CalculationStore from "client/stores/CalculationStore";
+import withTitle from "client/hocs/withTitle";
 import { testEffectForPrice, testEffectForOne } from "client/Effects";
+import Input from "client/Elements/Input";
 
 export default [
   {
@@ -7,20 +9,34 @@ export default [
     elements: [
       {
         name: "tbxPrice",
-        title: "Цена",
-        Component: TitledInput,
-        // getValue: undefined,
+        Component: withTitle("Price")(Input),
+        props: {
+          placeholder: "Enter price",
           sourceValueName: "price",
           Effects: [testEffectForPrice],
         },
+      },
       {
         name: "tbxOne",
-        title: "One",
-        Component: TitledInput,
-        // getValue: undefined,
+        Component: withTitle("One")(Input),
+        props: {
+          placeholder: "Enter one",
           sourceValueName: "one",
           Effects: [testEffectForOne],
         },
+      },
+      {
+        name: "tbxSecond",
+        Component: withTitle("Sum")(Input),
+        props: {
+          readOnly: true,
+          getValue: (calculationStore: CalculationStore) => {
+            const price = calculationStore.getValue("price");
+            const one = calculationStore.getValue("one");
+            return parseInt(price) + parseInt(one);
+          },
+        },
+      },
     ],
   },
 ];

src/client/Containers/Calculation/index.jsx

@@ -1,7 +1,6 @@
 import Background from "client/Elements/Background";
 import React from "react";
 import Sections from "./Sections";
-import buildElement from "client/hocs/buildElement";
 
 const Calculation = () => {
   return (
@@ -9,9 +8,8 @@ const Calculation = () => {
       {Sections.map(({ title, elements }, i) => (
         <div key={i}>
           <p>{title}</p>
-          {elements.map((element, ie) => {
-            const Element = buildElement(element);
-            return <Element />;
+          {elements.map(({ Component, props }, ie) => {
+            return <Component {...props} key={ie} />;
           })}
         </div>
       ))}

src/client/Effects/index.ts

@@ -4,6 +4,7 @@ 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);
@@ -13,6 +14,7 @@ export const testEffectForPrice: TEffect = async (
 export const testEffectForOne: TEffect = async (
   calculationStore: CalculationStore
 ) => {
+  console.log("one");
   const one = calculationStore.getValue("one");
   if (one > 1000) {
     calculationStore.setValue("price", 100500);

src/client/Elements/Buttons.jsx

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-export const MenuButton = styled.button`
-  padding: 15px;
-  border: 0;
-  
-`;

src/client/Elements/Input.jsx

@@ -1,27 +1,39 @@
-import React from "react";
-import styled from "styled-components";
-import { Flex } from "client/UIKit/grid";
-import { IElementProps } from "core/types/elements";
+import React, { useState, useEffect } from "react";
+import { Input as AntInput } from "antd";
+import { useDebounce } from "use-debounce";
+import { useObserver } from "mobx-react";
+import { useStores } from "client/hooks/useStores";
+import runEffects from "client/tools/runEffects";
 
-export const TextInput = styled.input`
-  width: 200px;
-`;
+const Input = ({ placeholder, sourceValueName, getValue, Effects }) => {
+  const { calculationStore } = useStores();
+  const [currentValue, setCurrentValue] = useState(undefined);
+  const [debouncedValue] = useDebounce(currentValue, 800);
 
-const Title = styled.div`
-  margin: 5px 0;
-`;
+  useEffect(() => {
+    if (sourceValueName) {
+      setCurrentValue(calculationStore.getValue(sourceValueName));
+    }
+  }, [sourceValueName]);
 
-export const TitledInput = (props) => {
-  const { title, value, onChange } = props;
-  return (
-    <Flex flexDirection="column" mx="10px" my="5px">
-      {title && <Title>{title}</Title>}
-      <TextInput
+  useEffect(() => {
+    if (sourceValueName) {
+      if (debouncedValue) {
+        calculationStore.setValue(sourceValueName, debouncedValue);
+        runEffects(Effects, calculationStore);
+      }
+    }
+  }, [debouncedValue]);
+
+  return useObserver(() => (
+    <AntInput
+      placeholder={placeholder}
+      value={sourceValueName ? currentValue : getValue(calculationStore)}
       onChange={(e) => {
-          onChange(e);
+        setCurrentValue(e.target.value);
       }}
-        value={value}
     />
-    </Flex>
-  );
+  ));
 };
+
+export default Input;

src/client/Elements/Select.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const Select = (props) => {
-  const { options } = props;
-  if (!options || options.length === 0) {
-    return null;
-  }
-  return (
-    <select {...props}>
-      {options.map(({ value, text }) => (
-        <option value={value}>{text}</option>
-      ))}
-    </select>
-  );
-};
-
-export { Select };

src/client/Layout/index.jsx

@@ -1,10 +1,9 @@
 import paths from "client/common/paths";
-import { MenuButton } from "client/Elements/Buttons";
+import { LogoText } from "client/Elements/Text";
 import colors from "client/UIKit/colors";
 import { Box, Flex } from "client/UIKit/grid";
 import React from "react";
-import { Link, Route, Switch } from "react-router-dom";
-import { LogoText } from "client/Elements/Text";
+import { Route, Switch } from "react-router-dom";
 
 const Header = () => (
   <Flex style={styles.header}>
@@ -48,7 +47,9 @@ const styles = {
   },
   flex: { width: "100%" },
   header: {
-    backgroundColor: colors.violet.shades[700],
+    // backgroundColor: colors.violet.shades[700],
+    background:
+      "linear-gradient(90deg, rgba(69,0,198,1) 0%, rgba(205,0,231,1) 60%, rgba(163,2,184,1) 100%)",
     height: "50px",
     padding: "10px 12px",
     paddingLeft: "20px",

src/client/hocs/buildElement.tsx

@@ -1,47 +0,0 @@
-import { withStore } from "client/hocs/withStore";
-import CalculationStore from "client/stores/CalculationStore";
-import CommonStore from "client/stores/CommonStore";
-import { SourceValueNames } from "core/types/values";
-import { useObserver } from "mobx-react";
-import React, { ComponentType } from "react";
-import { useStores } from "client/hooks/useStores";
-
-type TElementBuilder = <P extends unknown>(data: {
-  name: string;
-  title: string;
-  Component: ComponentType<P>;
-  sourceValueName: SourceValueNames;
-  getValue: () => any;
-  Effects: Promise<void>[];
-  calculationStore: CalculationStore;
-  commonStore: CommonStore;
-}) => (props: P) => JSX.Element;
-
-const buildElement: TElementBuilder = ({
-  name,
-  title,
-  Component,
-  sourceValueName,
-  getValue,
-  Effects,
-  calculationStore,
-  commonStore,
-}) => (props) => {
-  const { calculationStore } = useStores();
-
-  return useObserver(() => (
-    <Component
-      {...props}
-      title={title}
-      value={calculationStore.getValue(sourceValueName)}
-      onChange={(e: any) => {
-        calculationStore.setValue(sourceValueName, e.target.value);
-        var effect = Effects[0];
-        //@ts-ignore
-        effect(calculationStore);
-      }}
-    />
-  ));
-};
-
-export default buildElement;

src/client/hocs/withTitle.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Flex } from "client/UIKit/grid";
+
+const withTitle = (title) => (Component) => (props) => (
+  <Flex>
+    <div>{title}</div>
+    <Component {...props} />
+  </Flex>
+);
+
+export default withTitle;

src/client/tools/runEffects.js

@@ -0,0 +1,14 @@
+async function runEffects(effects, calculationStore) {
+  console.log(effects);
+  if (effects && effects.length > 0) {
+    for (let effect of effects) {
+      try {
+        await effect(calculationStore);
+      } catch (error) {
+        throw error;
+      }
+    }
+  }
+}
+
+export default runEffects;

src/core/config/initialValues.ts

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