From ac7e6617a3cd3510c2711a74154fdb238633be78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?= =?UTF-8?q?=D0=A7=D0=B8=D0=BA=D0=B0=D0=BB=D0=BA=D0=B8=D0=BD?= Date: Mon, 31 Aug 2020 14:17:09 +0300 Subject: [PATCH] remove builder, debounce, style --- package.json | 2 + src/client/App.css | 1 + .../Containers/Calculation/Sections/index.ts | 38 ++++++++---- src/client/Containers/Calculation/index.jsx | 6 +- src/client/Effects/index.ts | 2 + src/client/Elements/Buttons.jsx | 7 --- src/client/Elements/Input.jsx | 58 +++++++++++-------- src/client/Elements/Select.jsx | 18 ------ src/client/Layout/index.jsx | 9 +-- src/client/hocs/buildElement.tsx | 47 --------------- src/client/hocs/withTitle.jsx | 11 ++++ src/client/tools/runEffects.js | 14 +++++ src/core/config/initialValues.ts | 1 + 13 files changed, 100 insertions(+), 114 deletions(-) delete mode 100644 src/client/Elements/Buttons.jsx delete mode 100644 src/client/Elements/Select.jsx delete mode 100644 src/client/hocs/buildElement.tsx create mode 100644 src/client/hocs/withTitle.jsx create mode 100644 src/client/tools/runEffects.js diff --git a/package.json b/package.json index eea545f..8076fe8 100644 --- a/package.json +++ b/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": { diff --git a/src/client/App.css b/src/client/App.css index e69de29..c4c61e7 100644 --- a/src/client/App.css +++ b/src/client/App.css @@ -0,0 +1 @@ +@import "~antd/dist/antd.css"; diff --git a/src/client/Containers/Calculation/Sections/index.ts b/src/client/Containers/Calculation/Sections/index.ts index 47b3f4a..b1d5540 100644 --- a/src/client/Containers/Calculation/Sections/index.ts +++ b/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,19 +9,33 @@ export default [ elements: [ { name: "tbxPrice", - title: "Цена", - Component: TitledInput, - // getValue: undefined, - sourceValueName: "price", - Effects: [testEffectForPrice], + Component: withTitle("Price")(Input), + props: { + placeholder: "Enter price", + sourceValueName: "price", + Effects: [testEffectForPrice], + }, }, { name: "tbxOne", - title: "One", - Component: TitledInput, - // getValue: undefined, - sourceValueName: "one", - Effects: [testEffectForOne], + 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); + }, + }, }, ], }, diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index aa1537e..1e2216a 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/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) => (

{title}

- {elements.map((element, ie) => { - const Element = buildElement(element); - return ; + {elements.map(({ Component, props }, ie) => { + return ; })}
))} diff --git a/src/client/Effects/index.ts b/src/client/Effects/index.ts index 51127dc..7cc5877 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("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); diff --git a/src/client/Elements/Buttons.jsx b/src/client/Elements/Buttons.jsx deleted file mode 100644 index 35286fe..0000000 --- a/src/client/Elements/Buttons.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from "styled-components"; - -export const MenuButton = styled.button` - padding: 15px; - border: 0; - -`; diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx index 8975010..cc8153c 100644 --- a/src/client/Elements/Input.jsx +++ b/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 ( - - {title && {title}} - { - onChange(e); - }} - value={value} - /> - - ); + useEffect(() => { + if (sourceValueName) { + if (debouncedValue) { + calculationStore.setValue(sourceValueName, debouncedValue); + runEffects(Effects, calculationStore); + } + } + }, [debouncedValue]); + + return useObserver(() => ( + { + setCurrentValue(e.target.value); + }} + /> + )); }; + +export default Input; diff --git a/src/client/Elements/Select.jsx b/src/client/Elements/Select.jsx deleted file mode 100644 index 534c53b..0000000 --- a/src/client/Elements/Select.jsx +++ /dev/null @@ -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 ( - - ); -}; - -export { Select }; diff --git a/src/client/Layout/index.jsx b/src/client/Layout/index.jsx index 08b5ede..08be2e8 100644 --- a/src/client/Layout/index.jsx +++ b/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 = () => ( @@ -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", diff --git a/src/client/hocs/buildElement.tsx b/src/client/hocs/buildElement.tsx deleted file mode 100644 index 1af6157..0000000 --- a/src/client/hocs/buildElement.tsx +++ /dev/null @@ -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 =

(data: { - name: string; - title: string; - Component: ComponentType

; - sourceValueName: SourceValueNames; - getValue: () => any; - Effects: Promise[]; - 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(() => ( - { - calculationStore.setValue(sourceValueName, e.target.value); - var effect = Effects[0]; - //@ts-ignore - effect(calculationStore); - }} - /> - )); -}; - -export default buildElement; diff --git a/src/client/hocs/withTitle.jsx b/src/client/hocs/withTitle.jsx new file mode 100644 index 0000000..75f0722 --- /dev/null +++ b/src/client/hocs/withTitle.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import { Flex } from "client/UIKit/grid"; + +const withTitle = (title) => (Component) => (props) => ( + +

{title}
+ + +); + +export default withTitle; diff --git a/src/client/tools/runEffects.js b/src/client/tools/runEffects.js new file mode 100644 index 0000000..96d2f2d --- /dev/null +++ b/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; diff --git a/src/core/config/initialValues.ts b/src/core/config/initialValues.ts index 0976d31..e440a8c 100644 --- a/src/core/config/initialValues.ts +++ b/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;